[Javascript] call, apply


関数の実行方法
function add(a, b) {
  return a + b;
}
関数を実行する場合、add(3, 4)などの関数の後に()を追加します.
もう1つの関数を実行する方法は、次のとおりです.callまたはapplyを使用します.
console.log(add.call(null, 3, 4));     // 7
console.log(add.apply(null, [3, 4]));  // 7
applyはパラメータを配列にグループ化し、callはカンマで区切られたリスト形式で渡されます.
では、最初のパラメータである準nullは何でしょうか.
callの前の関数(add)のthisをnullにバインドします.
これを使用
関数にthisを入れて実行します.(クロムで運転)
function add(a, b) {
  return this + a + b;
}

add(3, 4);               // "[object Window]34"
add.call(null, 3, 4));   // "[object Window]34"  <-- 1

add.call(2, 3, 4);       // 9  <-- 2
add.apply(2, 3, 4);      // 9
  • はこのデフォルト値のwindowを出力します.
  • thisは2をバインドし、2+3+4を出力します.
  • 代表的な用途
    このcall、applyの一般的な用途は、argumentsオブジェクトなどの類似配列オブジェクトで配列メソッドを使用することです.
    次のコードでは、パラメータについて説明します.(クロムで運転)
    function showParam() {
      console.log(arguments);
    }
    
    showParam(1, 2, 3, 4);    // [1, 2, 3, 4, callee: f, ..생략]
    パラメータとしての値を配列形式で出力します.
    このような配列オブジェクトの配列メソッドsliceを使用してみます.
    function showParam() {
      console.log(arguments.slice(0,1));
    }
    
    showParam(1, 2, 3, 4); 
    // Uncaught TypeError: arguments.slice is not a function
    パラメータは配列ではないため、配列メソッドは使用できないため、エラーが表示されます.
    callまたはapplyを使用できます.
    function sliceParam() {
      console.log(Array.prototype.slice.call(arguments, 0, 2));
      console.log(Array.prototype.slice.apply(arguments, [0, 2]));
    }
    
    sliceParam(1,2,3,4);   
    // [1, 2] 
    // [1, 2]
    いいですね.
    要するに、「callの前の方法をcallの最初のパラメータに使用する」.
    読んでくれてありがとう!
    リファレンス
    zero choブログhttps://www.zerocho.com/category/JavaScript/post/57433645a48729787807c3fd
    poiemaweb https://poiemaweb.com/js-this