为什么在构造函数中的 function 中未定义“this”的值？

Question

出于练习目的，我正在尝试在 Node.js 中实现我自己的承诺版本。 我得到了我不明白的结果。 我创建了以下代码来显示我的问题所在。

class Person {
  constructor(name) {
    this.name = name

    // console.log(this)

    function sayName() {
      console.log(this.name)
    }

    sayName()
  }
}

const joe = new Person('Joe')

我收到错误消息'TypeError: Cannot read property 'name' of undefined' 。 当我调用构造函数时，“this”的值是新创建的 object，因此如果我取消注释注释行，我将在该行注销正在创建的 object。

当我调用 sayName function 时，我希望“this”的值是全局 object。在我看到的大多数情况下，可以安全地假设当您开始定义新的 function 时，“this”的值是全局 object。但这里它是“未定义的”，因此我收到错误消息。

如果我在不使用 class 关键字的情况下执行相同的操作，并将 sayName function 放入构造函数，它会按预期运行，并记录“未定义”，因为全局 object 上没有定义名称属性。

function Person(name) {
  this.name = name

  function sayName() {
    console.log(this.name)
  }

  sayName()
}

const joe = new Person('Joe')

我知道当您使用 class 关键字时会触发一些安全机制。 我最好的猜测是这两个例子之间的区别是其中一个在我不知情的情况下被触发了。

请告诉我是什么导致了差异，为什么第一个示例中“this”的值未定义！ 谢谢

Answer 1

看起来 function 声明function() {}在构造函数中定义时会丢失this上下文。 我想这与constructor在幕后的实现方式有关。 您可以将其添加回来

sayName = sayName.bind(this);
sayName();

或者更好的方法是不在构造函数中定义函数并将其定义为 class 方法：

sayName() {
  return this.name;
}