原生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手寫(xiě)實(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-$.extend擴(kuò)展方法使方法參數(shù)更靈活
在ＪＳ里，我們的方法參數(shù)通常使用JQ的$.extend擴(kuò)展方法來(lái)實(shí)現(xiàn),感興趣的朋友可以了解下2013-01-01
JavaScript中的函數(shù)申明、函數(shù)表達(dá)式、箭頭函數(shù)
js中的函數(shù)可以通過(guò)幾種方式創(chuàng)建，具體創(chuàng)建方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，文中通過(guò)例子給大家介紹了函數(shù)聲明和表達(dá)式之間的差別，感興趣的朋友跟隨小編一起看看吧2019-12-12
本文給大家匯總介紹了javascript格式化日期時(shí)間的幾種常用方法，個(gè)人對(duì)最后一種個(gè)性化輸出時(shí)間比較有興趣，基本上只要項(xiàng)目中能用到都是使用這種，推薦給小伙伴們。2015-10-10
JavaScript程序設(shè)計(jì)之JS調(diào)試
這篇文章主要介紹了JavaScript程序設(shè)計(jì)中的重要環(huán)節(jié)：JS調(diào)試，本文通過(guò)一個(gè)加法器，介紹JS如何調(diào)試，感興趣的小伙伴們可以參考一下2015-12-12
javascript實(shí)現(xiàn)數(shù)字倒計(jì)時(shí)特效
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果，是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03
JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示
這篇文章主要介紹了JavaScript獲取圖片像素顏色并轉(zhuǎn)換為box-shadow顯示的方法,用到了HTML5中的FileReader API和getImageData,轉(zhuǎn)換為的CSS3 box-shadow也要注意瀏覽器的兼容問(wèn)題,需要的朋友可以參考下2016-03-03
JS賦值、淺拷貝和深拷貝（數(shù)組和對(duì)象的深淺拷貝）實(shí)例詳解
這篇文章主要介紹了JS賦值、淺拷貝和深拷貝,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組和對(duì)象的深淺拷貝相關(guān)概念、原理、操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了webpack該如何打包及打包流程,本文通過(guò)圖文示例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2023-12-12
JavaScript是如何實(shí)現(xiàn)繼承的(六種方式)
大多OO語(yǔ)言都支持兩種繼承方式： 接口繼承和實(shí)現(xiàn)繼承 ，而ECMAScript中無(wú)法實(shí)現(xiàn)接口繼承，ECMAScript只支持實(shí)現(xiàn)繼承，而且其實(shí)現(xiàn)繼承主要是依靠原型鏈來(lái)實(shí)現(xiàn)，下文給大家技術(shù)js實(shí)現(xiàn)繼承的六種方式，需要的朋友參考下2016-03-03
這篇文章主要介紹了怎樣使用CocosCreator的游戲手柄，每一個(gè)步驟都挺詳細(xì)，資源可以隨便找一些，希望同學(xué)們看完，一定要試一下2021-04-04