javascript - 如何在 .then() 中调用 ES6 Promise 访问类实例？

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 5 年前。

我正在尝试解决 this在 Promise 中，无法弄清楚为什么它不起作用。箭头函数通常可以为我做到这一点，但这比平常更复杂一些。

例如，下面的代码片段会给出以下错误:

TypeError: Cannot read property 'processResponse' of undefined

this在哪里迷路了？

如果下面的代码片段不起作用，请尝试 this codepen .

class Page {
  init() {
    this.datatable = new Datatable();
    this.datatable.setBehavior(this.behaviorFlavor)
  }

  behaviorFlavor() {
    console.log('Doing action...');
    Ajax.get()
      // 'this' is undefined
      .then((data) => { this.processResponse(data) });
  }

  processResponse(data) {
    console.log('Processing response...');
  }
}

class Datatable {
  setBehavior(callback) {
    // Add event listener to rows, etc.
    $('button').click(() => {
      callback();
    });
  }
}

class Ajax {
  static get() {
    return new Promise(function(resolve, reject) {
      console.log("Sending request...");
      resolve();
    })
  }
}

(new Page).init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <button>Click Here!</button>
  <p>Then check your browser's console to see the error.</p>
</div>

Answer 1

通过将 behaviorFlavor 函数引用作为回调传递，this 上下文会丢失。您基本上是从类中提取方法并尝试单独执行它。

尝试以下替代方案之一...

1. 使用箭头函数锁定this上下文

   setBehavior(() => { this.behaviorFlavor() })
   

2. 直接绑定(bind)behaviorFlavor函数

   setBehavior(this.behaviorFlavor.bind(this))