程序员经验分享-hwhale

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

2023-12-20 
<!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/ https://jsfiddle.net/vdr2r38r/

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


这是因为您在全局上下文中运行代码！var绑定变量绑定到函数作用域。如果您没有任何功能，那么您就处于全局上下文中，这意味着在浏览器中您位于window object.

这段代码将记录Demo:

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

现在你的代码崩溃了，因为window.status is reserved https://developer.mozilla.org/en-US/docs/Web/API/Window/status.

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

<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

javascript 中名为“status”的变量的奇怪行为 的相关文章

随机推荐

热门标签