javascript - 为什么速记函数与类一起使用会导致 "this"未定义？

Question

jdfiddle: https://jsfiddle.net/2khtof8s/1/

class TestClass {
    doSomething(){
        return Promise.resolve(this.someFunction('hello'))
    }

    someFunction( testVar ){
        return testVar;
    }
}

let instance = new TestClass();

// throws error
Promise.resolve()
    .then(instance.doSomething)
    .then(console.log)
    .catch(console.error);

// works
Promise.resolve()
    .then(() => instance.doSomething())
    .then(console.log);

// works
Promise.resolve()
    .then(function(){return instance.doSomething()})
    .then(console.log);

// works
function someFunc(){
    return instance.doSomething();
}

Promise.resolve()
    .then(someFunc)
    .then(console.log);

第一个 Promise.resolve 链错误 Uncaught (in promise) TypeError: Cannot read property 'someFunction' of undefined - 我们似乎无法理解为什么，有没有人有任何洞察力这种行为？据我们所知，似乎应该没有区别

Answer 1

当您传递对实例函数的引用时，上下文会丢失。

instance.doSomething // just a reference

只是一个没有上下文的引用。为了完成您想要做的事情，您需要将上下文绑定(bind)到引用:

instance.doSomething.bind(instance)

---

这样想可能会有所帮助:

当你引用 instance.doSomething 时，可以把它想象成在说，“我是 instance，这就是 doSomething 的样子，以及如果你调用我，我会使用什么。”

区别在于引用与调用。

引用:

instance.doSomething

调用:(维护上下文):

instance.doSomething();

class TestClass {
  doSomething() {
    return Promise.resolve(this.someFunction('hello'))
  }

  someFunction(testVar) {
    return testVar;
  }
}

let instance = new TestClass();

// No longer throws error
Promise.resolve()
  .then(instance.doSomething.bind(instance))
  .then(console.log)
  .catch(console.error);