如何手动实现es5中的bind方法详解
前言
this的指向在javascript中一直是个谜一样的存在，但是很多地方又会用到this，所以理解和使用this非常重要，关于this的理解这篇文章不做介绍，因为这篇的目的是改变this的指向。
改变this的指向有三种方法，call，apply，bind。下面先介绍下这三种方法，话不多说了，来一起看看详细的介绍吧
改变this指向
call
vara={
name:"aaa",
say(type){
console.log(type,this.name);
}
}
a.say("at");//ataaa
vartn={name:"ttt"};
a.say.call(tn,"tt")//ttttt
可以看到通过call，say方法中的this指向了tn,传参的方式的列举
apply
vara={
name:"aaa",
say(type){
console.log(type,this.name);
}
}
a.say("at");
vartn={name:"ttt"};
a.say.apply(tn,["tt"])
可以看到通过apply，say方法中的this指向了tn，传参的方式是数组
bind
bind也能改变this的指向，不过和call，apply不同的地方在于，bind只改变this，不会指向函数
vara={
name:"aaa",
say(type){
console.log(type,this.name);
}
}
vartn={name:"ttt"};
varb=a.say.bind(tn);
b();//ttt
bind改变this,也是能够继承原型链的，看下下面的代码
varto={name:"to",color:"red"};
functionAnimal(){
console.log(`name:${this.name}...color:${this.color}`);
}
Animal.prototype.say=function(){
console.log(`say..name:${this.name}...color:${this.color}`);
}
varCat=Animal.bind(to);
Cat();//name:to...color:red
varcat=newCat();//name:undefined...color:undefined
cat.say();//say..name:undefined...color:undefined
因为cat是Cat的实例，Cat是改变了this的Animal，所以cat也是Animal的实例，但是this是指向cat的，所以this.name是undefined
实现bind
Function.prototype.bind=function(obj){
constargs=Array.prototype.slice.call(arguments,1);//保留bind时的参数
constthat=this;
constbound=function(){
constinArgs=Array.prototype.slice.call(arguments);//执行bind的函数时的参数
constnewArgs=args.concat(inArgs);//组装参数
that.apply(obj,newArgs);//执行bind的函数
}
//继承prototype--寄生组合式继承
functionF(){};
F.prototype=that.prototype;
bound.prototype=newF();
returnbound;
}
然后执行上面的代码
Cat();//name:to...color:red varcat=newCat();//name:to...color:red cat.say();//say..name:undefined...color:undefined
不过第二行和原生的bind还是有点区别的，这里还是记住了之前的bind的对象，原生的不知道为啥是undefined
面试题
实现es5中的bind方法，使得下面的代码输出success
functionAnimal(name,color){
this.name=name;
this.color=color;
}
Animal.prototype.say=function(){
return`iama${this.color}${this.name}`
}
constCat=Animal.bind(null,"cat");
constcat=newCat("white");
if(cat.say()==='iamawhitecat'&&catinstanceofCat&&catinstanceofAnimal){
console.log("success")
}
加上上面的bind实现，咦？？没有出现success？？为什么？
分析一下代码，bind的第一个参数是null??null的时候应该默认为this，修改代码如下
Function.prototype.bind=function(obj){
constargs=Array.prototype.slice.call(arguments,1);//保留bind时的参数
constthat=this;
constbound=function(){
constinArgs=Array.prototype.slice.call(arguments);//执行bind的函数时的参数
constnewArgs=args.concat(inArgs);//组装参数
constbo=obj||this;
that.apply(bo,newArgs);//执行bind的函数
}
//继承prototype--寄生组合式继承
functionF(){};
F.prototype=that.prototype;
bound.prototype=newF();
returnbound;
}
输出success
完美~~~
撒花~~~
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。