javascript - 为什么在Chrome控制台和sublime中结果不一样？这个在JS中

Question

我正在学习 this 标识符，并且我知道当没有在对象上调用函数时， this 指的是非严格模式下的窗口对象。因此，我希望 this.bar 记录“无论如何”。

“whatever”是我在 Chrome console.it 中运行代码时的输出，但是当我使用 sublime 中的节点构建系统运行代码时，输​​出未定义。

为什么会这样呢？ 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

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

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

我在下面添加了几个有关范围的示例，只是为了使其更清晰一些。在控制台中进行操作是发现此类内容的好方法。

示例 1: 如您所见，调用 test() 创建了一个全局范围的 x 变量，并且发现 this 引用了 窗口变量。

示例 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);
}