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

Why this simple javascript code does not work

本文关键字：JavaScript 代码 不起作用 简单 为什么      更新时间：2023-09-26

我有以下代码：

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

上面的代码不起作用，如果我们使用

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

上面的代码有什么问题？

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

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

"按值赋值"是指将特定值（如数字3或字符串"none"）分配给另一个变量。

"引用赋值"意味着指向另一个变量的指针被放置在新变量中，并且对该对象内容的任何编辑都将反映在这两个位置。

对于字符串、数字和布尔值等简单类型，javascript 总是使用按值赋值。 对于数组和对象等类型，javascript 总是通过引用进行赋值。 这意味着当您这样做时： 

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

由于 display 属性中的值是字符串，JavaScript 将使用 Assignment by Value，并将 display 属性中的字符串值复制到 a 变量中。 创建此副本后，a变量与 display 属性没有任何联系。 您可以完全独立地更改 display 属性和a，因为它们都有自己的字符串副本。

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

a="block";

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

另一方面，当您执行此操作时：

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

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

 a.style.display="block";

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

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

按值分配非常简单。 通过引用进行分配可能既强大又偶尔令人困惑，导致软件中的错误无法预测对原始引用的真正引用的后果。 因此，如果你想要一个对象的实际副本，你必须显式地制作一个对象的副本，因为赋值不会为你做这件事。 另一方面，只要您了解它的工作原理，就可以传递对复杂对象的引用非常有用。 在javascript中，没有办法获取对简单类型的引用，如数字，字符串或布尔值。 它可以放入对象中（作为属性），然后可以传递对该对象的引用，但不能传递对简单类型的引用。

以下是一些示例：

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

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

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

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

'foobar'.style.display = 'none'

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

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

function show(){
    var a=document.getElementById('somediv').style.display="block";
}
相关文章：