[[437510]]

本文轉載自微信公眾號「三分鐘學前端」，作者sisterAn  。轉載本文請聯系三分鐘學前端公眾號。

Function.prototype.call()

call() 方法調用一個函數, 其具有一個指定的 this 值和多個參數(參數的列表)。

func.call(thisArg, arg1, arg2, ...) 

它運行 func，提供的第一個參數 thisArg 作為 this，后面的作為參數。

看一個簡單的例子：

function sayWord() { 
  var talk = [this.name, 'say', this.word].join(' '); 
  console.log(talk); 
} 
 
var bottle = { 
  name: 'bottle',  
  word: 'hello' 
}; 
 
// 使用 call 將 bottle 傳遞為 sayWord 的 this 
sayWord.call(bottle);  
// bottle say hello 

所以，call 主要實現了以下兩個功能：

• call 改變了 this 的指向
• bottle 執行了 sayWord 函數

模擬實現 call

模擬實現 call 有三步：

• 將函數設置為對象的屬性
• 執行函數
• 刪除對象的這個屬性

Function.prototype.call = function (context) { 
  // 將函數設為對象的屬性 
  // 注意：非嚴格模式下,  
  //   指定為 null 和 undefined 的 this 值會自動指向全局對象(瀏覽器中就是 window 對象) 
  //   值為原始值(數字，字符串，布爾值)的 this 會指向該原始值的自動包裝對象(用 Object() 轉換） 
  context = context ? Object(context) : window;  
  context.fn = this; 
     
  // 執行該函數 
  let args = [...arguments].slice(1); 
  let result = context.fn(...args); 
     
  // 刪除該函數 
  delete context.fn 
  // 注意：函數是可以有返回值的 
  return result; 
} 

Function.prototype.apply()

apply() 方法調用一個具有給定 this 值的函數，以及作為一個數組(或[類似數組對象)提供的參數。

func.apply(thisArg, [argsArray]) 

它運行 func 設置 this = context 并使用類數組對象 args 作為參數列表。

例如，這兩個調用幾乎相同：

func(1, 2, 3); 
func.apply(context, [1, 2, 3]) 

兩個都運行 func 給定的參數是 1,2,3。但是 apply 也設置了 this = context。

call 和 apply 之間唯一的語法區別是 call 接受一個參數列表，而 apply 則接受帶有一個類數組對象。

需要注意：Chrome 14 以及 Internet Explorer 9 仍然不接受類數組對象。如果傳入類數組對象，它們會拋出異常。

模擬實現 apply

Function.prototype.apply = function (context, arr) { 
    context = context ? Object(context) : window;  
    context.fn = this; 
   
    let result; 
    if (!arr) { 
        result = context.fn(); 
    } else { 
        result = context.fn(...arr); 
    } 
       
    delete context.fn 
    return result; 
}