本記事ではJavaScriptのbind()とcall()とapply()の使い方と違いについて解説しています。
少し小難しい箇所のため、敬遠しているエンジニアの方も多いのではないでしょうか？ぜひこの記事を参考に苦手意識を払拭してください。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
bind()の使い方
thisを制御する
bind()の1つ目の使い方は、thisを制御することができます。下記のサンプルコードを例に解説していきます。
window.name = "カレー";
const foodObj = {
name: "寿司",
say: function () {
console.log(`私の好きな食べ物は${this.name}です！`);
},
};
foodObj.say(); // -> 私の好きな食べ物は寿司です！foodObj.say()で関数を呼び出しているため、関数で使用されているthisはfoodObj内にあるnameプロパティの値を参照していることが分かります。
const foodFn = foodObj.say;
foodFn(); // -> 私の好きな食べ物はカレーです！しかし、foodObj.say()を一度変数に代入してから関数を呼び出すとthisはfoodObjではなくグローバルオブジェクトのnameプロパティを参照してしまいます。
これは、呼び出し元のオブジェクトがfoodObjから切り替わったためです。
このような場合にbind()を使うことで、thisの呼び出し元のオブジェクトを制御することができます。
const foodFn = foodObj.say.bind(foodObj);
foodFn(); // -> 私の好きな食べ物は寿司です！bind()の使い方はとても簡単で引数にthisを使った時に参照させたいオブジェクトを指定するだけです。
引数の制御
bind()の2つ目の使い方は、引数の制御をすることができます。簡単に言うと引数を固定化することができるという認識で問題ないです。
bind()の第一引数にthisを制御させたい場合は、参照させたいオブジェクトを指定し特にない場合はnullを指定します。第二引数以降に引数をとして渡したい値を指定します。
function plus(num1, num2, num3) {
console.log(num1 + num2 + num3);
}
const valFixed = plus.bind(null, 10); // -> 第一引数の値に10を渡す
valFixed(40, 50); // -> 100bind()とcall()とapply()の違い
実はbind()とcall()とapply()は基本的な使い方が同じです。ただ「実行タイミング」「第二引数以降で指定する値」が異なります。
bind()はthisの制御や引数を固定化するメソッドのため、処理を実行させるには別途処理を記述する必要がありましたが、call()とapply()はthisの制御や引数の固定化に加え処理も実行させることができます。
もう一つの第二引数の違いでは、bind()とcall()は使い方が同じですが、apply()の場合第二引数に指定する値は配列である必要があります。
function plus(num1, num2, num3) {
console.log(num1 + num2 + num3);
}
plus.call(null, 10, 20, 30); // -> 60
plus.apply(null, [10, 20, 30]); // -> 60
