JavaScript call apply bind

上一篇文章我们了解了JavaScript this关键字的指向https://www.jianshu.com/p/dcabbfd4635c，即this总指向调用它的对象。本篇文章我们继续探讨一下this指向的问题，使用call()、apply()、bind()函数改变this的指向。

一个案例

在下面的示例代码中，person对象有name属性但没有age属性，所以输出Cherry和undefined。

var name = "Cherry";
var age = 18;
var person = {
    name : this.name,
    perAge : this.age,
    greet : function (){
        console.log(this.name+this.age);
    }
}
person.greet();//name值为Cherry age为undefined
console.log(person.perAge);//18

person对象方法中的this代表对象本身，属性中的this指向全局window。

改变this指向的对象

可以使用call()、apply()、bind() 来重新定义 this 这个对象

var name = "Cherry";
var age = 18;
var person = {
    name : this.name,
    perAge : this.age,
    greet : function (){
        console.log(this.name+this.age);
    }
}
person.greet.call(window);//Cherry18
person.greet.apply(window);//Cherry18
person.greet.bind(window)();//Cherry18
console.log(person.perAge);//18

bind函数后面多一个()；返回结果都是一样的，可见bind返回的是一个可调用的函数。

call apply bind 的传参

person对象函数中指定的参数，可以通过call() apply() bind()函数传递。

var name = "Cherry";
var person = {
    name : this.name,
    greet : function (age,city){
        console.log(this.name+age+city);
    }
}
person.greet.call(window,18,"广州");//Cherry18广州
person.greet.apply(window,[19,"深圳"]);//Cherry19深圳
person.greet.bind(window,20,"上海")();//Cherry20上海

从上面可以很直观的看出，三个函数的第一个参数都是this指向的对象，而后面的参数是需要传递给函数指定的参数，只不过apply是通过数组传递参数。