如何使用50行javaScript代码实现简单版的call,apply,bind
在实现自己的call,apply,bind前,需要复习一下this.
所谓的this其实可以理解成一根指针:
其实this的指向,始终坚持一个原理:this永远指向最后调用它的那个对象,这就是精髓。最关键所在
this的四种指向:
当this所在的函数被普通调用时,指向window,如果当前是严格模式,则指向undefined
functiontest(){ console.log(this); }; test(); 指向window输出下面的代码: //Window{speechSynthesis:SpeechSynthesis,caches:CacheStorage,localStorage:Storage,sessionStorage:Storage,webkitStorageInfo:DeprecatedStorageInfo…}
严格模式 'usestrict'; functiontest(){ console.log(this); }; test(); //undefined
当this所在当函数被以obj.fn()形式调用时,指向obj
varobj={ name:'segmentFault', foo:function(){ console.log(this.name); } } obj.foo(); //'segmentFault'
还可以这么做
functiontest(){ console.log(this.name); } varobj={ name:'qiutc', foo:test } obj.foo(); //'qiutc'
当call,apply加入后,this的指向被改变了
functiona(a,b,c){ console.log(this.name); console.log(a,b,c) } constb={ name:"segmentFault" } a.call(b,1,2,3) //输出segmentFault和1,2,3 functiona(a,b,c){ console.log(this.name); console.log(a,b,c) } a.apply(b,[1,2,3]) //输出segmentFault和1,2,3
遇到bind后:
functiona(){ console.log(this.name); } constb={ name:"segmentFault" } a.bind(b,1,2,3)
此时控制台并没有代码输出,因为bind会重新生成并且返回一个函数,这个函数的this指向第一个参数
functiona(){ console.log(this.name); } constb={ name:"segmentFault" } constc=a.bind(b,1,2,3) c() //此时输出segmentFault
正式开始自己实现call:
在函数原型上定义自己的myCall方法:
Function.prototype.myCall=function(context,...arg){ constfn=Symbol('临时属性') context[fn]=this context[fn](...arg) deletecontext[fn] }
四行代码实现了简单的call,思路如下:
- 通过对象属性的方式调用函数,这个函数里面的this指向这个对象
- 每次调用新增一个symbol属性,调用完毕删除
- 这个symbol属性就是调用mycall方法的函数
- 函数形参中使用...arg是将多个形参都塞到一个数组里,在函数内部使用arg这个变量时,就是包含所有形参的数组
- 在调用context[fn](...arg)时候,...arg是为了展开数组,依次传入参数调用函数
为了简化,今天都不做类型判断和错误边际处理,只把原理讲清楚。
自己实现apply
在函数原型上定义自己的myApply方法:
//实现自己的myApply Function.prototype.myApply=function(context,arg){ constfn=Symbol('临时属性') context[fn]=this context[fn](...arg) deletecontext[fn] } constobj2={ a:1 } test.myApply(obj2,[2,3,4])
同理,只是apply传递的第二个参数是数组,这里我们只需要在调用时,将参数用...把数组展开即可
自己实现bind:
bind跟apply,call的本质区别,bind不会改变原函数的this指向,只会返回一个新的函数(我们想要的那个this指向),并且不会调用。但是apply和bind会改变原函数的this指向并且直接调用
bind在编写框架源码,例如koa等中用得特别多:
//实现自己的myBind Function.prototype.myBind=function(context,...firstarg){ constthat=this constbindFn=function(...secoundarg){ returnthat.myCall(context,...firstarg,...secoundarg) } bindFn.prototype=Object.create(that.prototype) returnbindFn } varfnbind=test.myBind(obj,2) fnbind(3)
同理自己定义好原型上的myBind方法
this劫持保留最初的调用mybind方法的那个对象
返回一个新的函数这个新的函数内部this指向已经确定,使用的是我们的mycall方法
学习需要循序渐进,建议根据本文顺序去封装一遍,是比较轻松的,当然bind还需要判断是否是new调用.
完整版本bind
Function.prototype.myBind=function(objThis,...params){ constthisFn=this;//存储源函数以及上方的params(函数参数) //对返回的函数secondParams二次传参 letfToBind=function(...secondParams){ console.log('secondParams',secondParams,...secondParams) constisNew=thisinstanceoffToBind//this是否是fToBind的实例也就是返回的fToBind是否通过new调用 constcontext=isNew?this:Object(objThis)//new调用就绑定到this上,否则就绑定到传入的objThis上 returnthisFn.call(context,...params,...secondParams);//用call调用源函数绑定this的指向并传递参数,返回执行结果 }; fToBind.prototype=Object.create(thisFn.prototype);//复制源函数的prototype给fToBind returnfToBind;//返回拷贝的函数 };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。