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

📒博客首页：酸狗的博客🍋
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
💖热爱前端学习，期待一起交流！✨
🙏作者水平很有限，如果发现错误，求告知，多谢！🌈
😎有问题可私信我交流🙄

🎨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 })