JavaScriptのFunction.prototype.bind()の方法を簡単に分析します.

3135 ワード

Function.prototype.bind()方法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()を呼び出してapplythisに設定した新しい関数を作成しました.OKは、今は比較的はっきりしているはずですが、実際のfooの実現は上記のように複雑で、上述のcurry化プロセスなどよりもはるかに複雑です.
参考資料:Javascript権威ガイド