this关键字在es5普通函数与es6箭头函数的区别

说起JavaScript的this关键字,好多人觉得它既神奇,又神秘.在代码中,它往往能发挥神奇的作用(一开始我也这么觉得).最近又再学习es6,箭头函数中的this,和普通函数里的this所指向的内容也是不一样的.所以,是时候来细细解读一下JavaScript里这个神奇的this啦!

首先,看看权威教程是怎么描述this这个关键字的.在《JavaScript高级程序设计(第3版)》中,首先说明了它是一个关键字,什么叫关键字呢?最直观的理解就是在定义一个变量时候不能用关键字来命名,因为关键字有特定的用途,比如控制语句的开始或结束.在JavaScript函数内部,有两个特殊的对象:argument和this,其中this的行为与Java和C#中的this大致类似.换句话说,this引用的是函数据以执行的环境对象.(在《JavaScript高级程序设计(第3版)》4.2章,对执行环境,环境对象以及作用域有详细的描述)说通俗点,要搞清楚this是什么,只需要搞清楚在哪里调用了这个函数就OK了.下面来看看一个例子:

搞清楚是谁调用了函数

sayThis函数是在全局作用域下定义,内部this不确定.当在全局作用域下调用了sayThis函数,这时,this就指向了全局对象window.当对象foo的sayThis属性引用sayThis并调用它,这时,this就指向了foo了.在实际开发中我们经常会遇到这样的场景,以JQuery的$ajax()为例,在ajax请求成功回调函数里获取后端http响应,根据响应数据改变某个变量或者属性,通常的做法是在ajax方法外面将this赋值给一个变量,然后在ajax回调函数里将响应赋给这个变量,之所以这么做是因为$ajax成功回调函数里的this关键字并不是调用$ajax()所在的环境对象.

然而,在es6箭头函数中的this和普通函数中的this是不一样的.学习es6语法,推荐阅读阮一峰的《ECMAScript 6 入门》,在这本书中,作者是这样解读箭头函数中的this:函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。在普通函数中this指向不是固定的,而在箭头函数中,this指向是固定不变的.我们将上图的例子稍作修改:

搞清楚谁定义了函数

上例说明了无论在什么环境下调用箭头函数,函数内部this指向都是固定不变的,即定义函数的环境对象.