JavaScriptのCall、Apply、Bind

2674 ワード

前にJavaScriptでthisが指す問題を簡単に述べましたが、この章では主にcallapplybindの3つの方法を区別します.
まず,call,apply,bindは,いずれもthis指向を再定義するために用いられる.注意:bindメソッドはjQueryメソッドではなくJavascriptメソッドです.JQのbindでは、今日お話しした方法とは大きく異なります.詳しくはJQ関連ドキュメントを参照してください.
次に、2つの小さな例を見てみましょう.
var name = 'cy',age= 17;
var obj ={
  name:'ally',
  objAge:this.age,
  myFun:function(){
    console.log( this.name + "  " + this.age) ;  
  }
}
console.log(obj.objAge); // 17
obj.myFun() ; // ally  undefined

最初のconsolethisWindowsを指す.2番目のconsoleのうちthisは実行関数obj.myFun()を指し、thisobj( this )を指すため、結果は明らかである.
var name="cy";
function show(){
  console.log(this.name)
}
show() ; //cy

グローバル状態における一般関数,thisWindowsを指す.
以上のような造作は、私たちに非常に友好的ではないと感じさせ、JavaScriptもこのような操作が非常に不便だと感じているので、callapplybind方譲があり、好きなようにthisの指向を変えることができます.これらの方法の具体的な違いを見てみましょう
call、apply、bindの対応法の違い
いくつかの小さな例を通して私たちの探求を始めます
例1
var name ='  ' ,age=17;
var obj={
  name:'  ',
  objnAge:this.age,
  myFun:function(){
    console.log(this.name +"  " + this.age);
  }
}
var db={
  name:'dream',
  age:99
}

obj.myFun.call(db);    //dream  99
obj.myFun.apply(db);    //dream  99
obj.myFun.bind(db)();   //dream  99

以上の結果はすべて一致しました!bindメソッドの後ろに括弧を付けただけです.これによりbindは新しい関数を返し、実行されるまで呼び出さなければならないと結論しました.
例2:call、bind、applyパラメータを比較した場合
var name ='  ' ,age=17;
var obj={
  name:'  ',
  objnAge:this.age,
  myFun:function(fm,t){
    console.log(this.name +"  " + this.age +"  " +fm + "  " + t);
  }
}
var db={
  name:'dream',
  age:99
}

obj.myFun.call(db,'  ','  ');     //dream    99           
obj.myFun.apply(db,['  ','  ']);        //dream    99             
obj.myFun.bind(db,'  ','  ')();         //dream    99           
obj.myFun.bind(db,['  ','  '])();   //dream    99       ,    undefined

微妙な差!上記の4つの結果から、call、bind、applyの3つの関数の最初のパラメータはthisの指向対象であり、2番目のパラメータの違いは明らかである:callのパラメータは直接入れられ、2番目のn番目のパラメータはすべてカンマで区切られ、直接後ろのobjに置く.myFun.call(db,'成都',...,'string');applyのすべてのパラメータは1つの配列に入れてobjに渡さなければならない.myFun.apply(db,['成都',...,'string']);bindは関数を返す以外はcallと同じパラメータです.もちろん、3つのパラメータはstringタイプに限定されず、関数、objectなど、さまざまなタイプが許可されています.