JavaScriptのCall、Apply、Bind
2674 ワード
前にJavaScriptでthisが指す問題を簡単に述べましたが、この章では主に
まず,
次に、2つの小さな例を見てみましょう.
最初の
グローバル状態における一般関数,
以上のような造作は、私たちに非常に友好的ではないと感じさせ、
call、apply、bindの対応法の違い
いくつかの小さな例を通して私たちの探求を始めます
例1
以上の結果はすべて一致しました!bindメソッドの後ろに括弧を付けただけです.これによりbindは新しい関数を返し、実行されるまで呼び出さなければならないと結論しました.
例2:call、bind、applyパラメータを比較した場合
微妙な差!上記の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など、さまざまなタイプが許可されています.
call
、apply
とbind
の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
最初の
console
中this
はWindows
を指す.2番目のconsole
のうちthis
は実行関数obj.myFun()
を指し、this
はobj( this )
を指すため、結果は明らかである.var name="cy";
function show(){
console.log(this.name)
}
show() ; //cy
グローバル状態における一般関数,
this
はWindows
を指す.以上のような造作は、私たちに非常に友好的ではないと感じさせ、
JavaScrip
tもこのような操作が非常に不便だと感じているので、call
、apply
、bind
方譲があり、好きなように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など、さまざまなタイプが許可されています.