JS 中call()和apply()以及bind()的用法与区别

一、定义

• apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象调用B对象的方法。
• call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。

上面的定义看一遍是很懵的，不过自己编写例子遍反复读的时候，会有种拨开云雾的感觉。

call 与 apply 的相同点：

• 方法的含义是一样的，即方法功能是一样的；
• 第一个参数的作用是一样的；

call 与 apply 的不同点： 两者传入的列表形式不一样

• call可以传入多个参数；
• apply只能传入两个参数，所以其第二个参数往往是作为数组形式传入；

存在的意义：实现（多重）继承。

二、应用

var name = '小张', age = 17;
var obj = {
    name: '小刘',
    objAge: this.age,  //this指向window
    myFun: function(){
        return this.name +　this.age;  //this指向obj
    }
}

console.log( obj.objAge );    //17
console.log( obj.myFun() );   //小刘 undefined

1. call()、 apply()、 bind() 都是用来重定义this这个对象的

var name = '小张', age = 17;
var obj = {
    name: '小刘',
    objAge: this.age,
    myFun: function(){
        return this.name +　this.age; 
    }
}
var db = {
    name: '小黄',
    age: 18
};

console.log( obj.myFun() );           //小刘undefined
console.log( obj.myFun.call() );      //小张17  this指向window
console.log( obj.myFun.call(db) );    //小黄18  this指向对象db
console.log( obj.myFun.apply() );     //小张17
console.log( obj.myFun.apply(db) );   //小黄18
console.log( obj.myFun.bind()() );    //小张17  bind返回的是函数，必须调用才能执行
console.log( obj.myFun.bind(db)() );  //小黄18

2. 对比call、 bind、 apply 传参情况

var name = '小张', age = 17
var obj = {
    name: '小刘',
    objAge: this.age,  
    myFun: function( fm, t ){
        return this.name +　this.age + '来自' + fm +　'去往' + t;  
    }
}
var db = {
    name: '小黄',
    age: 18
};

console.log( obj.myFun.call(db, '江西', '深圳') );     //小黄18来自江西去往深圳
console.log( obj.myFun.apply(db, ['江西', '深圳']) );  //小黄18来自江西去往深圳
console.log( obj.myFun.bind(db, '江西', '深圳')() );   //小黄18来自江西去往深圳 

从上面的结果来看：

call、 bind、 apply 这三个函数的第一个参数都是this的指向对象。

第二个参数差别就来了：

• call 的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面obj.myFun.call(db,‘江西’, …, ‘string’)。

• apply的所有参数都必须放在一个数组里面传进去。

• bind除了返回函数以外，它的参数和call 一样。

当然，三者的参数不限定是String 类型，允许是各种类型，包括函数，对象等等。