用function.apply()方法在JavaScript中實現函數調用

一、什麼是function.apply()方法

在JavaScript中，每個函數都是一個function對象。function對象具有apply()和call()方法，允許您調用一個函數，並指定函數內的this值。這兩個方法很相似，唯一的區別是如何傳遞要應用於函數上下文的參數。

// apply()方法的語法
func.apply(thisArg, [argsArray])

// call()方法的語法
func.call(thisArg, arg1, arg2, ...)

apply()方法接受兩個參數：要綁定給函數的this值，以及一個數組（或類數組對象），其中包含將傳遞給函數的參數。call()方法與apply()方法類似，但是要求您直接列出要傳遞給函數的參數，而不是將它們放在數組中。

二、apply()方法的使用場景

apply()方法可以方便地在JavaScript中實現函數調用。在某些情況下，您可能需要在調用函數時使用不同的值來進行this引用，而不是默認的this。例如：

// 實例化一個對象
var obj = {a: 'Custom'};

// 定義一個函數
function whatsThis(arg1, arg2) {
  console.log(this.a, arg1, arg2);
}

// 用對象調用函數
whatsThis.call(obj, 'hello', 'world'); // 輸出 "Custom hello world"

// 使用apply()方法調用函數
whatsThis.apply(obj, ['hello', 'world']); // 輸出 "Custom hello world"

在上面的代碼中，whatsThis()函數定義了一個this值，指向其函數定義中的obj對象。通過使用call()或apply()方法，您可以調用該函數並設置this值。

三、apply()方法的優點

apply()方法的使用場景不僅僅局限於實現函數調用。它還可以用於JavaScript中的許多其他任務，例如：

1、將數組中的最大值傳遞給Math.max()

// 數組
var arr = [2, 18, 4, 5, 3];

// 使用apply()方法和Math.max()函數找到數組中的最大值
var max = Math.max.apply(null, arr);

console.log(max); // 輸出 18

在上面的代碼中，將apply()方法用於Math.max()函數使您能夠在不手動查找數組中的最大值的情況下找到數組中的最大值。在apply()方法中，第一個參數是null，因為Math.max()函數不需要對象作為其上下文。

2、將一個函數的參數傳遞到另一個函數

// 定義兩個函數，並將它們綁定到myObject對象上
var myObject = {
  func1: function() {
    console.log('func1');
  },
  func2: function() {
    console.log('func2');
  }
};

// 定義一個包裝函數，它可以將func1()和func2()作為參數傳遞
function wrapper(f) {
  f.apply(this);
}

// 調用wrapper()函數
wrapper(myObject.func1); // 輸出 "func1"
wrapper(myObject.func2); // 輸出 "func2"

在上面的代碼中，wrapper()函數將myObject.func1()和myObject.func2()作為參數傳遞。使用apply()方法來調用這些傳遞的函數。

3、使用apply()方法在內部實現JavaScript中其他函數

apply()方法還可以在內部用於JavaScript中的其他函數。例如，在防抖函數（debounce）中使用apply()方法可以幫助您控制函數的調用。

// 防抖函數
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
        args = arguments;
    var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

// 定義一個需要防抖的函數
function myFunction() {
  console.log('myFunction');
}

// 使用防抖函數
var debounceMyFunction = debounce(myFunction, 250);

// 添加事件監聽器
window.addEventListener('scroll', debounceMyFunction);

通過使用apply()方法，上面的代碼使您能夠控制myFunction()函數的調用方式，從而實現防抖效果。