有許多 JQuery 函式似乎只是回傳對相同物件的參考，只是為了促進呼叫鏈。但是在處理特定實體很重要的事情時，我注意到如果我測驗物件是否相等，則回傳的物件不是同一個物件。但是，它們反映了相同的資訊。
從 .css() 回傳的物件有什么“不同”？為什么他們不只是修改實體并回傳相同的實體，是否有設計原因？
在控制臺中，我可以做到這一點，并且兩個實體都反映了對第二個實體所做的更新顏色，但是測驗==物件是否是同一個物件會回傳 false。
var blah = $('#div1');
var blah2 = $('#div1').css('color','red');
blah.css('color'); -- 'rgb(255, 0, 0)'
blah2.css('color'); -- 'rgb(255, 0, 0)'
blah === blah2
false
blah == blah2
false
我想澄清一下，我理解值比較和物件比較之間的區別。我知道測驗表明它們是兩個單獨的物件。這并沒有讓我感到困惑，它只是讓我感到驚訝。他們可以輕松地維護同一個物件，通過它們的句柄修改元素，并回傳同一個物件而無需創建新物件。
通常，您會看到具有物件呼叫鏈的兩種模式之一。每次呼叫都回傳相同的物件參考，保持相同的參考并簡單地修改該物件的屬性/子物件。或者每次呼叫都會創建一個新物件，修改并回傳該新物件而不修改原始物件。
如果您想遵循不可變模式以便每次呼叫都生成一個新物件而不修改先前的實體，則第二種方法是有利的。
在這種情況下，兩個物件都參考相同的 HTML 元素并反映相同的資訊，所以令我驚訝的是 JQuery 正在創建并回傳一個新物件。我認為這是一個明確的設計選擇，對我來說并不明顯。
uj5u.com熱心網友回復：
相等差異與物件的存盤和參考方式有關。每次創建一個新物件時，都會為它分配一個記憶體位置。因此，當您訪問該物件時，您的代碼將檢查該記憶體位置并在那里檢索該物件。問題是您的兩個物件保存在記憶體中的不同位置。因此，當您檢查它們是否相等時，代碼會看到記憶體中的兩個位置不同。因此，由于位置不同，它回傳 false。盡管內容完全相同，但實際上是在比較記憶體中的位置。
希望這會有所幫助，如果我能澄清任何事情，請告訴我。
uj5u.com熱心網友回復：
blah永遠不會相等blah2，它們是兩個獨立的 jQuery 物件（盡管 ID 相同）。
您可能想要比較的結果css('color')，它正確回傳值的字串表示形式：
var blah = $('#div1');
var blah2 = $('#div1').css('color','red');
console.log(blah.css('color') == blah2.css('color'));
console.log(blah.css('color') === blah2.css('color'));#div1 {
color: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1"></div>uj5u.com熱心網友回復：
每次使用 查詢元素時$('myelement')，jquery 都會回傳一個物件，其中包含有關該元素的大量資料。但是，當使用相等運算子==或===在兩個物件中時，js 會與物件的參考進行比較，而不是值。就是說雖然js中兩個物件的值相同，但是比較起來可能是false參考不一樣。
讓我們看一些例子：
const a = {
foo: 1
};
const b = {
foo: 1
}
const c = b;
// returns false, same value but different reference
console.log(a == b);
// returns true, same value and same reference
console.log(b == c);
// returns false, same value but different reference
console.log(a == { foo: 1 });這意味著盡管 2 個物件可能具有相同的值，但如果它們沒有相同的參考，js 會像false使用==and運算子一樣評估它們。===
您可以在這個 jquery 示例中查看它：
const foo1 = $('#foo');
const foo2 = $('#foo');
console.log(foo1 == foo2);
console.log(foo1 === foo2);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="foo">Hello world</div>那么我們該如何解決呢？
幸運的是，Jquery 使用索引對真正的 HTML 元素有自己的參考[0]：
const foo = $("#foo");
console.log(foo[0])<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="foo">Hello world</div>因此，您可以在使用相等運算子時具有不同行為的 HTML 元素之間進行比較：
const foo1 = $('#foo');
const foo2 = $('#foo');
console.log(foo1[0] == foo2[0]);
console.log(foo1[0] === foo2[0]);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="foo">Hello world</div>uj5u.com熱心網友回復：
正如 Teemu 指出的那樣，我兩次使用 $ 選擇器時出錯了，我當然希望它生成一個新的 JQuery 型別，因為它會生成一個新的 HTMLElement 集合。所以我的測驗無效，因為css沒有生成新物件，$確實如此。我不知道我是怎么錯過的。
一旦我對此進行了調整，.css(確實會回傳與我預期相同的物件。所以這并不奇怪，我的測驗根本無效。
var blahA = $('#div1');
var blahB = blahA.css('color','red');
blahA == blahB
true
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/412018.html
標籤：
下一篇：向路由添加引數并在條件中使用