JavaScriptのFunction.prototype.bind()の方法を簡単に分析します.
3135 ワード
Function.prototype.bind()方法
例えば、
簡単な使用状況一
もう一つの例を見ます.
これは、
実際には、この例
bind()の背後にある簡単な原理
ビッド関数の背後には何がありますか?以下のコードでシミュレーションできます.
参考資料:Javascript権威ガイド
bind()
方法の主な役割は、関数をあるオブジェクトに結びつけることであり、bind()
方法は、関数内のthisオブジェクトの値が着信bind()
関数の値に結び付けられる関数を作成する.例えば、
f()
の関数でbind()
方法を呼び出し、obj
に入る.これは新しい関数に戻ります.新しい関数は元の関数f.bind(obj)
をf()
の方法として呼び出します.obj
のように、f関数のobj.f()
のオブジェクトが指すのはthis
です.簡単な使用状況一
var o={
f: function () {
var self=this;
var fff=function() {
console.log(self.value); // this global/window, self o
};
fff();
},
value: "Hello World!"
};
o.f(); // Hello World!
上記の例は、obj
のコンテキストを維持する方法を一般的に使用し、this
を中間変数this
に与え、内部ネストの関数でself
を使用してオブジェクトself
にアクセスすることができます.そうでなければ、o
を依然として使用します.内部ネスト関数のthisは、この時点で大域作用領域を指します.最後の出力はthis.value
です.コードは以下の通りですvar o={
f: function () {
var self=this;
var fff=function() {
console.log(this.value);
};
fff();
},
value: "Hello World!"
};
o.f(); // undefined
しかし、undefined
関数を使用して、bind()
の関数をオブジェクトfff
に結びつけると、o
の関数の内部にあるfff()
のオブジェクトがオブジェクトthis
にバインディングされ、o
が存在する場合に遭遇することができる.コードは以下の通りですvar o={
f: function () {
var self=this;
var fff=function() {
console.log(this.value); // bind(this) this o, bind(o)
}.bind(this);
fff();
},
value: "Hello World!"
};
o.f(); // Hello World!
より一般的な使用状況もう一つの例を見ます.
function f(y,z){
return this.x+y+z;
}
var m=f.bind({x:1},2);
console.log(m(3)); // 6
最後に出力しますこれは、
this.value
方法が、f関数の体内に導入された最初の実証をbind()
に結びつけ、第二の実施例から、これに従って原始関数に渡すので、this
は{x:1}
に渡され、this
は、モジュレータ2
に伝達され、y
が呼び出したときのm(3)
は、モジュレータ3
に渡されるからである.実際には、この例
z
関数は、部分パラメータを処理することができ、ステップ分割計算(f()
)は、パラメータbind()
とパラメータx
とを処理し、y
を呼び出したときにパラメータm(3)
を処理したプロセスは、典型的なCurryプロセスである.bind()の背後にある簡単な原理
ビッド関数の背後には何がありますか?以下のコードでシミュレーションできます.
Function.prototype.testBind = function (scope) {
var fn = this; // this testBind
return function () {
return fn.apply(scope, arguments);
}
};
以下はテストの例です.var foo = {x: "Foo "};
var bar = function (str) {
console.log(this.x+(arguments.length===0?'':str));
};
bar(); // undefined
var testBindBar = bar.testBind(foo); // foo
testBindBar("Bar!"); // Foo Bar!
z
を呼び出した後、testBind()
を呼び出してapply
をthis
に設定した新しい関数を作成しました.OKは、今は比較的はっきりしているはずですが、実際のfoo
の実現は上記のように複雑で、上述のcurry化プロセスなどよりもはるかに複雑です.参考資料:Javascript権威ガイド