Javascript范圍問題，在匿名函數內

Question

對不起，我對標題不再具體了。

我正在構建一個網站（個人），根據網址中使用的查詢字符串向用戶顯示不同的內容。

例如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的輸出（在此偽代碼情況下） directory/to/content/page_value ，但是當我嘗試訪問它時， dir是未定義的，我嘗試了以下方法來實現我想要的：

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

我一直在玩最后30分鍾，試圖找出我做錯了什么，甚至考慮為每個頁面硬編碼URL。

想要這樣做的原因是我的本地開發服務器和Web主機具有不同的目錄結構，所以每次我想開發+發布時我都不想重寫URL。 至於為什么所有東西都被包裹在一個物體里面，我覺得用這種方式維護會更容易。

希望答案很簡單，這只是一個業余錯誤/缺乏理解。

Answer 1

問題是您不能引用在該定義中定義的變量。

所以，在wrapper的定義中，你不能引用wrapper 。 而且，在config的定義中，你也不能引用config等等。

解決這個問題的通常設計模式是在數據結構聲明中盡可能多地初始化，然后在可以自由訪問所有數據結構時在.init()完成剩下的工作。

Answer 2

將前兩行更改為：

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

否則，包裝器是匿名函數的局部變量。

Answer 3

問題是當你要求它的值時，你仍然忙着定義包裝器，這就是為什么它仍然是未定義的。

以下代碼也失敗了：

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

Answer 4

為什么不：

//...
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];
    }
},
//...