为什么 Chrome console 和 sublime 的结果不一样？这在 JS

Question

我正在学习 this 标识符，我知道当一个函数没有在对象上调用时，this 在非严格模式下引用 window 对象。结果，我希望 this.bar 记录 "whatever."

"whatever" 是当我运行我的代码在 Chrome console.it 时的输出，但是当我运行我的代码使用崇高的节点构建系统。

为什么会这样？ Chrome 控制台中的结果是否正确？我还能在什么时候遇到这样的问题？

这是我的代码

function foo() {
    // console.log(this)
    console.log( this.bar );
}

var bar = "whatever";


// --------

foo();              // OUTPUT is "whatever" in the Chrome console and OUTPUT is undefined in Sublime's Node build system.

Answer 1

当你像这样在节点中声明变量时 var bar = 'something' 你声明它不是全局的，而是模块范围的。您应该使用 global 对象来声明全局变量。像这样：

global.bar = 'something';

Answer 2

我不是 100% 确定，但我假设它与 Window 对象有关。您定义的函数属于全局 Window 对象。也许节点构建系统没有这个全局对象。

Answer 3

当您在函数中使用 this 而不指定不同的上下文时，它指的是全局对象。在 Chrome 中，这将是 window 对象。在 Node 中，这称为 global。当我说指定不同的上下文时，例如，使用 new 作为构造函数，或者使用 call 和 apply 函数来绑定特定的 this.

主要区别在于，当您在 Node 中使用 var bar = "whatever"; 时，var 的使用是将变量的范围限定到您正在编写的模块，而不是整个 Node 进程。在 Chrome 中，您将其范围限定为全局 window 对象。这与完全省略 var 相同。

我在下面添加了几个关于范围的例子，只是为了让它更清楚一点。在控制台中玩耍是发现此类事物的好方法。

示例 1： 可以看到，调用test()创建了一个全局范围的x变量，发现this引用了window变量

示例 2： 在这个例子中，我们构造了一个新实例，它创建了一个新的作用域。 x 变量不是全局范围的。访问它的唯一方法是使用 myInstance 上下文。

对于您的问题，您有两种选择：

选项 1（推荐）： 由于 bar 不是全局范围的，您不想使用 this

访问全局变量

var bar = "whatever";

function foo() {
    console.log(bar);
}

选项 2（不推荐）： 这会将变量设置为在全局范围内，因此您可以使用 this 或 global

global.bar = "whatever";

function foo() {
    console.log(this.bar); // console.log(global.bar);
}

为什么 Chrome console 和 sublime 的结果不一样？这在 JS

Why is the result different in the Chrome console and sublime? This in JS

javascript

this

google-chrome-devtools

sublimetext

ecmascript-5