Question

我正在学习JS课程并遇到了一个问题。当我失去这个上下文时，我无法弄清楚如何自我引用我的类变量（在构造函数中设置），比如在Promise之后。

例如：

class myClass{
    constructor(name) {
        this.name = name;
        doSomething().then(doSomethingElse)
    }

    doSomething(){
        return new Promise((resolve, reject)=>{
            resolve("myAsyncName")
        })
    }

    doSomethingElse(value){
        this.name = value;
    }
}

在doSomethingElse函数中，我会收到一个错误，即未定义或无法在其上设置名称。我已经尝试在构造函数中使用设置self = this，但是如果我多次使用该类，则会中断。我只需要能够引用我的构造函数中设置的变量。我已经尝试过搜索很多帖子并阅读大量关于如何使用它和绑定的文章，但我找不到我需要在这种情况下使用的模式。

Answer 1

这是由于调用doSomethingElse的上下文。在您的示例中，this中使用的doSomethingElse将引用then的上下文，而非您的类。

有几种方法可以解决这个问题：

<强> 1。始终将方法绑定到类本身。

constructor(name) {
  this.name = name;

  // binding the `this` context
  this.doSomethingElse = this.doSomethingElse.bind(this);
  // the this in doSomethingElse will always refer the class now
  doSomething().then(doSomethingElse)
}

doSomethingElse() {

<强> 2。使用词汇绑定其上下文的ES6胖箭头

constructor(name) {
  this.name = name;
  doSomething().then(() => this.doSomethingElse())
}

第3。使用transform-class-properties babel（针对高级用户）

现在这个还不是官方ecmascript规范的一部分，所以我不鼓励使用它。我将假设您使用babel，或者在某些时候使用class myClass{ constructor(name) { this.name = name; // no need to change anything here doSomething().then(doSomethingElse) } doSomething(){ return new Promise((resolve, reject)=>{ resolve("myAsyncName") }) } // notice the fat arrow syntax here. `this` will always be // referencing myClass doSomethingElse = (value) => { this.name = value; } }。如果没有，那就完全可以了！

使用此插件，您应该可以编写如下内容：

init

我强烈推荐阅读Kyle Simpson的你不了解JS：这个＆amp;关于这个主题的对象原型。

祝你的旅程学习Javascript好运！

Answer 2

您需要bind doSomethingElse函数this

即

this.doSomething().then(this.doSomethingElse.bind(this))

或者，您可以在.then

中使用箭头功能

即

this.doSomething().then(value => this.doSomethingElse(value));

自我引用类

2 个答案: