apply， call， bind在js中的区别

apply， call， bind在js中的区别

在js中，这三种方法都是用来改变函数的this对象的指向的。

先看看相似点：

• 都是用来改变函数的this对象的指向的
• 第一个参数都是this要指向的对象
• 都可以继续传递参数

那区别呢？
上代码：

var xb = {
    name: '小冰',
    gender: '女',
    say: function(){
        alert(this.name + ',' + this.gender);
    }
}
var other = {
    name: '小东',
    gender: '男',
}
xb.say();   ===> 结果    小冰，女

那么如果我们想要用xb的say()方法输出other的数据，要怎么办呢？
简单的可以用：

1.   xb.say.call(other);
2.   xb.say.apply(other);
3.   xb.say.bind(other)();

由上面代码我们可以看到，其实call和apply方法，都是对函数的直接调用，但是bind()方法需要加上()来执行。

---

现在来看传参数的情况

上代码(还是上面的例子，但是传参)：

var xb = {
    name: '小冰',
    gender: '女',
    say: function(school,grade){
        alert(this.name + ',' + this.gender + '----' + school + ',' + grade);
    }
}
var other = {
    name: '小东',
    gender: '男',
}

• 用call()传参调用

xb.say.call(other,'斯坦福','3')
//  ====>  小东，男----斯坦福，3

• 用apply()传参调用

xb.say.apply(other,['sitanfu','third']);
//  ====>  小东，男----sitanfu，third

从这里我们可以看到，其实，call()和apply()函数的用法其实是一样的，只是传参的形式不一样，这是他们最大的差别

---

bind()呢？

xb.say.bind(other,'斯坦福','3');
//  是不是跟call传参很像

但是上面xb.say.bind(other,’斯坦福’,’3’)，返回的其实还是一个函数，并没有执行

 console.log(xb.say.bind(other));      // 我们可以把xb.say.bind(other);打印出来看看
 //    ===> 返回的是一个函数  返回放在下一节代码里面
}

返回结果

function(school,grade){
    alert(this.name + ',' + this.gender + '----' + school + ',' + grade);

所以要执行，需要在xb.say.bind(other)后面加()让其执行。执行结果如下：

 console.log(xb.say.bind(other))('斯坦福','3');
 //  ==>  小东，男---斯坦福，3

这里附加bind的源码实现：

// the .bind method from prototype.js
Function.prototype.bind = function(){
    var fn = this, args = Array.prototype.slice.call(arguments),object = args.shift();
    return function(){
        return fn.apply(object,args.concat(Array.prototype.slice.call(arguments)));
    }
}