2017-08-05 63 views
2

对象相等时没有参考值。两个对象的相等性

var obj1 = {name: 'Yousef', age: 15}, 

    obj2 = {name: 'Yousef', age: 15}; 

console.log(obj1 === obj2); // The Result will be false 

然而,这条规则似乎并不适用于DOM对象:

var div1 = document.querySelector('div'), 

    div2 = document.querySelector('div'); 

console.log(div1 === div2); // The Result will be True! 

任何人都可以解释,为什么?

+5

因为它们是同一个对象? – Li357

+0

obj1与obj2具有相同的值,但它们没有相同的引用,因此它们不相等 –

+0

是的,它们具有相同的引用 - 它们*是相同的对象* - 指向相同的DIV。 – Li357

回答

5

你的第一个例子是在比较两个独立的对象。您的DOM示例将一个对象与自己进行比较。 querySelector不是创建的一个对象,它会返回对DOM树中已存在的对象的引用。

相当于你的DOM的例子是这样的:

function findElement(element, tag) { 
 
    for (var n = 0; n < element.children.length; ++n) { 
 
     var child = element.children[n]; 
 
     if (child.tag === tag) { 
 
      return child; 
 
     } 
 
    } 
 
    return null; 
 
} 
 

 
var tree = { 
 
    children: [ 
 
     { 
 
      tag: "child", 
 
      name: "I'm the child element", 
 
      children: [] 
 
     } 
 
    ] 
 
}; 
 

 
var obj1 = findElement(tree, "child"); 
 
var obj2 = findElement(tree, "child"); 
 
console.log(obj1 === obj2); // true

3

因为当您使用querySelector时,您会发现第一个也是唯一与您的查询匹配的第一个DOM元素。

所以DIV1和DIV2是同一物体

+0

他们有相同的价值,但不是相同的参考,所以他们不应该是平等的! –

+2

@YousefEssam:不,他们**是**相同的对象引用。 –

+0

DOM是一个对象。当你使用querySelector时,你可以在里面搜索一个对象和对象。 因此div1和div2链接到同一个对象。但是用obj1和obj2,你创建了两个具有相同值的对象,他们在你的RAM中占据了2个不同的地方 – sheplu

1

让我们试着去了解从docs

返回匹配指定的文档中的第一个元素选择器或一组选择器。

所以,不管你打了多少次,你得到的是相同的元素?

是的。 querySelector不会创建任何对象,它只是遍历DOM并返回匹配的对象。通过子节点的量多的匹配在文档标记使用文档的节点的深度优先前序遍历的第一个元素,并通过连续的节点迭代完成:即使这点也在doc提到

注)。

在你的第一种情况下,你自己创建对象。