【Javascript】call, apply, bindの違いを図解で解説する

はじめに

Javascriptの勉強をしている中で、call,apply,bindの違いについて学びがあったので、図解を交えてご紹介できればと思います。

call, apply, bindの違い

全体観

call, apply, bindの違いの全体観は下記の通りです。
具体的な内容はソースコードの欄にて補足します。

ソースコード

call, apply, bindともに第一引数にはthisにあたるオブジェクトが入り、第二引数以降には関数のパラメータ分が入ります。それぞれ下記のような特徴があります。

• call：引数をそのまま設定する
• apply：関数のパラメータ部分を配列化して設定する
• bind：引数を一部固定して変数化したのち、残りの引数を設定する

const obj = { num: 1 }
const addCalc = function(num1, num2) {
  return this.num + num1 + num2;
}

// callメソッド
addCalc.call(obj, 2, 3); // 「6」が出力

// applyメソッド
addCalc.apply(obj, [2, 3]); // 「6」が出力

// bindメソッド
const calcBind = addCalc.bind(obj);
console.log(calcBind(2,3)); // 「6」が出力

皆さんのお役に立てれば幸いです！