為什么在創建此 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未定義。

這就像認為你可以成為你自己的父親，你不存在於你創造的那一刻。