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