改变this指向的call、apply、bind方法

??博客首页：酸狗的博客??
??欢迎关注??点赞??收藏留言??
??热爱前端学习，期待一起交流！
??作者水平很有限，如果发现错误，求告知，多谢！??
??有问题可私信我交流??

??改变this指向的call、apply、bind方法

• ??call、apply、bind是什么
• ??call、apply、bind用法的相同点和不同点
• ?call、apply的应用

??call、apply、bind是什么

其是Function对象原型链上的方法，主要作用是改变函数执行时的上下文（改变this指向），将对象B的方法交给对象A来执行，并且是立即执行的。

那为什么要改变函数的this指向，举个生活中例子你就明白了，比如你（对象A）上班时候想点根烟抽（事件），但是你没有打火机（方法），这时候你又不想偷跑出去买，所以你向你同事（对象B）借给一个打火机（方法），来点根烟抽（事件）。

在程序中也是一样，对象A有一个方法a，而 B 对象因为某种原因，也要用到方法a，那么是再为对象B添加方法a呢，还是借用一下 对象A的方法a呢？当然是借用对象A的，这样既完成了需求，又减少了内存的占用。

??call、apply、bind用法的相同点和不同点

相同点：

1. 调用的对象必须是Function对象；

2. 第一个参数是一个对象。调用者的this会指向这个对象。如果不传，则默认为全局对象 window。

   var age = '17';
   var name = '小明'
   let A = {
       setInfo(){
           console.log('我' + this.name + '今年' + this.age + '岁')
       }
   }
   let B={
       age:37,
       name:'老王'
   }
   A.setInfo();//我undefined今年undefined岁
   A.setInfo.call();//我小明今年17岁
   A.setInfo.apply();//我小明今年17岁
   A.setInfo.bind()();//我小明今年17岁
   A.setInfo.call(B);//我老王今年37岁
   A.setInfo.apply(B);//我老王今年37岁
   A.setInfo.bind(B)();//我老王今年37岁
   

不同点：

1. 第二个参数不同，call和bind接收一个参数列表，但apply不一样，接收一个包含多个参数的数组；

2. 执行返回不同，call和apply返回的是调用对象执行后的值，bind返回的是函数需要再次调用。

   let A = {
       setInfo(province,city){
           console.log('我' + this.name + '今年' + this.age + '岁,来自'+province+'省'+city+'市')
       }
   }
   let B={
       age:37,
       name:'老王'
   }
   A.setInfo.call(B,'四川','成都');//我老王今年37岁,来自四川省成都市
   A.setInfo.apply(B,['四川','成都']);//我老王今年37岁,来自四川省成都市
   A.setInfo.bind(B,'四川','成都')();//我老王今年37岁,来自四川省成都市
   

call、apply的应用

1. 调用父构造函数实现继承

   function Personal(name,age){
       this.name=name;
       this.age=age;
       this.setInfo=function(){
           console.log('我' + this.name + '今年' + this.age + '岁')
       }
   }
   const A=new Personal('小明','12');
   function FromTo(name,age,province,city){
       Personal.call(this, name,age)
       this.province=province;
       this.city=city;
       this.setAddress=function(){
       	console.log('我' + this.name + '今年' + this.age + '岁,来自'+province+'省'+city+'市')
       }
   }
   const B=new FromTo('老王','37','四川','成都');
   A.setInfo();//我小明今年12岁
   B.setInfo();//我老王今年37岁
   B.setAddress();//我老王今年37岁,来自四川省成都市
   

2. 巧用apply第二参数的特性，实现合并数组后求最大值和最小值

   let array1=[1,3,2,5,9,6];
   let array2=[11,10,16,24,20];
   Array.prototype.push.apply(array1,array2);
   console.log(array1)// [1, 3, 2, 5, 9, 6, 11, 10, 16, 24, 20]
   console.log(Math.max.apply(null,array1))//24
   console.log(Math.min.apply(null,array1))//1
   

3. 巧用apply创建长度为20，每个值为undefined的数组

   Array.apply(null, { length: 20 })

相当ES6中的

Array.from({ length: 20 })