之所以要写这篇文章,是因为在一次面试中被要求在白纸上手写bind结果和代码一样清晰明了。一时糊涂,没写出来!接下来,撸起袖子出发吧!~重组调用、申请、绑定,合而为一!~~调用定义和使用Function.prototype.call():developer.mozilla.org/zh-CN/docs/…//Function.prototype.call()examplefunctionfun(arg1,arg2){console.log(this.name)console.log(arg1+arg2)}const_this={name:'YIYING'}//接受一个参数列表;该方法立即执行fun.call(_this,1,2)//输出:YIYING3手写实现/***自定义调用实现*@paramcontextcontextthis对象*@paramargs动态参数*/Function.prototype.ownCall=function(context,...args){context=(typeofcontext==='object'?context:window)//防止覆盖原始属性constkey=Symbol()//这里是要执行的方法context[key]=this//方法执行constresult=context[key](...args)deletecontext[key]returnresult}//验证示例functionfun(arg1,arg2){console.log(this.name)console.log(arg1+arg2)}const_this={name:'YIYING'}//接受参数列表;该方法立即执行fun.ownCall(_this,1,2)//输出:YIYING3apply定义和使用Function.prototype.apply():developer.mozilla.org/zh-CN/docs/…//Function.prototype.apply()samplefunctionfun(arg1,arg2){console.log(this.name)console.log(arg1+arg2)}const_this={name:'YIYING'}//参数为数组;方法立即执行fun.apply(_this,[1,2])//输出:YIYING3手写实现/***自定义Apply实现*@paramcontextcontextthis对象*@paramargs参数数组*/Function.prototype.ownApply=function(context,args){context=(typeofcontext==='object'?context:window)//防止原有属性被覆盖constkey=Symbol()//这里是要执行的方法context[key]=this//方法执行constresult=context[key](...args)deletecontext[key]returnresult}//验证示例functionfun(arg1,arg2){console.log(this.name)console.log(arg1+arg2)}const_this={name:'YIYING'}//参数为数组;方法立即执行fun.ownApply(_this,[1,2])详细答案参考前端手写面试题//output:YIYING3binddefinitionanduseFunction.prototype.bind():developer.mozilla.org/zh-CN/docs/…//Function.prototype.bind()示例函数fun(arg1,arg2){console.log(this.name)console.log(arg1+arg2)}const_this={name:'YIYING'}//只改变fun中的this点,返回新的functionobjectconstnewFun=fun.bind(_this)newFun(1,2)//输出:YIYING3手写实现/***自定义绑定实现*@paramcontextcontext*@returns{Function}*/Function.prototype.ownBind=function(context){context=(typeofcontext==='object'?context:window)return(...args)=>{this.call(context,...args)}}//验证示例函数fun(arg1,arg2){console.log(this.name)console.log(arg1+arg2)}const_this={name:'YIYING'}//只改变fun中的this点,返回一个新的函数对象constnewFun=fun.ownBind(_this)newFun(1,2)//输出:YIYING3
