【解説】JavaScriptのcall／apply／bindの使い方
JavaScriptのapply／call／bindの使い方を順に解説していきます。
・call()
・apply()
・bind()
call()はthisや引数の参照先を変更しつつ、関数を即時実行するのが特徴です。
第一引数に参照先オブジェクト名、第二引数以降に関数の引数をいれます。
関数名.call(参照オブジェクト, 引数, 引数);使い方の例がこちら↓
function testFun(a, b) {
console.log('私の名前は' + this.name); //私の名前は田中
console.log(a, b); //10 20
}
const testObj = {
name: '田中',
}
testFun.call(testObj, 10, 20);testFun関数のthisの参照先が、testObjのオブジェクトになっているのがわかりますね。
apply()はthisや引数の参照先を変更しつつ、関数を即時実行するのが特徴です。
ほぼcall()と同じに見えますが、引数の渡し方が配列になるのが異なる点。
関数名.apply(参照オブジェクト, [引数, 引数]);使い方の例がこちら↓
function testFun(a, b) {
console.log('私の名前は' + this.name); //私の名前は田中
console.log(a, b); //10 20
}
const testObj = {
name: '田中',
}
testFun.apply(testObj, [10, 20]);引数の渡し方が異なるだけで、ほぼcallと同じですね。
bind()はthisや引数の参照先を固定しつつ、新しい関数を作成するのが特徴です。
call()やapply()と違い、即時関数が実行されません。
関数名.bind(参照オブジェクト, 引数, 引数);
//返り値が関数オブジェクト
const 変数名 = 関数名.bind(参照オブジェクト, 引数, 引数);
変数名();新しく作った関数が返り値になります。
使い方の例がこちら↓
function testFun(a, b) {
console.log('私の名前は' + this.name); //私の名前は田中
console.log(a, b); //10 20
}
const testObj = {
name: '田中',
}
const bindFun = testFun.bind(testObj, 10, 20);
bindFun();ちなみにbind()は参照先を固定します。
そのためその後にcallを使っても、thisの値は固定されているため変更されません。
const bindFun = testFun.bind(testObj, 10, 20);
bindFun();
// 私の名前は田中
//10 20
bindFun.call({name: '山田'}, 5, 15);
// 私の名前は田中
//10 20【解説】JavaScriptのcall／apply／bindの使い方：まとめ
- call()⇒this,引数の参照先を変更。即時関数を実行
- apply()⇒this,引数の参照先を変更。引数は配列で渡す。即時関数を実行
- bind()⇒this,引数の参照先を固定。新しい関数を作る。
ジト
call／apply／bindを使う時はためしてみてね！
