分配給變量時無法設置backgroundColor

Question

在嘗試為文檔正文設置背景色時，我感到困惑的是，為什么以下代碼不起作用 （在Chrome中測試）：

var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.

雖然可以正常工作：

var a = 'blue';
var b = document.getElementById('body').style;
b.backgroundColor = a; // works.

這也有效：

document.getElementById('body').style.backgroundColor = 'blue'; //works

有人可以解釋為什么第一個版本不起作用嗎？

Answer 1

var b = document.getElementById('body').style.backgroundColor;

行為類似於吸氣劑，並返回帶有主體ID的元素的背景色。 它並沒有像您所想的那樣指向它。 因此b將包含一個字符串，例如purple或您設置的任何顏色。

然后，您正在做b = a; 這只會用a的值覆蓋b的值。

Answer 2

這是經典的指針用戶錯誤。 我犯了很多次這個錯誤。

var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.

上面的代碼不起作用，因為document.getElementById('body').style.backgroundColor值已復制到標識符b 。 當您重新分配b與價值a你不重新分配的值document.getElementById('body').style.backgroundColor 。

這就是為什么此代碼有效的原因：

var a = 'blue';
var b = document.getElementById('body').style;
b.backgroundColor = a; // works.

因為您要將style的值保存到標識符b 。 b復雜類型。 現在，當您重新分配b.style您還要重新分配document.getElementById('body').style因為標識符b與document.getElementById('body').style擁有相同的引用。

讓我嘗試分解一下：

---

在javascript（和許多其他語言）中，當您將復雜類型（即對象或數組）分配給標識符時，實際上是在分配對內存中“某物”的引用。 您可以認為標識符的值是“地址”，而不是持有復雜類型的所有值，並且當您嘗試使用obj.prop語法從標識符中提取值時，實際上是在告訴程序到地址並獲取所需的值。

因此，如果該“內容”中的任何屬性發生更改，則引用（也稱為指針）也將反映該更改：

 const complexType = { a: 'something' } const x = complexType; const y = complexType; console.log(`from x: ${xa}`); console.log(`from y: ${ya}`); complexType.a = 'something else'; // notice how they change console.log(`from x again: ${xa}`); console.log(`from y again: ${ya}`); 

相比之下，簡單/原始類型總是在賦值時復制 。 這意味着標識符保留完整值，而不是保存地址。 這意味着每當您為簡單/原始值分配標識符時，即使更改原始值，該值也將保留 。

 // original value let simpleType = 'something'; let a = simpleType; let b = simpleType; console.log(`from a: ${a}`); console.log(`from b: ${b}`); // re-assign simpleType = 'something else'; // notice how they *don't* change console.log(`from a again: ${a}`); console.log(`from b again: ${b}`); 

總結一下， document.getElementById('body').style.backgroundColor返回一個簡單的類型。 此簡單類型在分配時被復制。 這就是為什么您不能這樣做：

var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.

希望有幫助！