【JS】详解bind,call和apply的区别

首先这三个方法都可以改变this的指向，下面从用法上来说一下他们的不同点

一.bind

var name = 'sally';
 
function sayName(){
    return this.name;
}
function sayName2(){
    return this.name
}
 
var o = {
    'name':'John',
    sayName:sayName,
    sayName2:sayName2.bind(window)
};
console.log(o.sayName()); //John
console.log(o.sayName2());//sally  

结果看来很明显，两个方法都是o对象来调用的，在不使用bind改变this指向空间时，两个均为John,但由于bind的特殊作用,将其指向绑定为window的，因为最后一个输出了全局变量的name;

二.call和apply

相同点：call和apply均可以改变this指向，

不同点：call接受的参数为一个一个的，但是apply接受的参数只能为一个严格的数组(详情见如下的代码演示)

var name = 'sally';
function sayName(){
    return this.name;
}
var o = {
    'name':'John',
    sayName:sayName
};
console.log(sayName());

结果为:sally    因为此时this所指对象为window

下面把代码改变一下

    var name = 'sally';
    function sayName(){
        return this.name;
    }
    var o = {
        'name':'John',
        sayName:sayName
    };
    
  console.log(sayName.call(o));
  console.log(sayName.apply(o));
  结果为:John 因为此时this所指对象为 o

下面看一下他们的不同点，上面也解释过，直接上代码看一下

  // call接收参数的形式
  
    var name = 'sally';
    function sayName(){
        console.log (this.name,arguments)
    }
    sayName.call(o,1,2,3);

  // apply接收参数的形式
  
    var name = 'sally';
    function sayName(){
        console.log (this.name,arguments)
    }
    sayName.apply(o,[1,2,3]);