访问Jquery选择器作为对象属性,意外结果

Question

假设我有一个div看起来像:

<div id="testDiv">some stuff in here</div>

我有一个定义对象文字的脚本:

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: this.testDiv    
};

为什么我访问时testObject.testDiv获得对jQuery对象的引用,即

[<div id=?"testDiv">?…?</div>?]

但是当我访问时,testObject.testDivProperty我获得了对实际元素的引用,即

<div id=?"testDiv">?…?</div>?

因此我无法执行jQuery操作testObject.testDivProperty？

Answer 1

尝试在对象实例化期间引用您定义的对象this并不像您期望的那样工作。

this在你的例子中实际上指的是该window对象。某些浏览器（例如 Chrome 和 IE）会将命名 DOM 节点附加到document和/或window对象，这就是为什么this.testDiv用id="testDiv". 碰巧您尝试访问的属性名称与元素 ID 具有相同的值。

要演示到底发生了什么，请尝试以下操作：

<div id="test"></div>

var myObj = {
    prop1: $('#test'),
    prop2: this.prop1
};

this.prop1myObj在应该 的上下文中undefined，但window.test可能（取决于浏览器）引用 DOM 节点<div id="test"></div>。

根据您的示例，您可以按如下方式完成作业：

var myObj = { prop1: $('#test') };
myObj.prop2 = myObj.prop1;

或者

var test = $('#test');
var myObj = {
    prop1: test,
    prop2: test
};