时间戳

首页 > 解决方案 > 为什么在构造函数内的函数中未定义“this”的值？

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

问题描述

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

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' 的值是新创建的对象，所以如果我取消注释行，我会在该行注销正在创建的对象。

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

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

function Person(name) {
  this.name = name

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

  sayName()
}

const joe = new Person('Joe')

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

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

标签： javascriptclassconstructorthis

解决方案

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

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

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

sayName() {
  return this.name;
}

推荐阅读