Javascript/Typescript 闭包问题 - 将对象的函数作为变量返回

Question

在阅读了网络上的大量示例后，我仍然对 JavaScript/TypeScript 闭包感到很困惑。

这是我遇到问题的代码：

let obj = {
  message: '222',  
  printMessage: function() {
    return this.message
  },
}

console.log(obj.printMessage()); // 222
let func = obj.printMessage;
console.log(func());             // undefined

当我运行此代码时，出现错误 Cannot read property 'message' of undefined。

我知道我可以直接运行 obj.printMessage()，但这不是我想做的。我希望能够 return printMessage 函数作为变量并最终被另一个函数调用。

感觉是闭包的问题，不知道怎么处理。

非常感谢您的意见。

===========================================

更新：

在修改代码一段时间后，我找到了问题的解决方案。

这是我的解决方案。

let obj = {
  message: '222',  
  printMessage: function() {
    return this.message
  },
  getPrintMessage: function () {
      return () => this.printMessage()
  }
}

console.log(obj.printMessage()); // 222
let func = obj.getPrintMessage();
console.log(func());

我创建了另一个函数 return 调用 this.printMessage() 的匿名函数。这样我就可以从对象外部访问函数。

感谢大家的意见。

Answer 1

欢迎来到 JS 中 this 关键字的奇迹。

this 的值取决于函数的调用方式（运行时绑定）。在您的示例中，this 是一个没有引用的对象上的方法。

您可以使用 call 或 bind 方法来绑定 this 值，或者在这种情况下也可以利用 getter 和 setter。

let obj = {
  message: '222',
  get mess() {
    return this.message
  }
}

const currentMessage = obj.mess

// Both return the same thing

currentMessage
obj.mess

Javascript/Typescript 闭包问题 - 将对象的函数作为变量返回

Javascript/Typescript Closure Problem - Returning an object's function as a variable

javascript

closures

typescript