javascript中名为“status”的变量的奇怪行为

IT技术 javascript
2021-02-28 21:32:07

<!DOCTYPE html>
<html>
<body>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var status = [true,false,true,false,true,false,true,false,true,false];
var status1 = [true,false,true,false,true,false,true,false,true,false];

document.getElementById("demo1").innerHTML = status[2];
document.getElementById("demo2").innerHTML = status1[2];
</script>

</body>
</html>

https://jsfiddle.net/vdr2r38r/

为什么具有不同名称的相同变量的行为不同?

4个回答

这是因为您在全局上下文中运行代码!var绑定变量绑定到函数作用域。如果你没有函数,你就在全局上下文中,这意味着在浏览器中你在window对象上。

此代码将记录Demo

<script>
  var foo = "Demo";
  console.log(window.foo);
</script>

现在您的代码中断,因为window.statusreserved

一个简单的解决方法是用一个函数包围你的代码,为你的变量提供一个新的上下文,这总是很好的做法。

<script>
    (function() {
        var status = [true,false,true,false,true,false,true,false,true,false];
        var status1 = [true,false,true,false,true,false,true,false,true,false];

        document.getElementById("demo1").innerHTML = status[2];
        document.getElementById("demo2").innerHTML = status1[2];
    })();
</script>

该词status是保留关键字,因此您需要将其重命名为 likestatus3或其他名称。请参阅下面的片段。您还可以通过访问此链接查看保留字列表:http : //www.w3schools.com/js/js_reserved.asp

<!DOCTYPE html>
<html>
<body>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var status3 = [true,false,true,false,true,false,true,false,true,false];
var status1 = [true,false,true,false,true,false,true,false,true,false];

document.getElementById("demo1").innerHTML = status3[2];
document.getElementById("demo2").innerHTML = status1[2];
</script>

</body>
</html>

我希望这能帮到您。

更改变量名 'status' ,它是 Windows 保留字。在 HTML 中,您必须避免使用 HTML 和 Windows 对象和属性的名称

ES6 / ES2015 解决方案

在声明全局变量时使用letconst它们没有在 window 对象上定义因此,可以避免与全局对象的window.statuswindow.name等属性发生冲突

演示如下:

let

const

另请参阅使用“let”和“var”有什么区别?