匿名函数内部的Javascript范围问题

Javascript scope issue, inside an anonymous function

本文关键字：Javascript 范围问题内部函数更新时间：2023-09-26

对不起，我不能再具体说明标题了。

我正在构建一个网站（个人），它根据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+"页面值"

在过去的30分钟里，我一直在努力找出我做错了什么，甚至想过为每个页面硬编码URL。

之所以要这样做，是因为我的本地开发服务器和web主机有不同的目录结构，所以我不想每次开发+发布时都重写URL。至于为什么所有东西都被包裹在一个物体里，我认为这样维护会更容易。

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

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

因此，在wrapper的定义中，不能引用wrapper。而且，在config的定义中，也不能引用config，依此类推

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

将前两行更改为：

var wrapper = null;
(function(){
   wrapper = {

否则，包装器就是匿名函数的局部变量。

问题是，当您询问包装器的值时，您仍然忙于定义包装器，这就是为什么它仍然未定义的原因。

下面的代码也失败了：

var x = {
    y:"1",
    z:x.y
}

为什么不：

//...
init: function(){
    //Runs on document ready
    this.foo();
    var config = this.nav.config;
    for (var page in config.pages) {
        config.pages[page] = config.dir + config.pages[page];
    }
},
//...