ECMAScript5(ES5)におけるbindメソッドの使い方まとめ_基礎知識

これに関連すること、たとえば電話する、申し込むなどについて、私はいつも漠然としていました。今回バインドに関する筆記試験問題を見かけたので、備忘録としてこの記事を書きました。

Bind は、call や apply と同様に、コンテキストが指す this を変更できます。違いは、apply と同様に call はメソッドを直接参照するのに対し、bind はこれをバインドした後にメソッドを返しますが、内部コアは依然として apply であることです。

例を直接見てみましょう:

コードをコピーします コードは次のとおりです:

var obj = {
a: 1、
b: 2、
getCount: function(c, d) {
this.a this.b c d;
を返します }
};

window.a = window.b = 0;
console.log(obj.getCount(3, 4)); // 10
var func = obj.getCount;
console.log(func(3, 4)); // 7

なぜこのようなことが起こっているのでしょうか?なぜなら、これは func のコンテキストでは window だからです。バインドの存在は、このポインタを変更して目的の値を取得することです:

コードをコピーします コードは次のとおりです:

var obj = {
a: 1、
b: 2、
getCount: function(c, d) {
this.a this.b c d;
を返します }
};

window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10

Bind は function の関数拡張メソッドであり、bind 後に func 内で this ポインタ (obj) を再バインドするコードですが、ie6～8 には互換性がありません。

コードをコピーします コードは次のとおりです:

var obj = {
a: 1、
b: 2、
getCount: function(c, d) {
this.a this.b c d;
を返します }
};

Function.prototype.bind = Function.prototype.bind || 関数(コンテキスト) {
var that = this;
return function() {
// console.log(arguments); // コンソール [3,4] if ie<6-8>
return that.apply(context, argument);

}
}
window.a = window.b = 0;
var func = obj.getCount.bind(obj);
console.log(func(3, 4)); // 10

実際、私の意見では、bind の核心は、apply または call を直接使用した場合に、未実行のメソッドを返すことです。

コードをコピー コードは次のとおりです:

var ans = obj.getCount.apply(obj, [3, 4]);
console.log(ans); // 10

短縮された func 関数コンストラクターを使用することは不可能なので、bind を使用してこのポインターを渡し、未実行のメソッドを返します。この実装は非常に巧妙です。