构造函数中的箭头函数和 this答案

【问题标题】：Arrow function and this inside a constructor function构造函数中的箭头函数和 this
【发布时间】：2018-11-05 00:39:46
【问题描述】：

我已经阅读了关于 this 关键字的这一段：https://bonsaiden.github.io/JavaScript-Garden/#function.this

在第一种情况下，this 指的是global 对象，这似乎完全正常，因为当我们有一个箭头函数时，它会自动将this 与外部范围内的那个绑定。

var obj = {
      foo : () => console.log(this)
    }
console.log(obj);
obj.foo()

但是，我无法解释以下行为：

function bar(){
  this.foo = () => console.log(this)
} 

var obj = new bar()
console.log(obj);
obj.foo()

现在，this 指的是obj，而不是global。这是为什么？在我看来，将new 关键字与构造函数一起使用应该返回一个对象obj，它与第一个示例中的对象完全相同。所以箭头函数应该有一个this，它指的是global，而不是obj。请您向我解释一下第二种情况发生了什么？

【问题讨论】：

每当 ES6+ 让我感到困惑时，我都会查看一个转译的 ES6->ES5 版本的代码来理解它babeljs.io/repl

标签： javascript constructor this arrow-functions

【解决方案1】：

函数`->`No separate `this`

直到箭头函数，每个新函数都定义了自己的 this 值（在构造函数的情况下是一个新对象，在 strict mode 函数调用中未定义，如果函数被称为“对象方法”等，则为基础对象。）。事实证明，对于面向对象的编程风格，这并不理想

构造函数 ... 使用指定的参数调用，并将this 绑定到新创建的对象。

bar() 构造函数将this 定义为自身。

【讨论】：

感谢您的回答。不过我不明白的是，既然 foo 是一个函数，那么在执行函数时会评估里面的内容，不是吗？
Lexical Scoping 只是意味着它使用了包含箭头函数的代码中的this。在您的情况下，正在使用 this 的上下文 function/constructor bar(){}
哇，这太有趣了。非常感谢您提供这些信息！

【解决方案2】：

虽然我自己对对象还很不擅长（需要继续努力），但我认为当您使用const test = new Test() 时，您会初始化一个新对象。这样，this 的作用域（？）仅引用新创建的对象，因此您为什么要使用 this.foo 并稍后使用 obj.foo 引用该 foo 属性。另一方面，当您只执行const obj = { .... } 时，实际上并没有初始化新对象，因此this 直接指向全局对象——窗口。因此，const test = new Test 创建了一个 new 对象，而仅使用 const obj = {} 是不是一个新对象，this 默认使用窗口对象。

【讨论】：

函数-&gt;No separate this

函数`->`No separate `this`