Javascriptの関数バインドメソッドの使い方を詳しく解説

Function.prototype.bind()

bind メソッドは、関数内 (実行されるスコープ) の this ポインターを指定し、新しい関数を返します。バインド メソッドは関数をすぐには実行しません。

var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 keith.count(); //1
 keith.count(); //2
 keith.count(); //3

上記のコードで、this.aがkeithオブジェクト内のaプロパティを指しており、このメソッドが別の変数に代入されている場合、呼び出し時にエラーが発生します。

 var keith = {
 a: 1,
 count: function() {
 console.log(this.a++);
 }
 };
 var f = keith.count;
 f(); //NaN

上記のコードで、count メソッドが f 変数に割り当てられている場合、this オブジェクトは keith オブジェクトを指すのではなく、window オブジェクトを指すようになります。そして、window.a は、インクリメント操作の後、デフォルトで unfine に等しくなります。

この問題を解決するには、bind メソッドを使用して keith オブジェクト内の this を keith オブジェクトにバインドするか、直接呼び出すことができます。

 var f = keith.count.bind(keith);
 f(); //1
 f(); //2
 f(); //3
 keith.count.bind(keith)() //1
 keith.count.bind(keith)() //2
 keith.count.bind(keith)() //3

もちろん、これを他のオブジェクトにバインドすることもできます。

 var obj = {
 a: 100
 };
 var f = keith.count.bind(obj);
 f(); //100
 f(); //101
 f(); //102

同様に、最初のパラメータが null または未定義である場合、または this の場合、2 番目のパラメータはグローバル環境を指します。 call、パラメータの受け渡し形式はcallメソッドと同じです。

 function keith(a, b) {
 return a + b;
 }
 console.log(keith.apply(null,[1,4])); //5
 console.log(keith.call(null,1,4)); //5
 console.log(keith.bind(null, 1, 4)); //keith()
 console.log(keith.bind(null, 1, 4)()); //5

上記のコードでは、call、apply、bind の違いがわかります。 call メソッドと apply メソッドは、呼び出された直後に実行されます。バインド呼び出しの後は、元の関数に戻り、再度呼び出す必要があります。これはクロージャに似ています

以上がJavascriptの関数バインドメソッドの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。