为什么在创建此 javascript object 文字时不能使用“this”？

Question

html：

<div id="slide">
    <div>This is one</div>
    <div>This is two</div>
    <div>This is three</div>
</div>

JavaScript：

var slider = {
    div: document.getElementById("slide"),
    divs: this.div.getElementsByTagName("div")
};

alert(slider.divs.length);

jsfiddle： http://jsfiddle.net/CAzN8/

当我运行它时，Chrome 说this.div是未定义的。 这里有什么问题？

[更新]我发现如果我将代码更改为：

var tmp = document.getElementById("slide");
var slider = {
    div: tmp,
    divs: tmp.getElementsByTagName("div")
};

有用。 但是为什么第一个案例不起作用？

Answer 1

this是什么，由被调用的方法动态确定，而不是代码所在的词法块。

简单地在 JSON object 的主体内使用this并不意味着它指的是正在构建的 object。 它几乎肯定是指全局 window object。

如果您希望能够使用this ，则需要一个构造函数：

function Slider(id,tagName){
    this.div  = document.getElementById(id);
    this.divs = this.div.getElementsByTagName(tagName);
}

s = new Slider('slide','div')

Answer 2

您不能使用它的原因是因为 JSON object 实际上尚未初始化。 这就是我将如何做你想做的事情：

var slider = {
    my_div: document.getElementById("slide");
};

slider.my_divs = slider.my_div.getElementsByTagName("div");
alert(slider.my_divs.length);

或者

var my_div = document.getElementById("slide");

var slider = {
    my_div: my_div,
    my_divs: my_div.getElementsByTagName("div")
};

alert(slider.my_divs.length);

Answer 3

因为 object 实际上还没有被实例化。 不过，这将起作用：

var slider = {
    div: document.getElementById("slide"),
    divs: document.getElementById("slide").getElementsByTagName("div")
};

或者

var slider = {};
slider.div = document.getElementById("slide");
slider.divs = slider.div.getElementsByTagName("div");

Answer 4

您的代码不起作用，因为在创建 object 文字（括号内的内容）时， object 尚不存在， this未定义。

这就像认为你可以成为你自己的父亲，你不存在于你创造的那一刻。