# JavaScriptのcall/apply/bind

結局公式が一番わかりやすかった。

apply

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

> apply() メソッドは、 this 値を指定して関数を呼び出し、 arguments は配列 (または配列風オブジェクト) として提供します。

apply は配列を受け取る。

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers); // 7

console.log(max);

const min = Math.min.apply(null, numbers); // 2

console.log(min);

call

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/call

> このメソッドの構文は apply() とほぼ同じですが、基本的な違いは call() が引数リストを受け取るのに対して、 apply() は引数の単一の配列を受け取る点です。

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name); // "cheese"
console.log(JSON.stringify(new Food('cheese', 5))); // "{"name":"cheese","price":5,"category":"food"}"

bind

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

> bind() メソッドは、呼び出された際に this キーワードに指定された値が設定される新しい関数を生成します。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。

関数が返って来るから実行のときは()をつけてあげないといけない。もしくは call で呼び出す。

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // 42

// call で呼び出すとき
const callGetX = unboundGetX.call(module);
console.log(boundGetX); // 42