ジャバスクリプト.コール()apply ().bind ()を簡略化しました.

これらの3つのメソッドはFunction.prototypes . 基本的に、彼らがすることは「オブジェクト目標」を指し示すので、これの参照を変えています.

const sayHi = function() {
  console.log(`Hi ${this.name}!`);
};

const person = {
  name: "foxy",
};

sayHi.call(person);   // Hi foxy!
sayHi.apply(person);  // Hi foxy!
sayHi.bind(person)(); // Hi foxy!

この例では、3つのメソッドがperson オブジェクトSOthis.name 現在person.name . オブジェクトリファレンスが最初の引数として渡されることに注意してください.

. call ()

は1つ以上の引数をとる.2番目の引数は関数に渡されます.

const addItems = function(item1, item2){
  this.items.push(item1, item2);
};

const cart = {
  items: [],
};

// Add items to cart
addItems.call(cart, 'lettuce', 'watermelon');

P . S .使用できますarguments の代わりにitem1, item2 :

const addItems = function(){
  this.items.push(...arguments);
};

. apply ()

は1または2の引き数をとる.2番目の引数は配列でなければなりません.

addItems.apply(cart, ['egg fried rice', 'cucumber']);

. bind ()

引数は1つだけです.上記のメソッドとは異なり、このメソッドはすぐに関数を呼び出しません.代わりに新しい関数を返しますので、手動で後で呼び出さなければなりません.

// Make a new function
const boundAddItems = addItems.bind(cart);

// Call it here
boundAddItems('milk', 'jellybeans', 'more jellybeans');

// Or pass it to another function
document.querySelector('button')
  .addEventListener('click', boundAddItems)

ボーナス例

イベントリスナーを全体に追加したいとしましょう<button> 文書で.私たちは.querySelectorAll() を返します.オブジェクトが配列の場合、.map() または.forEach() . 幸運にも、こうすることができます.

const buttons = document.querySelectorAll('button');
Array.prototype.forEach
  .call(buttons, (el) => el.addEventListener('keydown', ...))

JavaScriptでは、配列は単なるオブジェクトです.そして、nodeist!したがって、異なるオブジェクトを持つ配列のプロトタイプメソッドを使用すると、オブジェクトのような配列であれば、細かくなります.
NodeListには、数字のキーのコレクションと、lengthキーが含まれています.
読書ありがとう!
リンク
Function.prototypes.call() | MDN
Function.prototypes.apply() | MDN
Function.prototypes.bind() | MDN
NodeList | MDN