JavaScript 中 call()、apply()、bind() 的用法

• 2019 年 10 月 8 日
• 筆記

其實是一個很簡單的東西，認真看十分鐘就從一臉懵B 到完全 理解！

先看明白下面：

例 1

obj.objAge;  // 17

比較一下這兩者 this 的差別，第一個列印裡面的 this 指向 obj，第二個全局聲明的 shows() 函數 this 是 window ；

1，call()、apply()、bind() 都是用來重定義 this 這個對象的！

如：

obj.myFun()  // 小張年齡 undefined

例 2

shows()  // 盲僧　

obj.myFun.call(db)；　　　　// 德瑪年齡 99  obj.myFun.apply(db);　　　 // 德瑪年齡 99  obj.myFun.bind(db)();　　　// 德瑪年齡 99

以上出了 bind 方法後面多了個 () 外 ，結果返回都一致！

由此得出結論，bind 返回的是一個新的函數，你必須調用它才會被執行。

2，對比call 、bind 、 apply 傳參情況下

obj.myFun.call(db,'成都','上海')；　　　　 // 德瑪 年齡 99  來自 成都去往上海  obj.myFun.apply(db,['成都','上海']);      // 德瑪 年齡 99  來自 成都去往上海  obj.myFun.bind(db,'成都','上海')();       // 德瑪 年齡 99  來自 成都去往上海  obj.myFun.bind(db,['成都','上海'])();　　 // 德瑪 年齡 99  來自 成都, 上海去往 undefined

微妙的差距！

從上面四個結果不難看出:

call 、bind 、 apply 這三個函數的第一個參數都是 this 的指向對象，第二個參數差別就來了：

call 的參數是直接放進去的，第二第三第 n 個參數全都用逗號分隔，直接放到後面 obj.myFun.call(db,'成都', … ,'string' )。

apply 的所有參數都必須放在一個數組裡面傳進去 obj.myFun.apply(db,['成都', …, 'string' ])。

bind 除了返回是函數以外，它 的參數和 call 一樣。

當然，三者的參數不限定是 string 類型，允許是各種類型，包括函數 、 object 等等！