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.jsFunction.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)));    }}