call、appy、bindの3つの使い方と違い

1.コール
call、appy、bindはいずれもthisの方向を変える方法です.

fn.call

現在の例(関数fn)は、プロトタイプチェーンのルックアップメカニズムにより、function.prototype上のcall方法を発見し、function call(){[native code]}

fn.call()

発見されたcall方法を実行し、call方法を実行すると、内部処理が行われます.まず、動作する関数のうちのthisキーワードをcall方法の最初の転送の実参加2に変更します.call方法の第二及びその後の実パラメータを3に取得します.操作する関数を実行します.そして、二つ目以降に渡された参加者を関数に伝達します.

fn.call([this],[param]...)

コールの詳細

非厳格モード

パラメータを渡さない場合、または最初のパラメータがnullまたはnudefinedであり、thisはwindowを指す.

    let fn = function(a,b){
        console.log(this,a,b);
    }
    let obj = {name:"obj"};
    fn.call(obj,1,2);    // this:obj    a:1         b:2
    fn.call(1,2);        // this:1      a:2         b:undefined
    fn.call();           // this:window a:undefined b:undefined
    fn.call(null);       // this=window a=undefined b=undefined
    fn.call(undefined);  // this=window a=undefined b=undefined

厳格モード

最初のパラメータは誰ですか?thisは誰を指しますか?nullとundefinedを含めて、パラメータを伝えないとundefinedです.

    "use strict"
    let fn = function(a,b){
        console.log(this,a,b);
    }
    let obj = {name:"obj"};
    fn.call(obj,1,2);   // this:obj        a:1          b:2
    fn.call(1,2);       // this:1          a:2          b=undefined
    fn.call();          // this:undefined  a:undefined  b:undefined
    fn.call(null);      // this:null       a:undefined  b:undefined
    fn.call(undefined); // this:undefined  a:undefined  b:undefined

2.appy

apply:callとほぼ同じで、唯一の違いは伝え方

です.
applyはfnに渡す必要があるパラメータを一つの配列(またはクラス配列)に入れて伝達します.書いたのは配列ですが、fnに一つずつ渡すのにも相当します.

fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);

3.ビン

bind:文法はcallと同じで、すぐ実行するかそれとも実行するかに違いがあります.bindは互換性がありません.IE 6~8

.

fn.call(obj, 1, 2); //   fn  this，   fn    
fn.bind(obj, 1, 2); //   fn  this，fn    

thisはobjに変更されましたが、バインディングすると直ちに実行されます.クリックイベントをトリガすると、fnの戻り値undefinedが実行されます.

document.onclick = fn.call(obj);

bindはfn中のthisをobjとして前処理します.fnは実行していません.クリックした時にfnを実行します.

document.onclick = fn.bind(obj);