【问题标题】：strange behaviour of variable named "status" in javascriptjavascript中名为“status”的变量的奇怪行为
【发布时间】：2016-09-28 02:39:47
【问题描述】：

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

为什么名称不同的相同变量的行为会有所不同？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/Window/status

标签： javascript

【解决方案1】：

这是因为您在全局上下文中运行代码！ var 绑定变量绑定到函数范围。如果您没有函数，则您处于全局上下文中，这意味着在浏览器中您位于 window 对象上。

此代码将记录Demo:

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

现在您的代码中断了，因为 window.status 是 reserved。

一个简单的解决方法是用一个函数包围您的代码，以便为您的变量提供一个新的上下文，这始终是一个好习惯。

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

【讨论】：

【解决方案2】：

单词status 是保留关键字，因此您需要将其重命名为status3 或其他名称。请参阅下面的 sn-p。您还可以通过访问此链接查看保留字列表：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>

希望对你有帮助。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

ES6/ES2015解决方案

在声明全局变量时使用let 或const。 They do not get defined on the window object。因此，可以避免与window.status 或window.name 以及全局对象的其他属性发生冲突。

下面的演示：

`let`

<!DOCTYPE html>
<html>
<body>

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

<script>
let status = [true,false,true,false,true,false,true,false,true,false];
let 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>

`const`

<!DOCTYPE html>
<html>
<body>

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

<script>
const status = [true,false,true,false,true,false,true,false,true,false];
const 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>

另见What's the difference between using "let" and "var"?

【讨论】：