JavaScript 对call()、apply()、bind()的彻底理解（很好懂）

我们想看两个例子：

var name = "阿清",
          age = 18;
      var obj = {
          name: "阿广",
          objAge: this.age,
          myFun: function() {
              console.log(this.name + "年龄是" + this.age);
          }
      }
      
      console.log(obj.objAge); //18
      obj.myFun(); //阿广年龄是undefined

var a = "小明";

     function showname() {
         console.log(this.a);
     }
     showname(); //小明

由这两个例子可以看出来，第一个this指向obj，第二个例子this指向window。

我们要知道 call()、apply()、bind() 都是对this的重定向。改变调用函数体内的 this 指向。

如下：

var name = "阿清",
    age = 18;
var obj = {
    name: "阿广",
    objAge: this.age,
    myFun: function() {
        console.log(this.name + "年龄是" + this.age);
    }
}
var a = {
    name: "小明",
    age: 20
}
obj.myFun.call(a); //小明年龄是20
obj.myFun.apply(a); //小明年龄是20
obj.myFun.bind(a)(); //小明年龄是20

this 都指向的 a ，除了bind方法后面多了一个（），其他都一样，因为bind返回是一个新的函数，我们必须调用它，才会执行。

call()、apply()、bind() 也可以进行传参：

var name = "阿清",
            age = 18;
        var obj = {
            name: "阿广",
            objAge: this.age,
            myFun: function(from, place) {
                console.log(this.name + "年龄是" + this.age + " ,他的家乡是：" + from + place + "区");
            }
        }
        var a = {
            name: "小明",
            age: 20
        }
        obj.myFun.call(a, "开封市", "祥符"); //小明年龄是20 ,他的家乡是：开封市祥符区
        obj.myFun.apply(a, ["开封市", "祥符"]); //小明年龄是20 ,他的家乡是：开封市祥符区
        obj.myFun.bind(a, "开封市", "祥符")(); //小明年龄是20 ,他的家乡是：开封市祥符区
        obj.myFun.bind(a, ["开封市", "祥符"])(); //小明年龄是20 ,他的家乡是：开封市,祥符undefined区