如何手動實現(xiàn)es5中的bind方法詳解
前言
this的指向在javascript中一直是個謎一樣的存在,但是很多地方又會用到this,所以理解和使用this非常重要,關(guān)于this的理解這篇文章不做介紹,因為這篇的目的是改變this的指向。
改變this的指向有三種方法,call,apply,bind。下面先介紹下這三種方法,話不多說了,來一起看看詳細(xì)的介紹吧
改變this指向
call
var a = { name:"aaa", say(type){ console.log(type,this.name); } } a.say("at");//at aaa var tn = {name:"ttt"}; a.say.call(tn,"tt")//tt ttt
可以看到通過call,say方法中的this指向了tn,傳參的方式的列舉
apply
var a = { name:"aaa", say(type){ console.log(type,this.name); } } a.say("at"); var tn = {name:"ttt"}; a.say.apply(tn,["tt"])
可以看到通過apply,say方法中的this指向了tn,傳參的方式是數(shù)組
bind
bind也能改變this的指向,不過和call,apply不同的地方在于,bind只改變this,不會指向函數(shù)
var a = { name:"aaa", say(type){ console.log(type,this.name); } } var tn = {name:"ttt"}; var b = a.say.bind(tn); b();//ttt
bind 改變this,也是能夠繼承原型鏈的,看下下面的代碼
var to = {name:"to",color:"red"}; function Animal(){ console.log(`name:${this.name}...color:${this.color}`); } Animal.prototype.say = function(){ console.log(`say..name:${this.name}...color:${this.color}`); } var Cat = Animal.bind(to); Cat();//name:to...color:red var cat = new Cat();// name:undefined...color:undefined cat.say();//say..name:undefined...color:undefined
因為cat是Cat的實例,Cat是改變了this的Animal,所以cat也是Animal的實例,但是this是指向cat的,所以this.name是undefined
實現(xiàn)bind
Function.prototype.bind = function(obj){ const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數(shù) const that = this; const bound = function(){ const inArgs = Array.prototype.slice.call(arguments);//執(zhí)行bind的函數(shù)時的參數(shù) const newArgs = args.concat(inArgs);//組裝參數(shù) that.apply(obj,newArgs);//執(zhí)行bind的函數(shù) } //繼承prototype--寄生組合式繼承 function F(){}; F.prototype = that.prototype; bound.prototype = new F(); return bound; }
然后執(zhí)行上面的代碼
Cat();//name:to...color:red var cat = new Cat();//name:to...color:red cat.say();//say..name:undefined...color:undefined
不過第二行和原生的bind還是有點區(qū)別的,這里還是記住了之前的bind的對象,原生的不知道為啥是undefined
面試題
實現(xiàn)es5中的bind方法,使得下面的代碼輸出success
function Animal(name,color){ this.name = name; this.color = color; } Animal.prototype.say = function(){ return `i am a ${this.color} ${this.name}` } const Cat = Animal.bind(null,"cat"); const cat = new Cat("white"); if(cat.say() === 'i am a white cat' && cat instanceof Cat && cat instanceof Animal){ console.log("success") }
加上上面的bind實現(xiàn),咦??沒有出現(xiàn)success??為什么?
分析一下代碼,bind的第一個參數(shù)是null??null的時候應(yīng)該默認(rèn)為this,修改代碼如下
Function.prototype.bind = function(obj){ const args = Array.prototype.slice.call(arguments,1);//保留bind時的參數(shù) const that = this; const bound = function(){ const inArgs = Array.prototype.slice.call(arguments);//執(zhí)行bind的函數(shù)時的參數(shù) const newArgs = args.concat(inArgs);//組裝參數(shù) const bo = obj || this; that.apply(bo,newArgs);//執(zhí)行bind的函數(shù) } //繼承prototype--寄生組合式繼承 function F(){}; F.prototype = that.prototype; bound.prototype = new F(); return bound; }
輸出success
完美~~~
撒花~~~
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
微信小程序?qū)崿F(xiàn)短信登錄的實戰(zhàn)
項目要求增加短信登錄及人臉識別登錄功能,本文就來實現(xiàn)一下 短信登錄功能,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10微信小程序 bindtap 事件多參數(shù)傳遞的代碼示例
在微信小程序中,我們無法直接通過 bindtap="handleClick(1,2,3)" 的方式傳遞參數(shù),而是通過自定義屬性data- 的方式傳遞,并在事件回調(diào)函數(shù)中通過event.currentTarget.dataset獲取這些參數(shù),本文給大家介紹小程序 bindtap 事件多參數(shù)傳遞的實例代碼,感興趣的朋友一起看看吧2023-12-12layer彈出框確定前驗證:彈出消息框的方法(彈出兩個layer)
今天小編就為大家分享一篇layer彈出框確定前驗證:彈出消息框的方法(彈出兩個layer),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09js實現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運行時間功能的代碼3例
這篇文章主要介紹了js實現(xiàn)網(wǎng)頁倒計時、網(wǎng)站已運行時間功能的代碼3例,需要的朋友可以參考下2014-04-04用js閉包的方法實現(xiàn)多點標(biāo)注冒泡示例
這篇文章主要介紹了用js閉包的方法實現(xiàn)多點標(biāo)注冒泡,需要的朋友可以參考下2014-05-05獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹
獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹,有需求的朋友可以參考2012-11-11