なぜクラスでの短縮形関数の使用が "this"を未定義にするのでしょうか？

Question

jdfiddle：https://jsfiddle.net/2khtof8s/1/Uncaught (in promise) TypeError: Cannot read property 'someFunction' of undefinedと

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チェーンエラーを - 私たちは、誰もがこの動作に任意の​​洞察力を持っていない理由を理解していないようですか？私たちが知る限り、相違はないはずです。

Answer 1

インスタンスの関数への参照を渡すと、コンテキストが失われます。

instance.doSomething // just a reference 

は、文脈のない単なる参考情報です。あなたが参照

：

instance.doSomething.bind(instance) 

---

これはそれをこの方法を考えるのに役立つかもしれない：あなたがやろうとしている何をするためには、bindへの参照にコンテキストを必要としますinstance.doSomethingと言いますと、「私はinstanceです。これはdoSomethingのようなものです。あなたが私を呼び出すと、私は何を使用しますか？」

差はreferencingとcallingです。

参考：（コンテキストを維持）：

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);

Answer 2

これは、以下のサンプルは、エラーがスローされます、同じ理由で動作しません呼び出す

instance.doSomething 

。 オブジェクトのプロパティである関数を別の変数に割り当てると、そのコンテキストが失われます。

class Test { 
 
    constructor() { 
 
    this.foo = 'bar'; 
 
    } 
 
    
 
    print() { 
 
    console.log(this.foo); 
 
    } 
 
} 
 

 
const test = new Test(); 
 

 
test.print();  // "bar" 
 

 
const standalonePrint = test.print; 
 
standalonePrint(); // throws

手動で関数のコンテキスト結合によってこの問題を解決することができますの

class Test { 
 
    constructor() { 
 
    this.foo = 'bar'; 
 
    } 
 

 
    print() { 
 
    console.log(this.foo); 
 
    } 
 
} 
 

 
const test = new Test(); 
 

 
const standalonePrint = test.print; 
 
const boundPrint = standalonePrint.bind(test); 
 
boundPrint(); // "bar"