JS中this关键字改变指向的三种方法（apply、call、bind）

首先，了解一下this关键字。this关键字就涉及到函数调用的内容。函数的几种调用方式:

1 普通函数调用
2 作为方法来调用
3 作为构造函数来调用
4 使用apply/call方法来调用
5 Function.prototype.bind方法
6 ES6箭头函数

但是不管函数是按哪种方法来调用的，都需要记住一点：谁调用这个函数或方法,this关键字就指向谁。

普通函数调用

var age = 18;
function person(){
    this.name = "Tony";
    console.log(this);      //window
    console.log(this.name); //Tony
    console.log(this.age);  //18
}
person();

代码中定义一个普通函数person，在调用时实际上person是作为全局对象window的一个方法来进行调用的，即window.person();
因此是window对象调用了person方法，那么person函数当中的this即指window，同时window还拥有了另外一个属性name,值为“Tony”。

定义一个全局变量age，它相当于是window的一个属性。在调用person函数时它的this指向window，所以在函数内部可以访问到age变量，这也解释了函数内部可访问全局变量。

作为方法来调用

var person = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
person.showName();

var name = "Tom";
var showname = person.showName;
showname();

定义一个对象person包含一个showName的方法，在对象person内调用方法返回的是Tony，显然this指向了对象person。

再定义一个全局变量name，将person.showName方法赋值给变量showname，因为在全局定义的嘛，所以showname也相当于window的一个属性，此时调用showname它的this是指向window的，所以返回的值就是全局变量“Tom”。

var personA = {
    name : "Tony",
    showName:function(){
        console.log(this.name);
    }
}
var personB = {
    name : "Tom",
    sayName:personA.showName
}
personB.sayName();    //Tom

personB对象中的方法调用personA中的方法，虽然showName是personA中定义的，但调用了personB，那this就指向了personB。

作为构造函数来调用

function Person(name){
    this.name = name;
}
var personA = new Person("Tony");
console.log(personA.name);

构造函数new出来的实例，this指向这个实例对象。

下面就来了解一下this指向改变的三种方法。

在JavaScript中，call、apply和bind是Function对象自带的三个方法，这三个方法的主要作用是改变函数中的this指向。所以可知它们的共同点就是都用来改变函数的this对象的指向的；还有就是三者第一个参数都是this要指向的对象，也就是想指定的上下文（函数的每次调用都会拥有一个特殊值——本次调用的上下文（context）——这就是this关键字的值。），然后再利用后续参数传参。而它们的不同也就是传参的不同，bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

apply()方法 

它接收两个参数，一个是函数运行的作用域（this），另一个是参数数组。

语法：

apply([thisObj [,argArray] ]);

定义：应用某一对象的一个方法，用另一个对象替换当前对象

说明：如果argArray不是一个有效数组或不是arguments对象，那么将导致一个 TypeError，如果没有提供argArray和thisObj任何一个参数，那么Global对象将用作thisObj。

function Person(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Student(name){
    Person.apply(this,arguments);
}
var stu = new Student("Tony");
stu.showName();

call()方法 

它第一个参数和apply()方法的一样，但是传递给函数的参数必须列举出来。

语法：

call([thisObject[,arg1 [,arg2 [,...,argn]]]]);

定义：调用一个对象的一个方法，以另一个对象替换当前对象。

说明： call方法可以用来代替另一个对象调用一个方法，call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象。

thisObj取值的情况：

1 不传，或者传null,undefined， 函数中的this指向window对象
2 传递另一个函数的函数名，函数中的this指向这个函数的引用
3 传递字符串、数值或布尔类型等基础类型，函数中的this指向其对应的包装对象，如 String、Number、Boolean
4 传递一个对象，函数中的this指向这个对象

call方法的一些常见例子：

1.

function add(a,b){
    console.log(a+b);
}
function subtraction(a,b){
    console.log(a-b);
}
add.call(subtraction,3,1);    //4

定义一个加法函数、加法函数，最后的调用语句意思就是用加法替代了减法，在减法函数中通过call方法改变了this的指向，已经不再计算a-b，而是作用加法中的a+b。

2.

function Student(){
    this.name = "Tom";
    this.showName = function(){
        console.log(this.name);
    }
}
function Teacher(){
    this.name = "Tony";
}
var stu = new Student();
var tea = new Teacher();
stu.showName.call(tea);

定义一个学生函数，它有属性name和方法showName，而老师函数只有name属性，最后一个调用语句的意思就是把学生的方法用到了老师函数中执行，即便老师是没有这个方法的。

3.

function Parent(name){
    this.name = name;
    this.showName = function(){
        console.log(this.name);
    }
}
function Son(name){
    Parent.call(this,name);
}
var baby = new Son("Tony");
baby.showName();

Parent.call(this,name)意思就是使用父母这个对象替代掉儿子函数中的this对象，那么这个儿子函数中就可以直接调用父母对象中的属性和方法，这也就是继承。

bind()方法

bind()最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。

var person = {
    name : "Tony",
    showName : function(){
        console.log(this.name);
    }
}
person.showName();      //Tony

var name = "Tom";
var getName = person.showName;
getName();              //Tom

var boundGetName = getName.bind(person);
boundGetName();         //Tony