一文搞懂JavaScript中bind,apply,call的實現(xiàn)
bind、call和apply都是Function原型鏈上面的方法，因此不管是使用function聲明的函數(shù)，還是箭頭函數(shù)都可以直接調(diào)用。這三個函數(shù)在使用時都可以改變this指向，本文就帶你看看如何實現(xiàn)bind、call和apply。
bind、call和apply的用法
bind
bind()方法可以被函數(shù)對象調(diào)用，并返回一個新創(chuàng)建的函數(shù)。
語法:
function.bind(thisArg[, arg1[, arg2[, ...]]])
bind()會將第一個參數(shù)作為新函數(shù)的this，如果未傳入?yún)?shù)列表，或者第一個參數(shù)是null或undefined，那么新函數(shù)的this將會是該函數(shù)執(zhí)行作用域的this。使用bind()應(yīng)注意以下事項：
- 返回一個新的函數(shù)，但是不會立即執(zhí)行該函數(shù)
- 根據(jù)傳入的參數(shù)列表綁定
this指向，如果未傳入thisArg，那么需要明確this的指向 - 如果是箭頭函數(shù)，無法改變this，只能改變參數(shù)，這一點(diǎn)我們在這些情況下不建議你使用箭頭函數(shù)也講到過
舉個例子：
正常使用
function fn(a) {
console.log(this, a)
}
const fn1 = fn.bind({x: 100}); // fn1是一個函數(shù)，但是并沒有立即執(zhí)行
fn1(); // {x:100} 100
console.log(fn === fn1); // false，bind返回的是一個新的函數(shù)
箭頭函數(shù)
const fn = (a) => {
console.log(this, a);
}
const fn1 = fn.bind({x: 100}, 100); // 返回一個新的函數(shù)fn1，不會執(zhí)行
fn1(); // window，100 箭頭函數(shù)通過bind返回的函數(shù)無法修改其this指向
未綁定this，或綁定到null、undefined
const fn = (a) => {
console.log(this, a);
}
const fn1 = fn.bind(); // 未綁定
const fn2 = fn.bind(null); // 綁定null
const fn3 = fn.bind(undefined); // 綁定undefined
fn1(); // 綁定到執(zhí)行作用域，默認(rèn)為window
fn2(); // 綁定到執(zhí)行作用域，默認(rèn)為window
fn3(); // 綁定到執(zhí)行作用域，默認(rèn)為window
call&apply
與bind不同，call和apply都是用來執(zhí)行函數(shù)的，可以解決執(zhí)行的函數(shù)的this指向問題。
語法：
function.call(thisArg, arg1, arg2, ...) function.apply(thisArg, argsArray)
call的參數(shù)列表是可選的，如果傳入的thisArg是null或者undefined，那么會自動替換為全局對象；如果是傳入的原始值，則會替換為原始值對應(yīng)的包裝類型。apply的用法和call類似，不同點(diǎn)在于其額外傳入的參數(shù)是一個數(shù)組或類數(shù)組對象，而call的額外參數(shù)是不確定參數(shù)。
舉個栗子：
function fn(a, b) {
console.log(this, a, b);
}
fn.call({x: 100}, 10, 20); // {x: 100} 10 20
fn.apply({x: 100}, [10, 20]); // {x: 100} 10 20
call和apply無法修改箭頭函數(shù)的this指向：
const fn = (a, b) => {
console.log(this, a, b);
}
fn.call({x: 100}, 10, 20); // Window 10 20
fn.apply({x: 100}, [10, 20]); // Window 10 20
簡單回顧了以下bind、call、apply的使用，接下來就看看應(yīng)該如何來實現(xiàn)。
實現(xiàn)bind
根據(jù)我們剛剛使用的bind()，在設(shè)計時需要如下考慮：
- 最終返回的是一個新的函數(shù)，可通過
function來聲明 - 需要綁定新函數(shù)的this
- 需要綁定運(yùn)行時的參數(shù)，可通過apply或call來實現(xiàn)
實現(xiàn)代碼：
// 通過原型鏈注冊方法
// context：傳遞的上下文this；bindArgs表示需要綁定的額外參數(shù)
Function.prototype.newBind = function (context, ...bindArgs) {
const self = this; // 當(dāng)前調(diào)用bind的函數(shù)對象
// 返回的函數(shù)本身也是可以再傳入?yún)?shù)的
return function (...args) {
// 拼接參數(shù)
const newArgs = bindArgs.concat(args);
return self.apply(context, newArgs)
}
}
function fn(a,b) {
console.log(this, a, b);
}
const fn1 = fn.newBind({x: 100}, 10);
fn1(20); // {x: 100} 10 20
bind()返回的是一個新函數(shù)，執(zhí)行新函數(shù)就相當(dāng)于是通過call或apply來調(diào)用原函數(shù)，并傳入this和參數(shù)。
實現(xiàn)call和apply
在實現(xiàn)bind的過程中，我們使用了apply來完成this的綁定，那么要實現(xiàn)apply又應(yīng)該用什么來綁定this呢？可能會有小機(jī)靈鬼發(fā)現(xiàn)，好像在apply中使用call，在call中使用apply也可以完成this綁定。這不就形成了嵌套嘛，不是我們最終想要的。
我們先來
call和apply的應(yīng)用：
- bind返回一個新的函數(shù)，并不會執(zhí)行；call和apply會立即執(zhí)行函數(shù)
- 綁定this
- 傳入執(zhí)行參數(shù)
舉個栗子：
function fn(a, b) {
console.log(this, a, b);
}
fn.call({x: 100}, 10, 20); // {x: 100} 10 20
fn.apply({x: 100}, [10, 20]); // {x: 100} 10 20
call和apply的實現(xiàn)效果是一樣的，都是立即執(zhí)行函數(shù)，不同的是call需要傳入單個或者多個參數(shù)，apply可以傳入一個參數(shù)數(shù)組。
如何在函數(shù)執(zhí)行時綁定this：
- const obj = {x: 100, fn() {this.x}}
- 執(zhí)行obj.fn()，此時fn()內(nèi)部的this指向的就是obj
- 可以借此實現(xiàn)函數(shù)綁定this
使用過Vue的朋友都知道，Vue實例其實就是一個對象，其里面的方法在調(diào)用時，this就會指向當(dāng)前對象。舉個栗子：
let obj = {
key: 'key',
getKey: () => {
return this.key;
},
getKey2() {
return this.key;
}
};
obj.getKey(); // this指向window，返回值取決于window中是否有對應(yīng)的屬性
obj.getKey2(); // this指向obj，返回 'key'
這個例子在這些情況下不建議你使用箭頭函數(shù)也是有提及的，感興趣的朋友可以去看看。根據(jù)此原理，我們就可以來嘗試給函數(shù)綁定this了：某函數(shù)調(diào)用apply，那么我們就將這個函數(shù)添加到傳入的this對象中（如果未傳入則this為全局對象，如果傳入的是原始值，則使用其包裝類型），然后使用()來執(zhí)行函數(shù)，這個時候函數(shù)的this指向的就是我們傳入的this了。
實現(xiàn)代碼：
Function.prototype.newCall = function(context, ...args) {
if (context == null) context = globalThis; // 如果傳入的上下文是null或者undefined，則使用全局globalThis，一般指向的就是window
if (typeof context !== 'object') context = new Object(context); // 如果是原始類型（數(shù)字、字符串、布爾值等），則使用其包裝類型
const fnKey = Symbol(); // 使用Symbol可確保key值不會重復(fù)，避免屬性覆蓋
context[fnKey] = this; // this指向的是當(dāng)前調(diào)用newCall的函數(shù)
console.log(context[fnKey]); // 打印當(dāng)前函數(shù)以及上下文this
console.log(context);
const res = context[fnKey](...args); // 執(zhí)行函數(shù)，函數(shù)的this指向為context
delete context[fnKey]; // 刪除fn，防止污染
return res; // 返回結(jié)果
}
fn.newCall({x: 100}, 10, 20); // {x: 100} 10 20
function fn(a,b) {
console.log(this, a, b);
}
這樣我們就實現(xiàn)了call，那么apply實現(xiàn)類似，只不過傳入的額外參數(shù)要變成數(shù)組或類數(shù)組的方式
Function.prototype.newCall = function(context, args) {
if (context == null) context = globalThis; // 如果傳入的上下文是null或者undefined，則使用全局globalThis，一般指向的就是window
if (typeof context !== 'object') context = new Object(context); // 如果是原始類型（數(shù)字、字符串、布爾值等），則使用其包裝類型
const fnKey = Symbol(); // 使用Symbol可確保key值不會重復(fù)，避免屬性覆蓋
context[fnKey] = this; // this指向的是當(dāng)前調(diào)用newCall的函數(shù)
console.log(context[fnKey]); // 打印當(dāng)前函數(shù)以及上下文this
console.log(context);
const res = context[fnKey](...args); // 執(zhí)行函數(shù)，函數(shù)的this指向為context
delete context[fnKey]; // 刪除fn，防止污染
return res; // 返回結(jié)果
}
fn.newCall({x: 100}, 10, 20); // {x: 100} 10 20
function fn(a,b) {
console.log(this, a, b);
}
注意打印的當(dāng)前函數(shù)以及上下文：
實現(xiàn)call和apply與bind有很大的不同就是如何來處理this綁定。
總結(jié)
學(xué)會了如何實現(xiàn)bind、call和apply，對于理解如何使用，以及如何避免潛在的錯誤有很大的幫助。特別是call和apply，我們在實現(xiàn)的時候借助于對象內(nèi)部的非箭頭函數(shù)，其this指向?qū)ο笞陨?/strong>這一基礎(chǔ)知識，實現(xiàn)了this綁定。如果還未搞清楚的朋友，可以將代碼運(yùn)行起來看看，也許能幫助你更好的理解。
以上就是一文搞懂JavaScript中bind,apply,call的實現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript bind apply call的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
深入理解JavaScript系列（26）：設(shè)計模式之構(gòu)造函數(shù)模式詳解
這篇文章主要介紹了深入理解JavaScript系列（26）：設(shè)計模式之構(gòu)造函數(shù)模式詳解,本文講解了基本用法、構(gòu)造函數(shù)與原型、只能用new嗎？、強(qiáng)制使用new、原始包裝函數(shù)等內(nèi)容,需要的朋友可以參考下2015-03-03
如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個需求,需要顯示溫濕度,網(wǎng)上找了一圈沒找到解決方法,所以只能自己寫一個,這篇文章主要給大家介紹了關(guān)于如何利用微信小程序獲取OneNet平臺數(shù)據(jù)顯示溫濕度的相關(guān)資料,需要的朋友可以參考下2022-03-03
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)
跟我學(xué)習(xí)javascript的for循環(huán)和for...in循環(huán)，它們是JavaScript中提供了兩種方式迭代對象，本文就和大家一起學(xué)習(xí)for循環(huán)和for...in循環(huán)，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細(xì)介紹了純js實現(xiàn)打字機(jī)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別之處
其它的面向?qū)ο蟪绦蛟O(shè)計語言都是通過關(guān)鍵字來解決繼承的問題。但是javascript中并沒有定義這種實現(xiàn)的機(jī)制。接下來通過本文給大家介紹Javascript中類式繼承和原型式繼承的實現(xiàn)方法和區(qū)別,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了JS中判斷null的方法,結(jié)合實例形式對比分析了常見的JS錯誤判斷方法及正確判斷操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
ES6 proxy和reflect的使用方法與應(yīng)用實例分析
這篇文章主要介紹了ES6 proxy和reflect的使用方法,結(jié)合具體實例形式分析了ES6 proxy和reflect基本功能、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-02-02
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點(diǎn)的問題，在IE中nextSibling不會返回文本節(jié)點(diǎn)，而chrome或者firefox等會返回文本節(jié)點(diǎn)2014-05-05
還是掛馬問題，這段時間，我漸漸感到壓力，頭大，通過QQ或MSN加我的人越來越多，我最近自己的工作本來就忙得不亦樂乎。哎，想想，還是要抽空來來幫幫大家。2008-03-03
JS實現(xiàn)類似51job上的地區(qū)選擇效果示例
這篇文章主要介紹了JS實現(xiàn)類似51job上的地區(qū)選擇效果,結(jié)合完整實例形式分析了javascript基于鼠標(biāo)事件響應(yīng)實現(xiàn)頁面元素動態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11