2017-08-05 95 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提到

注)。

在你的第一種情況下,你自己創建對象。