欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何手动实现es5中的bind方法详解

程序员文章站 2022-07-02 22:48:58
前言 this的指向在javascript中一直是个谜一样的存在,但是很多地方又会用到this,所以理解和使用this非常重要,关于this的理解这篇文章不做介绍,因...

前言

this的指向在javascript中一直是个谜一样的存在,但是很多地方又会用到this,所以理解和使用this非常重要,关于this的理解这篇文章不做介绍,因为这篇的目的是改变this的指向。

改变this的指向有三种方法,call,apply,bind。下面先介绍下这三种方法,话不多说了,来一起看看详细的介绍吧

改变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,传参的方式是数组

bind

bind也能改变this的指向,不过和call,apply不同的地方在于,bind只改变this,不会指向函数

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

实现bind

function.prototype.bind = function(obj){
 const args = array.prototype.slice.call(arguments,1);//保留bind时的参数
 const that = this;
 const bound = function(){
  const inargs = array.prototype.slice.call(arguments);//执行bind的函数时的参数
  const newargs = args.concat(inargs);//组装参数
  that.apply(obj,newargs);//执行bind的函数
 }
 //继承prototype--寄生组合式继承
 function f(){};
 f.prototype = that.prototype;
 bound.prototype = new f();
 return bound;
}

然后执行上面的代码

cat();//name:to...color:red
var cat = new cat();//name:to...color:red
cat.say();//say..name:undefined...color:undefined

不过第二行和原生的bind还是有点区别的,这里还是记住了之前的bind的对象,原生的不知道为啥是undefined

面试题

实现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实现,咦??没有出现success??为什么?

分析一下代码,bind的第一个参数是null??null的时候应该默认为this,修改代码如下

function.prototype.bind = function(obj){
 const args = array.prototype.slice.call(arguments,1);//保留bind时的参数
 const that = this;
 const bound = function(){
  const inargs = array.prototype.slice.call(arguments);//执行bind的函数时的参数
  const newargs = args.concat(inargs);//组装参数
  const bo = obj || this;
  that.apply(bo,newargs);//执行bind的函数
 }
 //继承prototype--寄生组合式继承
 function f(){};
 f.prototype = that.prototype;
 bound.prototype = new f();
 return bound;
}

输出success

完美~~~

撒花~~~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。