JS中call、apply和bind函数

1、相同点

​ 三个函数都是JS内置对象Function的方法，故所有的函数都可以调用这三个方法。

​ 都可以改变this的指向。什么事this的指向呢，就是当调用这三个函数的时候将会把function原本的this指向认为设定的对象中。

2、不同点

	是否会调用函数	应用场景	参数
call()	是	实现继承	第一个参数为指向的对象，第二个后面所有的参数传递给call()的调用者函数，传递方式是多个，以逗号分隔
apply	是	求数组中的最大最小值	第一个参数为指向的对象，第二个参数是数组，数组会以元素的形式传递给call()的调用者，内部传递的时候一个一个传的
bind()	否	点击事件延时触发	第一个参数为指向的对象，第二个后面所有的参数传递给call()的调用者函数，传递方式是多个，以逗号分隔

2.1 call()实现继承

function Parent(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}

function Child(name,age,sex){
    return Parent.call(this,name,age,sex)
}

var xiaozhang = new Child('小张',20,'男');
console.log(xiaozhang);//{name:'小张',age:20,sex:'男'}

2.2 apply()实现数组最大值和最小值

const arr = [1,2,51,98,12,31,-5];
const max = Math.max.apply(Math,arr); // 通过内置Math对象的球最大值max方法来调用apply函数，因为第一个参数是指向问题，这里不需要指向其他对象，就直接指向自己了
const min = Math.min.apply(Math,arr);
console.log(max,min)//98,-5

2.3 bind()实现点击事件的延时触发

​ 上面call和apply都是在调用的时候就会对函数进行触发，而bind()则不会触发函数，所以bind一般用在延时函数或者定时函数里面。

<button><button>

btn = document.querySelector('button');

btn.onclick = function(){
    this.disabled = false;//点击按钮禁用按钮
    setTimeout(function(){
        this.disabled = true;//延时三秒后启用按钮,setTimeout里面的this指向的是window
    }.bind(this),3000)
    //bind(this)就会把onclick作用域里面的this传给setTimeout里面
    //之前没有这个方法，就在最上面写一个let that = this;来保存this
}