为什么这个简单的 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" ）分配给另一个变量。

“按引用赋值”意味着将指向另一个变量的指针放入您的新变量中，并且对该 object 的内容进行的任何编辑都将反映在这两个地方。

对于字符串、数字和布尔值等简单类型，javascript 始终使用按值赋值。 对于像 arrays 和对象这样的类型，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');

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

 a.style.display="block";

您正在更改实际的 DOM object。

---

我记得的规则是数字、字符串和布尔值等简单类型在分配时被复制（按值分配）。 像 arrays 和对象这样的复杂类型不会被复制，只有指向原始 object 的指针被放入新变量（通过引用分配），因此两者都指向完全相同的 object。

按值分配非常简单。 通过引用赋值可能非常强大，但偶尔也会造成混淆，从而导致软件出现错误，这些错误无法预料到对原始对象的真实引用的后果。 因此，如果您想要 object 的实际副本，则必须明确制作 object 的副本，因为赋值不会为您执行此操作。 另一方面，只要您了解其工作原理，就可以传递对复杂对象的引用，这可能非常有用。 在 javascript 中，无法获得对数字、字符串或 boolean 等简单类型的引用。它可以放入 object（作为属性），然后您可以传递对 object 的引用，但您可以' 传递对简单类型的引用。

---

这里有一些例子：

// 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

Answer 2

=是赋值运算符。 您正在将某些内容放入变量中。 在第一种情况下，您将a设置为display的值。 这是一个等于block或none等的字符串。

在第二种情况下，您将a设置为 object somediv 。 然后在其上设置显示属性。

第一种情况不起作用，因为您的代码说：设置字符串的显示属性。 字符串没有显示属性，因此失败。 这就像在说：

'foobar'.style.display = 'none'

Answer 3

你写错了 function 的拼写。根据你的代码document.getElementById('somediv').style.display返回 div 的当前显示状态，因此它给出了设置显示块的错误。

您将像这样直接设置 div 显示属性

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