約束を使っているときにクラスメソッドの中で 'this'が定義されていないのはなぜですか？

Question

私はjavascriptクラスを持っており、各メソッドはQという約束を返します。私はなぜthisがmethod2とmethod3に未定義であるか知りたいと思っています。このコードを書く正しい方法はありますか？

function MyClass(opts){ 
    this.options = opts; 

    return this.method1() 
    .then(this.method2) 
    .then(this.method3); 
} 

MyClass.prototype.method1 = function(){ 
    // ...q stuff... 

    console.log(this.options); // logs "opts" object 

    return deferred.promise; 
}; 

MyClass.prototype.method2 = function(method1resolve){ 
    // ...q stuff... 

    console.log(this); // logs undefined 

    return deferred.promise; 
}; 

MyClass.prototype.method3 = function(method2resolve){ 
    // ...q stuff... 

    console.log(this); // logs undefined 

    return deferred.promise; 
}; 

私はbindを使用することで、この問題を解決することができます

function MyClass(opts){ 
    this.options = opts; 

    return this.method1() 
    .then(this.method2.bind(this)) 
    .then(this.method3.bind(this)); 
} 

しかしbindが必要な理由全くわからないが。 .then()が殺しますthis？

Answer 1

thisは常にメソッドが呼び出されるオブジェクトです。しかし、メソッドをthen()に渡すと、あなたはそれを呼び出すことはありません！メソッドはどこかに保存され、後でそこから呼び出されます。

.then(() => this.method2()) 

またはあなたはそれを事前ES6の方法をしなければならない場合は、あなたが前にthisを維持する必要があります：

var that = this; 
// ... 
.then(function() { that.method2() }) 

Answer 2

一方向性関数がコンテキストを取得する（this）のは、呼び出されたオブジェクトからのものです（method1が正しいコンテキストを持っています - これはthisで呼び出されます）。関数自体への参照をthenに渡しています。あなたはthenの実装は次のようになりますことを想像することができます

function then(callback) { 

    // assume 'value' is the recently-fulfilled promise value 
    callback(value); 
} 

その例でcallbackは、あなたの関数への参照です。文脈はありません。既に指摘したように、関数を渡す前に、その関数をコンテキストにバインドすることで回避することができます。

Answer 3

あなたがthisを保存したい場合は、このようにそれを行う必要がありますプロミスハンドラは、デフォルトでグローバルオブジェクト（window）のコンテキストで呼び出されます。厳密モード（use strict;）の場合、コンテキストはundefinedです。これはmethod2とmethod3に起こります。

;(function(){ 
    'use strict' 
    Promise.resolve('foo').then(function(){console.log(this)}); // undefined 
}()); 

;(function(){ 
    Promise.resolve('foo').then(function(){console.log(this)}); // window 
}()); 

method1について、あなたはthis.method1()としてmethod1を呼んでいます。これを呼び出すこの方法は、インスタンスであるthisオブジェクトのコンテキストで呼び出します。そのため、method1内のコンテキストがインスタンスになります。

Answer 4

基本的には、コンテキスト参照なしの関数参照を渡しています。

1. 暗黙のうちに、thisのコンテキストが決定されます。グローバル関数またはバインディングなしの関数を呼び出すと、グローバルコンテキストとみなされます。*
2. 直接参照による。 myObj.f()に電話するとmyObjはthisとなります。**
3. 手動バインドこれは、.bindと.applyのような関数のクラスです。これらは、コンテキストが何であるかを明示的に示します。これらは常に前の2つよりも優先されます。あなたの例では

それの呼び出しで、グローバル関数や文脈ないものであることを暗示していますので、あなたは、関数参照を渡しています。 .bindを使用すると、thisが明示的に設定された新しい関数を作成することでこれを解決します。

*これは非完全モードでのみ該当します。厳密モードでは、thisはundefinedに設定されます。

**使用している機能が手動でバインドされていないと仮定します。