箭头用作对象方法 - 这是未定义的而不是Window

Question

我有一个问题需要理解Arrow函数中的 this 。

我读了很多答案，例如：Methods in ES6 objects: using arrow functions 并在此说明中进行了解释Link github并且每个人都说这个应该绑定到Window，但是当我查看这些示例时，我看到未定义，如果有人知道为什么？

 var foo = {
     bar: () => console.log(this)  // lexical this is window or something else
 }
 foo.bar()

我正在使用babel来传输代码：

var foo = {
        bar: function bar() {
            return console.log(undefined);
        }
}

babel版本是：

• ＆＃34; babel-core＆＃34;：＆＃34; ^ 6.21.0＆＃34;，
• ＆＃34; babel-loader＆＃34;：＆＃34; ^ 6.2.10＆＃34;，
• ＆＃34; babel-preset-es2015＆＃34;：＆＃34; ^ 6.18.0＆＃34;，
• ＆＃34; babel-preset-stage-2＆＃34;：＆＃34; ^ 6.18.0＆＃34;，

但词汇这不是Window唯一未定义的，为什么？

Answer 1

您似乎正在使用带有ES风格模块的webpack。模块内的代码没有对全局范围的隐式访问。也就是说，模块内的this不受任何约束。 Webpack显然用this替换全局undefined引用，这样即使环境定义了任何全局上下文也不会泄漏。

如果您尝试在浏览器控制台中执行console.log("this: " + (() => this)())，您会看到this确实是window。

Answer 2

好吧，窗口不是javascript标准的一部分。由于babel不知道脚本运行的上下文，因此只使用undefined。

例如，在nodejs中，全局范围为global 当您在浏览器中执行代码时，window通常是全局范围。