call(),apply(),bind()三个方法的异同以及各自的应用

我们知道this指向一般都是指向调用：

①如普通函数调用时，指向window；

②构造函数调时，指向实例对象；

③对象方法调用时，指向该方法所属的对象；

④事件绑定方法调用时，指向绑定事件对象；

⑤定时器函数和立即执行函数调用，指向window。

在我之前谈到的es6之前，运用构造函数继承父构造函数的属性时，如果在子构造函数直接调用Father()时，这时子构造函数里面是没有任何继承父类的属性的，这就是因为this的指向问题所导致的。调用父构造函数时this是指向父构造函数创建出来的实例对象，这时就应该改变this的指向，让父构造函数的this指向子构造函数里面才行，这时就相当于在子构造函数里面书写了父构造函数里面的属性代码。那用什么方法来改变this的指向呢，这就需要用到call方法了。

改变this指向的方法有三个，分别是call(),apply(),bind()；它们都能改变this的指向，但也有所区别，区别就代表着它们有这各自的应用场景；

下面它们的异同点以及各自的应用场景：

 下面通过代码来加深认识：

call方法：

// call 的主要作用可以实现继承
function Father(uname, age, sex) {
     this.uname = uname;
     this.age = age;
     this.sex = sex;
}

function Son(uname, age, sex) {
  Father.call(this, uname, age, sex);
}
var son = new Son('张三', 18, '男');
console.log(son);//Son {uname: '张三', age: 18, sex: '男'}

 bind方法：

//apply 的主要应用:利用 apply 借助于数学内置对象求数组最大值 
var arr = [1, 66, 3, 99, 4];
var max = Math.max.apply(Math, arr);
var min = Math.min.apply(Math, arr);
console.log(max, min);//99 1

tips:call()和apply()的参数第一个都是改变为的目标对象，之后的参数有区别，call方法是aru1，aru2形式，apply方法则是必须是数组或者伪数组的形式[arg]。

bind方法：

//如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
//场景：我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
var btn1 = document.querySelector('button');
btn1.onclick = function() {
this.disabled = true; // 这个this 指向的是 btn 这个按钮
setTimeout(function() {
      this.disabled = false; // 定时器函数里面的this 指向的是window
     }, 3000); 
}

//这样是实现不了的
可以用bind方法来实现：

var btn1 = document.querySelector('button');
        btn1.onclick = function() {
            this.disabled = true; // 这个this 指向的是 btn 这个按钮
            setTimeout(function() {
                this.disabled = false; // 此时定时器函数里面的this 指向的是btn
            }.bind(this), 3000); // 这个this 指向的是btn 这个对象
}

综上所述，三种改变this指向的方法根据其自身的参数形式和调用情况能有不同场景，比如call方法一般用于继承；apply方法通常用于和数组有关的操作因为apply第二个参数是要传入数组形式，能扩充Math对象方法的调用；bind方法则通常用于需要改变this指向但不需要立刻调用的情况。事实上bind方法是开发中比较频繁使用，当我们是面向对象编程的时候，很多情况下需要改变this指向以满足开发需求。