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;，只会使用b的值覆盖a的值。

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的值。

这就是为什么thiis代码有效：

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（以及许多其他语言）中，当您将复杂类型（即对象或数组）分配给标识符时，您实际上正在为＆＃34;某些内容＆＃34;在记忆中。您可以将标识符的值视为＆＃34;地址＆＃34;而不是保持复杂类型的所有值，并且当您尝试使用obj.prop语法从标识符中提取值时，您实际上是在告诉程序转到该地址并获取所需的值。

因此，如果有任何财产，那么＆＃34;某事物＆＃34;更改，引用（又称指针）也将反映这种变化：

＆＃13;

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

＆＃13;

相比之下，简单/原始类型总是在赋值时复制。这意味着标识符保留完整值而不是保存地址。这意味着无论何时为简单/原始值分配标识符，即使更改原始值，该值也将持久化。

＆＃13;

// 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}`);

＆＃13;

总而言之，document.getElementById('body').style.backgroundColor返回一个简单类型。这个简单类型在赋值时被复制。这就是为什么你不能这样做的原因：

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

希望有所帮助！

分配给变量时无法设置backgroundColor

2 个答案: