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对象的主体内部简单地使用this并不意味着它引用了正在构造的对象。它几乎肯定会引用全局窗口对象。

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

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

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

Answer 2

您无法使用它的原因是因为JSON对象尚未实际初始化。这就是我要做你想做的事情：

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

因为该对象尚未实际实例化。这会有效：

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

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

这就像是在想你可能成为你自己的父亲，你创造的那一刻就不存在。

为什么我在创建这个javascript对象文字时不能使用'this'？

4 个答案: