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

【问题标题】：Why can't I use 'this' when creating this javascript object literal?为什么我在创建这个 javascript 对象文字时不能使用“this”？
【发布时间】：2011-08-19 01:35:44
【问题描述】：

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 未定义。这里有什么问题？

[UPDATE] 我发现如果我把代码改成：

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

它有效。但是为什么第一个案例不行呢？

【问题讨论】：

这是一个文字对象，而不是“JSON 对象”。 JSON是一种表示数据的文本格式，所以这个问题和JSON一点关系都没有。
@wong2 没关系。我认为你的问题很有趣，需要一个标题，以便其他人以后可以阅读它，如果它适用于他们。
真的是关于“JavaScript 对象文字中this 的范围规则”
没错，但是否可以给新手更友好的标题？
@tobyodavies JSON 是一种数据交换格式，因此如果您看到一些看起来像 JSON 没有用于该目的的东西，它可能不是。是的，JSON 代表 JavaScript Object Notation，但并不意味着 JavaScript 中的所有对象字面量表示法都自动是 JSON。一方面，JSON 只是 JavaScript 中对象字面量的一部分。另一方面，问题中的特定示例不是有效的 JSON，因为属性名称不在引号中，即使这在 JavaScript 中完全有效。

标签： javascript dom javascript-objects

【解决方案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')

【讨论】：

【解决方案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);

【讨论】：

因为this 在那个上下文中不是你正在构造的对象。
哦，是的！构造slider时可以参考slider的my_div吗？我的意思是我不想在slider之外有一个my_div
查看我的回答，了解如何使用构造函数正确使用this，（注意new关键字的使用）

【解决方案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");

【讨论】：

【解决方案4】：

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

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

【讨论】：

this 不应该是未定义的，它应该是window 对象。
我说的不是保留字，而是它的含义。也许我应该说“未声明”