Javascript動(dòng)手實(shí)現(xiàn)call,bind,apply的代碼詳解
1.檢查當(dāng)前調(diào)用的是否為函數(shù)
2.如果當(dāng)前沒(méi)有傳入指向的this,則賦值為window
3.將fn指向當(dāng)前調(diào)用的函數(shù)
4.獲取傳入的參數(shù)
5.將參數(shù)傳入fn進(jìn)行調(diào)用
6.將對(duì)象上的fn刪除
7.返回結(jié)果
//普通call的實(shí)現(xiàn) function hello(){ console.log('hello 我是'+this.name); }; let person = { name:'krys' }; var name = 'liang';//只有var的變量屬于window hello();// 'hello 我是liang' hello.call(person);//'hello 我是krys' hello.call();//'hello 我是liang' let person2 = { name:'lwl' } Function.prototype.mycall = function(context){ //不傳入?yún)?shù)的時(shí)候,默認(rèn)為window if(typeof this !== "function"){ throw new TypeError('Error'); } context = context || window; context.fn = this;//fn就是上面的hello方法 const args = [...arguments].slice(1);//第一個(gè)參數(shù)不要 const result = context.fn(...args);//把剩下的其他參數(shù)傳給hello delete context.fn; return result; } hello.mycall(person2);
function getParams(){ console.log('我是',this.name,'獲取一些參數(shù)',...arguments); } let person3 = { name:'hhh' }; getParams.apply(person3,['hello','world']) Function.prototype.myApply = function(context){ if(typeof this !== "function"){ throw new TypeError() } context = context || window; context.fn = this; let result; if(arguments[1]){ //如果有傳入?yún)?shù)數(shù)組 console.log(arguments[1]) result = context.fn(...arguments[1]); }else{ result = context.fn(); } delete context.fn; return result; } getParams.myApply({name:'llll'},['jjj','kkkk','llll']);
function getParams(){ console.log('我是',this.name,'獲取一些參數(shù)',...arguments); } let person3 = { name:'hhh' }; let person4 = { name:'tttt' }; getParams.bind(person3,'hello','world') getParams.bind(person4,'hello','world')('jjj','kkk'); Function.prototype.myBind = function(context){ if(typeof this !== "function"){ throw new TypeError() } context = context || window; const _that = this; const args = [...arguments].slice(1); return function F(){ if(this instanceof F){ return new _that(...args,...arguments);//這里的arguments是上面的jjj kkk } return _that.apply(context,args.concat(...arguments));//這里的arguments是上面的jjj kkk } } getParams.myBind({name:'llll'},'jjj','kkkk','llll')('hhhhllll');
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
uni-app小程序?qū)崿F(xiàn)微信在線聊天功能(私聊/群聊)
這篇文章主要介紹了uni-app小程序?qū)崿F(xiàn)微信在線聊天(私聊/群聊),今天記錄一下項(xiàng)目核心功能的實(shí)現(xiàn)過(guò)程。頁(yè)面UI以及功能邏輯全部來(lái)源于微信,即時(shí)聊天業(yè)務(wù)的實(shí)現(xiàn)使用socket.io,前端使用uni-app開發(fā),后端服務(wù)器基于node實(shí)現(xiàn),數(shù)據(jù)庫(kù)選擇mongoDB,需要的朋友可以參考下2023-02-02微信小程序swiper-dot中的點(diǎn)如何改成滑塊詳解
swiper組件是滑塊視圖容器,這篇文章主要給大家介紹了關(guān)于微信小程序swiper-dot中的點(diǎn)如何改成滑塊的相關(guān)資料,實(shí)現(xiàn)以后的效果還是不錯(cuò)的,需要的朋友可以參考下2021-07-07es6 for循環(huán)中l(wèi)et和var區(qū)別詳解
這篇文章主要介紹了es6 for循環(huán)中l(wèi)et和var區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫(kù)
stream.js 是一個(gè)很小、完全獨(dú)立的Javascript類庫(kù),它為你提供了一個(gè)新的Javascript數(shù)據(jù)結(jié)構(gòu):streams2011-10-10JS實(shí)現(xiàn)的簡(jiǎn)單四則運(yùn)算計(jì)算器功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單四則運(yùn)算計(jì)算器功能,涉及javascript事件響應(yīng)及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-09-09javascript動(dòng)態(tài)添加表格數(shù)據(jù)行(ASP后臺(tái)數(shù)據(jù)庫(kù)保存例子)
本文,我將以一個(gè)類似的例子來(lái)做一個(gè)前臺(tái)用Javascript動(dòng)態(tài)添加數(shù)據(jù)項(xiàng),后臺(tái)保存到數(shù)據(jù)庫(kù)的例子。2010-05-05