call, apply, bind方法详解

在js中，call(),apply()和bind()是function自带的三个函数，这三个函数的作用都是用来改变this指向的。接下来，我们就详细理解一下这几个函数的用法。

共同点和区别

call(),appy(),bind()这几个方法的共同点就是改变this指向。

call()和apply()的用法：
看例子

function A(x, y){
            console.log(x,y);
            console.log(this);
            console.log(arguments);
        }
var C = {};
A.call(C,5,6);     //5 6  {}  arguments = [5,6]
A.apply(C,[5,6]);   //5 6  {}  arguments = [5,6]

从例子也可以看出，原来A函数的this指向是全局，但是通过call()和apply()调用之后，this指向是空对象C。
call()和apply()的用法只有一点不同，就是传参列表不同，其它完全相同。
再看例子

function person(age, male){
            this.age = age;
            this.male = male;
        }
var person1 = {};
person.call(person1,20, "female");   //person1 = {age: 20, male: "female"}
person.apply(person1,[20,"female"]);  //person1 = {age: 20, male: "female"}

从返回结果看，person1空对象通过调用call()和apply()函数为自己添加了age和male属性。

var person = {
            age: 20,
            male: "female",
            sayAge: function(){
                console.log("my age is"+this.age+" my male is "+this.male);
            }
        };

        var person1 = {
            age: 30,
            male: "male"
        };
        person.sayAge.call(person1);   //my age is30 my male is male
        person.sayAge.apply(person1);  //my age is30 my male is male

再来看bind()的用法，上面讲的无论是call()还是apply()都是立马就调用了对应的函数，但是bind()不会，bind()会生成一个新的函数并返回这个新函数，在以后想什么调用这个新函数都可以，bind()的传参形式和call()一致，第一个参数也是会绑定this的值，后面接受传递给函数的不定参数。
接下来看代码

var person = {
            age: 20
        };
var age = 30;
  function sayAge (male){
      var age = 50;
      console.log(this.age + " "+male);
  }
  sayAge("male");    //30 male   函数中的this指向window
  var foo = sayAge.bind(person,"female");    //20 female
  sayAge.call(person,"female");      //20 female
  sayAge.apply(person,["female"]);
  foo();                              //20 female