在實(shí)現(xiàn)自己的call,apply,bind前,需要復(fù)習(xí)一下this.
所謂的this其實(shí)可以理解成一根指針:
其實(shí) this 的指向,始終堅(jiān)持一個(gè)原理:this 永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象,這就是精髓。最關(guān)鍵所在
this的四種指向:
當(dāng)this所在的函數(shù)被普通調(diào)用時(shí),指向window,如果當(dāng)前是嚴(yán)格模式,則指向undefined
function test() { console.log(this); }; test(); 指向window
嚴(yán)格模式 'use strict'; function test() { console.log(this); }; test(); // undefined
當(dāng)this所在當(dāng)函數(shù)被以obj.fn()形式調(diào)用時(shí),指向obj
var obj = { name: 'segmentFault', foo: function() { console.log(this.name); } } obj.foo(); // 'segmentFault'
還可以這么做
function test() { console.log(this.name); } var obj = { name: 'qiutc', foo: test } obj.foo(); // 'qiutc'
當(dāng)call,apply加入后,this的指向被改變了
function a(a,b,c) { console.log(this.name); console.log(a,b,c) } const b = { name: "segmentFault" } a.call(b,1,2,3) //
遇到bind后 :
function a() { console.log(this.name); } const b = { name: "segmentFault" } a.bind(b, 1, 2, 3)
此時(shí)控制臺(tái)并沒(méi)有代碼輸出,因?yàn)閎ind會(huì)重新生成并且返回一個(gè)函數(shù),這個(gè)函數(shù)的this指向第一個(gè)參數(shù)
function a() { console.log(this.name); } const b = { name: "segmentFault" } const c = a.bind(b, 1, 2, 3) c() //此時(shí)
正式開始自己實(shí)現(xiàn)call :
在函數(shù)原型上定義自己的myCall方法:
Function.prototype.myCall = function (context, ...arg) { const fn = Symbol('臨時(shí)屬性') context[fn] = this context[fn](...arg) delete context[fn] }
四行代碼實(shí)現(xiàn)了簡(jiǎn)單的call,思路如下:
為了簡(jiǎn)化,今天都不做類型判斷和錯(cuò)誤邊際處理,只把原理講清楚。
自己實(shí)現(xiàn)apply
在函數(shù)原型上定義自己的myApply方法:
//實(shí)現(xiàn)自己的myApply Function.prototype.myApply = function (context, arg) { const fn = Symbol('臨時(shí)屬性') context[fn] = this context[fn](...arg) delete context[fn] } const obj2 = { a: 1 } test.myApply(obj2, [2, 3, 4])
同理,只是apply傳遞的第二個(gè)參數(shù)是數(shù)組,這里我們只需要在調(diào)用時(shí),將參數(shù)用...把數(shù)組展開即可
自己實(shí)現(xiàn)bind:
bind跟apply,call的本質(zhì)區(qū)別,bind不會(huì)改變?cè)瘮?shù)的this指向,只會(huì)返回一個(gè)新的函數(shù)(我們想要的那個(gè)this指向),并且不會(huì)調(diào)用。但是apply和bind會(huì)改變?cè)瘮?shù)的this指向并且直接調(diào)用
bind在編寫框架源碼,例如koa等中用得特別多:
//實(shí)現(xiàn)自己的myBind Function.prototype.myBind = function (context, ...firstarg) { const that = this const bindFn = function (...secoundarg) { return that.myCall(context, ...firstarg, ...secoundarg) } bindFn.prototype = Object.create(that.prototype) return bindFn } var fnbind = test.myBind(obj, 2) fnbind(3)
同理 自己定義好原型上的myBind方法
this劫持 保留最初的調(diào)用mybind方法的那個(gè)對(duì)象
返回一個(gè)新的函數(shù) 這個(gè)新的函數(shù)內(nèi)部this指向已經(jīng)確定,使用的是我們的mycall方法
學(xué)習(xí)需要循序漸進(jìn),建議根據(jù)本文順序去封裝一遍,是比較輕松的,當(dāng)然bind還需要判斷是否是new調(diào)用.
完整版本bind
Function.prototype.myBind = function (objThis, ...params) { const thisFn = this; // 存儲(chǔ)源函數(shù)以及上方的params(函數(shù)參數(shù)) // 對(duì)返回的函數(shù) secondParams 二次傳參 let fToBind = function (...secondParams) { console.log('secondParams',secondParams,...secondParams) const isNew = this instanceof fToBind // this是否是fToBind的實(shí)例 也就是返回的fToBind是否通過(guò)new調(diào)用 const context = isNew ? this : Object(objThis) // new調(diào)用就綁定到this上,否則就綁定到傳入的objThis上 return thisFn.call(context, ...params, ...secondParams); // 用call調(diào)用源函數(shù)綁定this的指向并傳遞參數(shù),返回執(zhí)行結(jié)果 }; fToBind.prototype = Object.create(thisFn.prototype); // 復(fù)制源函數(shù)的prototype給fToBind return fToBind; // 返回拷貝的函數(shù) };
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com