javascript - 第二次访问 javascript 的全局变量会导致未定义

Question

我有以下 JavaScript 代码:

<script type="text/javascript">
   var x = 10;
   window.onload = function() {
      document.write(this.x); // <-- yields correct output: 10.
      document.write(this.x); // <-- outputs "undefined"
      document.write(this.x); // <-- outputs "undefined"
   }
</script>

我无法理解为什么 [this.x] 从第二次开始就导致未定义。如果我是正确的，函数上下文(“this”的值)将引用全局窗口对象。

Answer 1

当您在文档加载后使用 document.write() 时，它会打开一个新文档(清除前一个文档)。看来在某些浏览器(例如 IE)中，全局变量会立即被清除，即使是从仍在运行的执行 document.write() 的脚本中也是如此。这里最好的答案是在页面加载后不要使用 document.write() 。相反，使用 DOM 操作来更改现有文档，而不是创建新文档。您可以看到，如果您使用 DOM 操作(操作innerHTML)而不是在 this jsFiddle 中使用 document.write() ，一切都会正常工作(基于您最近的代码示例)。 .

由于清除当前文档几乎从来都不是您想要做的事情，因此如果您能够解释您真正想要完成的任务，我们可以帮助您更好地提供解决方案。

如果您想在加载后修改现有文档，则需要使用DOM操作函数，例如.innerHTML(更改节点的HTML)或 DOM 操作函数向现有文档添加新节点，而不是 document.write()。

通常不应使用 this 来引用全局变量。全局变量可以不带前缀(除非在本地覆盖)，也可以使用 window 前缀。

所以，其中任何一个都可以:

<script type="text/javascript">
   var x = 10;
   window.onload = function() {
      console.log(x);
      console.log(x);
      console.log(x);
   }
</script>

<script type="text/javascript">
   var x = 10;
   window.onload = function() {
      console.log(window.x);
      console.log(window.x);
      console.log(window.x);
   }
</script>

关于使用this的问题。 this 的值可以通过以下几种方式之一设置:

1. 当您调用对象上的方法(例如 pleasures.makeIceCream())时，this 的值将设置为 pleasures makeIceCream() 方法中的对象。
2. 当您在 makeIceCream.call(pleasures) 等函数对象上使用 call 方法时，this 的值将设置为makeIceCream() 方法调用中的 pleasures 对象。
3. 当您在 makeIceCream.apply(pleasures) 等函数对象上使用 apply 方法时，this 的值将设置为makeIceCream() 方法调用中的 pleasures 对象。

您可以在这些 MDN 引用文献中阅读有关 .call() 和 .apply() 的更多信息:

申请:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply

调用:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call

在所有其他情况下，通常不应使用 this 的值，因为尚未显式设置它。它可能设置为全局对象(在浏览器中，这是 window 对象)，但使用它来访问全局变量并不被认为是最佳实践，也没有任何理由这样做。