原生js如何實現(xiàn)call,apply以及bind
更新時間：2021年04月27日 10:58:09 作者：guo&qi
這篇文章主要介紹了原生js實現(xiàn)call,apply以及bind，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
1、實現(xiàn)call
步驟：
- 將函數(shù)設(shè)為對象的屬性；
- 指定this到函數(shù)，并傳入給定參數(shù)執(zhí)行函數(shù)；
- 執(zhí)行之后刪除這個函數(shù)；
- 如果不傳入?yún)?shù)，默認(rèn)指向window；
Function.prototype.mycall = function (context, ...args) {
//判斷是否為函數(shù)，如果不是函數(shù)，則報錯
if (typeof this !== "function") {
throw new Error("不是函數(shù)");
}
context = context || window;
context.fn = this;
const res = context.fn(...args);
delete context.fn;
return res;
}
測試代碼：
var name = "李輝", age = 25;
var obj = {
name: "周果",
objAge: this.age,
myFun: function (fm, to) {
console.log(`名字：${this.name},年齡：${this.age}，來自：${fm}，去往:${to}`)
}
};
var person = {
name: "弟弟",
age: 12,
};
Function.prototype.mycall = function (context, ...args) {
//判斷是否為函數(shù)，如果不是函數(shù)，則報錯
if (typeof this !== "function") {
throw new Error("不是函數(shù)");
}
context = context || window;
context.fn = this;
const res = context.fn(...args);
delete context.fn;
return res;
}
obj.myFun.mycall(person, "成都", "仁壽"); //名字：弟弟,年齡：12，來自：成都，去往:仁壽
2、實現(xiàn)apply
Function.prototype.myApply = function (context, ...args) {
//判斷是否為函數(shù)，如果不是函數(shù)，則報錯
if (typeof this !== "function") {
throw new Error("不是函數(shù)");
}
context = context || window;
context.fn = this;
args = args && args[0] || [];
const result = context.fn(...args);
delete context.fn;
return result;
}
測試代碼：
obj.myFun.myApply(person, ["成都", "仁壽"]); //名字：弟弟,年齡：12，來自：成都，去往:仁壽
3、實現(xiàn)bind
bind()方法主要就是將函數(shù)綁定到某個對象，bind()會創(chuàng)建一個函數(shù)，函數(shù)體內(nèi)的this對象的值會被綁定到傳入bind()中的第一個參數(shù)的值。
方法1：使用apply
Function.prototype.myBind = function () {
let self = this; //保存原函數(shù)
let context = [].shift.call(arguments); //保存需要綁定的this上下文
let args = [...arguments]; //將傳入的剩余參數(shù)轉(zhuǎn)換成數(shù)組
return function () { //返回一個新的函數(shù)
self.apply(context,[].concat.call(args,[...arguments]));
}
}
ES6簡化一下：
Function.prototype.myBind = function (context, ...args1) {
return (...args2) => { //返回箭頭函數(shù), this綁定調(diào)用這個方法的函數(shù)對象
context = context || window;
return this.apply(context, args1.concat(args2));//合并參數(shù)
}
}
方法2：不使用call以及apply
將上面的代碼和js手寫實現(xiàn)apply的代碼合并一下：
Function.prototype.myBind = function (context, ...args1) {
return (...args2) => { //返回箭頭函數(shù), this綁定調(diào)用這個方法的函數(shù)對象
context = context || window;
context.fn = this;
const args = args1.concat(args2);
const res = context.fn(...args);
delete context.fn;
return res;
}
}
測試代碼：
obj.myFun.myBind(person, "成都", "仁壽")();//名字：弟弟,年齡：12，來自：成都，去往:仁壽
以上就是原生js如何實現(xiàn)call,apply以及bind的詳細(xì)內(nèi)容，更多關(guān)于js實現(xiàn)call,apply以及bind的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易點擊切換顯示或隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要是對javascript中文本框中輸入法切換的問題進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript知識點總結(jié)(十一)之js中的Object類詳解
這篇文章主要介紹了JavaScript知識點總結(jié)(十一)之js中的Object類詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了原生js+css實現(xiàn)tab切換功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了詳解用async/await來處理異步，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
如何實現(xiàn)select組件的選擇輸入過濾作用，下面有一段js代碼，很實用，需要的朋友可以看看2014-10-10
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)動態(tài)增加文件域表單功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
javascript利用初始化數(shù)據(jù)裝配模版的實現(xiàn)代碼
實現(xiàn)一個通用方法，使用初始化數(shù)據(jù)來裝配模版。需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了js獲取video任意時間的畫面截圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了webpack-dev-server原理解析及跨域解決方法,需要的朋友可以參考下2024-01-01