JavaScript

【JavaScript】thisを制御するbind、call、applyの使い方と違いについて

本記事ではJavaScriptのbind()とcall()とapply()の使い方と違いについて解説しています。

少し小難しい箇所のため、敬遠しているエンジニアの方も多いのではないでしょうか?ぜひこの記事を参考に苦手意識を払拭してください。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

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を使った時に参照させたいオブジェクトを指定するだけです。

【JavaScript】thisの使い方をマスターしよう!本記事では、JavaScriptの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); // -> 100

bind()と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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村