javascript - JS 变量函数

Question

请看下面的代码：

var test = {

    test2 : {
        variable: 'hello world',

        test3: {
            test4 : test.test2.variable  
        },

        echo : function() {
            alert(test.test2.test3.test4);   
        }
    }

};

test.test2.echo();

jsfiddle

为什么 test4 不能访问变量：

test4 : test.test2.variable 

也请随意修改我的标题，我找不到更好的。

谢谢！

Answer 1

test是undefined在当时test.test2.variable被评估。

表达式是由内向外计算的，因此您的代码按以下顺序执行以下操作：

1. 创建一个对象
2. 创建一个对象
3. 将variable属性附加到 (2)
4. 创建另一个对象
5. 将test4属性附加到 (4)，其值是评估的结果test.test2.variable（失败，因为直到 (1) 才分配测试）
6. 将test3属性附加到值为 (4) 的第一个属性
7. 创建一个函数实例
8. 将echo属性附加到 (2)
9. 将test2指向 (2) 的属性附加到 (1)
10. 将 (1) 分配给变量test。

如果您可以依赖现代浏览器并且不太可能经常阅读或者您可以在test正确初始化后分配它，则可以使用如下所示的 getter 来延迟对 (5) 的评估。

 var test = { 
   test2: {
     variable: "foo",
     test3: {
       get test4 () { return test.test2.variable; }
     }
   }
 };

或者更向后兼容

 var test = {
   test2: {
     variable: "foo",
     test3: {
       test4: null
     }
   }
 }
 test.test2.test3.test4 = test.test2.variable;

Answer 2

因为test还没有分配。Javascript 解释器首先解析右侧的 JSON 文字，然后将值赋给test变量：

var test = {...}

要修复它，您可以这样做：

var test = {
    test2 : {
        variable: 'hello world',
        test3: {

        },
        echo : function() {
            alert(test.test2.test3.test4);   
        }
    }
};
test.test3.test4 = test.test2.variable;

Answer 3

这应该有效。自从迈克·塞缪尔（Mike Samuel）给出了很好的解释后，我就没有解释过。

var test = {

    test2 : {
        variable: 'hello world',

        test3: {
            test4 : function (){return test.test2.variable  }
        },

        echo : function() {
            alert(test.test2.test3.test4());   
        }
    }        
};

test.test2.echo();