call、apply和bind的区别及用法

call、apply和bind都是改变函数运行时this的指向。

先来弄明白this的指向：

var name = 'mimi', age = 2;

var obj = {

    name: 'momo',

    objAge: this.age,// 这里的this指的是window

    objFun: function(){

        console.log(this.name+':'+this.age);// 这里的this指的是obj,obj中没有age属性，所以输出是undefined

    }

};

console.log(obj.objAge);// 2

obj.objFun();// momo:undefined  

call、apply、bind的用法：

var name = 'mimi', age = 2;

var obj = {

    name: 'momo',

    objAge: this.age,

    objFun:function() {

        console.log(this.name+':'+this.age);

    }

};

var obj2 = {

    name: 'kaixin',

    age: 3

};

obj.objFun.call(obj2);// kaixin:3

obj.objFun.apply(obj2);// kaixin:3

obj.objFun.bind(obj2)();// kaixin:3

以上得出结论，call、apply、bind都改变了this的指向，bind返回的是个新函数，必须调用才会执行。

call、apply、bind参数的对比

var name = 'mimi', age = 2;

var obj = {

name: 'momo',

objAge: this.age,

    objFun:function(arg1, arg2) {

        console.log(this.name+':'+this.age+',like:'+arg1','++arg2);

    }

};

var obj2 = {

    name: 'kaixin',

    age: 3

};

obj.objFun.call(obj2,'eat','fight');// kaixin:3,like:eat,fight

obj.objFun.apply(obj2,['eat','fight']);// kaixin:3,like:eat,fight

obj.objFun.bind(obj2,['eat','fight'])();// kaixin:3,like:eat,fight

以上可以看出call、apply、bind的第一个参数都是 this 的指向，后边的参数不同。

call可以传递过个参数，aplly的参数必须放在一个数组里，bind没有限制，可以传递多个参数，也可以传递数组。

以上三个方法传递的参数允许是多种类型。