[英]Cannot set backgroundColor when assigned to a variable
Trying to set a background color to the body of the document, I am puzzled as for why the following code does not work (tested in Chrome): 在尝试为文档正文设置背景色时,我感到困惑的是,为什么以下代码不起作用 (在Chrome中测试):
var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.
while this works fine: 虽然可以正常工作:
var a = 'blue';
var b = document.getElementById('body').style;
b.backgroundColor = a; // works.
and this works too: 这也有效:
document.getElementById('body').style.backgroundColor = 'blue'; //works
Can someone explain why the first version does not work? 有人可以解释为什么第一个版本不起作用吗?
var b = document.getElementById('body').style.backgroundColor;
Acts like a getter and returns the background color of the element with the ID of body. 行为类似于吸气剂,并返回带有主体ID的元素的背景色。 It doesn't hold a pointer to it the way you seem to be thinking.
它并没有像您所想的那样指向它。 So
b
would contain a string like purple
or whatever color you set. 因此
b
将包含一个字符串,例如purple
或您设置的任何颜色。
Then you're doing b = a;
然后,您正在做
b = a;
which will just overwrite the value of b
with a
's value. 这只会用
a
的值覆盖b
的值。
This is a classic pointer user error. 这是经典的指针用户错误。 I've made this mistake many many times.
我犯了很多次这个错误。
var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.
The above code doesn't work because the value of document.getElementById('body').style.backgroundColor
is being copied to the identifier b
. 上面的代码不起作用,因为
document.getElementById('body').style.backgroundColor
值已复制到标识符b
。 When you reassign b
with the value of a
you're not re-assigning the value of document.getElementById('body').style.backgroundColor
. 当您重新分配
b
与价值a
你不重新分配的值document.getElementById('body').style.backgroundColor
。
That why thiis code works: 这就是为什么此代码有效的原因:
var a = 'blue';
var b = document.getElementById('body').style;
b.backgroundColor = a; // works.
because you're saving the value of style
to the identifier b
. 因为您要将
style
的值保存到标识符b
。 b
a complex type. b
复杂类型。 Now when you reassign b.style
you're also re-assigning document.getElementById('body').style
because the identifier b
holds the same reference as document.getElementById('body').style
. 现在,当您重新分配
b.style
您还要重新分配document.getElementById('body').style
因为标识符b
与document.getElementById('body').style
拥有相同的引用。
Let me try to break that down: 让我尝试分解一下:
In javascript (and many other languages) when you assign a complex type (ie an object or an array) to an identifier, you're actually assigning a reference to "something" in memory. 在javascript(和许多其他语言)中,当您将复杂类型(即对象或数组)分配给标识符时,实际上是在分配对内存中“某物”的引用。 You can think of the identifier's value being an "address" instead of holding all the values of the complex type, and when you try to pull values out of the identifier using the
obj.prop
syntax, you're actually telling the program to go to the address and fetch the desired value. 您可以认为标识符的值是“地址”,而不是持有复杂类型的所有值,并且当您尝试使用
obj.prop
语法从标识符中提取值时,实际上是在告诉程序到地址并获取所需的值。
Therefore, if any property in that "something" changes, the references (aka pointers) will also reflect that change: 因此,如果该“内容”中的任何属性发生更改,则引用(也称为指针)也将反映该更改:
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}`);
To contrast, simple/primitive types are always copied on assignment . 相比之下,简单/原始类型总是在赋值时复制 。 This means that the identifier hold the full value instead of holding an address.
这意味着标识符保留完整值,而不是保存地址。 That means whenever you assign an identifier to a simple/primitive value, that value will persist even when you change the original value.
这意味着每当您为简单/原始值分配标识符时,即使更改原始值,该值也将保留 。
// 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}`);
So to conclude, document.getElementById('body').style.backgroundColor
returns a simple type. 总结一下,
document.getElementById('body').style.backgroundColor
返回一个简单的类型。 This simple type get copied on assignment. 此简单类型在分配时被复制。 That's why you can't do this:
这就是为什么您不能这样做:
var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.
Hope that helps! 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.