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>

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

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.prop1上下文中的

myObj应为undefined，但window.test可能（取决于浏览器）引用DOM节点<div id="test"></div>。< / p>

根据您的示例，您可以按如下方式进行分配：

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

或

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

Answer 2

这不起作用。在这种情况下，this为window。

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: this.testDiv // window.testDiv

}

Answer 3

经过一番游戏，我找到了答案。在您创建第二个属性时，this引用window，其中您有一个ID为testDiv的div。

所以你实际上是这样做的......

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

我个人不知道您可以这样做，但window.testDiv会返回ID为testDiv的DOM元素。

Answer 4

如前所述，此指的是全局窗口对象。

this.testDiv 引用DOM元素的原因是因为Web浏览器中的标准行为是为每个带有id的DOM元素添加全局引用。在解析元素时添加引用，因此您的脚本代码必须位于要引用的元素下面。

是否依赖这些引用是另一种讨论。

Answer 5

实际上，在第一种情况下，获取jQuery对象是显而易见的，应该被理解（因为你使用'$'）。在第二种情况下，由于这些原因，您将引用一个简单的DOM节点（对象） -

- 你没有在任何地方使用jQuery，所以不要指望它是一个 jQuery对象。

- 您访问this.testDiv意味着 - 给我命名的财产当前节点（正在访问）的“testDiv” 现在，如果您已在<body>标记中编写此代码，则this应指向body元素的节点/对象（在DOM中）。我不确定这一部分，但是，不知何故，你的'testDiv'对象被注册为body对象中的属性（可能是因为你为这个元素使用了“id”属性，因此使它成为唯一的）。因此，当您尝试使用this.testDiv获取对象时，您获得了DOM中<div>元素的确切对象。并且，默认情况下，javascript为您提供了对DOM / javascript对象（而不是jQuery对象）的简单引用。

除此之外，jQuery对象可以被认为是普通javascript / DOM对象的涂层。它不是问题的一部分，但如果你想作为jQuery对象访问，那么，

要将javascript对象Obj转换为jQuery对象，请执行此操作 Obj=$(Obj);

新的Obj将是一个jQuery对象。

Answer 6

let object = $('#someId') -- jQueryObject

accesing any custom object field

object[0].anyProp = 'anyValue'

console.log(object) -- jQuery object
console.log(object[0]) -- Raw JS object
console.log(object[0].anyProp) -- Raw JS object prop

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

6 个答案: