javascript - 变量 x = x || "default val"如果在其上方定义了 x，则无法正确设置

Question

HTML:

<script type="text/javascript">
  var x = "overriden";
</script>
<script src="myjs.js"></script>

myjs.js:

$(document).ready(function(){
  var x = x || "default val";
  alert(x); // this alerts "default val" and not "overriden"
});

出于某种原因，x 最终成为 "default val" 而不是 "overriden"，即使最初我设置在我什至包含对 myjs.js 的脚本引用之前，它被 “overriden”。

知道为什么会这样吗？我试图让托管页面为包含的 js 文件中使用的变量设置覆盖，否则使用默认值。

Answer 1

应用变量声明提升后的内容:

var x;
x = 5;

$(document).ready(function(){
    var x;
    x = x || "default";
});

它查看最接近的 x 并发现它的值为 undefined 这是一个虚假值，因此 x 被设置为 “默认”。

---

如果它们在同一范围内就没问题，因为声明总是提升到赋值之上，所以:

var x = 5;

var x = x || "default";

其实只是

var x;

x = 5;
x = x || "default";

---

这是完全没有意义的建议:

$(document).ready(function(){
    x = x || "default";
});

如果未定义x，它将抛出一个ReferenceError。

---

所以要么在相同的范围内进行检查，要么做类似的事情:

$(document).ready(function(){
    var x = window.x || "default";
});

无效的属性读取不会导致 ReferenceError，而只会返回 undefined。