javascript - 为什么这个简单的 javascript 代码不起作用

Question

我有以下代码:

function show(){
    var a=document.getElementById('somediv').style.display;
    a="block";
}

上面的代码不行，如果我们用就可以了

 {
     var a=document.getElementById('somediv');
     a.style.display="block";
 }

上面的代码有什么问题？

Answer 1

要理解这一点，您需要了解一些有关 javascript 赋值的知识。

当您使用 = 运算符时，javascript 中有两种类型的赋值:按值赋值和按引用赋值。虽然某些语言让您可以选择在任何给定时间使用哪种类型的分配，但 javascript 不会让您选择。它对何时使用每个规则都有一套严格的规则。

“按值赋值”是指将特定值(如数字 3 或字符串 "none")赋给另一个变量。

“按引用赋值”意味着将指向另一个变量的指针放入您的新变量中，对该对象内容的任何编辑都将反射(reflect)在这两个地方。

对于像字符串、数字和 bool 值这样的简单类型，javascript 总是使用按值赋值。对于像数组和对象这样的类型，javascript 总是通过引用进行赋值。这意味着当你这样做时:

var a=document.getElementById('somediv').style.display;

由于 display 属性中的值是一个字符串，javascript 将使用按值赋值并将 display 属性中的字符串值复制到 a 变量。一旦复制完成，a 变量就与 display 属性没有任何关系。您可以完全独立地更改 display 属性和 a，因为它们每个都有自己的字符串副本。

因此，当您执行以下操作时:

a="block";

您只是将一个新字符串分配给 a 变量，因为它与之前的 display 属性无关。

---

另一方面，当您这样做时:

var a=document.getElementById('somediv');

您正在将对象分配给 a。而且，javascript 总是通过引用分配对象。这意味着 a 有一个指向 somediv 对象的指针。没有副本，它们都指向完全相同的对象。因此，您对任一引用所做的任何更改实际上都会更改同一个对象。所以，当您这样做时:

 a.style.display="block";

您正在更改实际的 DOM 对象。

---

我记得的规则是数字、字符串和 bool 值等简单类型在分配时被复制(按值分配)。不会复制数组和对象等复杂类型，只会将指向原始对象的指针放入新变量(通过引用分配)，因此两者都指向完全相同的对象。

按值赋值非常简单。通过引用赋值可能非常强大，但偶尔也会造成混淆，导致软件中无法预料到对原始对象的真实引用的后果的错误。正因为如此，如果你想要一个对象的实际副本，你必须显式地制作一个对象的副本，因为赋值不会为你做这件事。另一方面，只要您了解其工作原理，就可以传递对复杂对象的引用，这可能非常有用。在 javascript 中，无法获取对数字、字符串或 bool 值等简单类型的引用。它可以放入对象(作为属性)，然后您可以传递对该对象的引用，但不能传递对简单类型的引用。

---

这里有几个例子:

// define person
var person = {height: 66, hair: "blonde"};

// assign the person object to bob
// because person is an object, the assignment is by reference
var bob = person;

// change bob's hair
bob.hair = "red";

// because assignment was by reference, person and bob are the same
// object so changing one changes the one original
alert(person.hair);    // red

---

// define person
var person = {height: 66, hair: "blonde"};

// assign the person's height to a variable
// because height is a number, the assignment is by value (e.g. it's copied)
var myHeight = person.height;

// change both heights
myHeight = 72;
person.height = 60;

// because assignment was by value, myHeight and person.height are 
// completely separate copies so changing one does not affect the other
alert(myHeight);         // 72
alert(person.height);    // 60