匿名函数内部的 Javascript 作用域问题

Question

抱歉，我不能更具体地描述标题。

我正在构建一个网站(个人)，它根据 url 中使用的查询字符串向用户显示不同的内容。

例如page=home.html 会显示 home.html

网站 Javascript 被包裹在一个对象中，每个值包含不同的数据，一些伪代码:

(function(){
    var wrapper = {
        init: function(){
            //Runs on document ready
            this.foo();
            this.nav.render();
        },
        foo: function(){
            //Some functionality goes here for the website, e.g. Display something from an API
        },
        nav: {
            //Functionality to handle the navigation, has different properties
            config: {
                //Contains the config for nav, e.g. page names + locations
                dir: '/directory/to/content/',
                pages: {
                    page_name: wrapper.nav.config.dir + 'page_value'
                }
            },
            render: function(){
                 //some code
            },
            routes: function(){
                 //some code}
            }
        }
    };

    $(function(){
        wrapper.init();
    });
})();

我的问题是我试图将 dir 值添加到每个 page 值(在定义页面的对象内部)，期望得到directory/to/content/page_value 的(在这个伪代码案例中)的输出，但是当我尝试访问它时 dir 是未定义的，我已经尝试了以下方法来实现我想要的:

• wrapper.nav.config.dir + 'page_value'

在过去的 30 分钟里，我一直在尝试找出我做错了什么，甚至考虑过对每个页面的 URL 进行硬编码。

想要这样做的原因是我的本地开发服务器和 Web 主机具有不同的目录结构，所以我不想每次开发 + 发布时都重新编写 URL。至于为什么所有东西都包裹在一个对象中，我觉得这样维护起来会更容易一些。

希望答案很简单，这只是一个业余错误/缺乏理解。

Answer 1

问题是您不能引用在该定义中定义的变量。

因此，在wrapper 的定义中，您不能引用wrapper。而且，在 config 的定义中，您不能引用 config 等等。

解决这个问题的通常设计模式是在数据结构的声明中尽可能多地进行初始化，然后在可以自由访问所有数据结构时在 .init() 中完成其余部分.