javascript中this关键字详解

在理解this之前，先清楚函数的几种调用方式：

1.普通函数调用

2.作为方法来调用

3.作为构造函数来调用

4.使用apply、call方法来调用

5.Function.prototype.bind方法

6.es6箭头函数

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

接下来就分情况来讨论下这些不同的情况(在浏览器环境下)

普通函数调用

在这段代码中person函数作为普通函数调用，实际上person是作为全局对象window的一个方法来进行调用的,即window.person();

所以这个地方是window对象调用了person方法,那么person函数当中的this即指window,同时window还拥有了另外一个属性name,值为tom.

同样这个地方person作为window的方法来调用，在代码的一开始定义了一个全局变量name，值为bob,它相当于window的一个属性,即window.name="bob",又因为在调用person的时候this是指向window的，因此这里会输出bob

作为方法来调用

在上面的代码中，普通函数的调用即是作为window对象的方法进行调用。显然this关键字指向了window对象

再看下其他的形式：

再换种方式：

作为构造函数来调用

new操作符的解释在之前的文章中有详细的说明

call/apply方法的调用

在JS里函数也是对象，因此函数也有方法。从Function.prototype上继承到Function.prototype.call/Function.prototype.apply方法

call/apply方法最大的作用就是能改变this关键字的指向.

fruitB调用fruitA的change方法，将fruitA中的this绑定到对象fruitB上

Function.prototype.bind()方法

那么怎么才能让setTimeout中的this指向Person呢？

这里setTimeout(function(){console.log(this.name)}.bind(this),50);,匿名函数使用bind(this)方法后创建了新的函数，这个新的函数不管在什么地方执行，this都指向的Person,而非window,因此最后的输出为"my name is bob"而不是"my name is tom"

另外几个需要注意的地方：

setTimeout/setInterval/匿名函数执行的时候，this默认指向window对象，除非手动改变this的指向。在《javascript高级程序设计》当中，写到：“超时调用的代码(setTimeout)都是在全局作用域中执行的，因此函数中的this的值，在非严格模式下是指向window对象，在严格模式下是指向undefined”。本文都是在非严格模式下的情况

提供几种改变this的指向方法：

使用that