深入理解ES6箭头函数里的this，看这篇就够了

一，了解前须知

1，箭头函数：出现的作用除了让函数的书写变得很简洁，可读性很好外；最大的优点是解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题。

2，我们常见的window属性和方法有alter，document，parseInt，setTimeout，setInterval，localtion等等，这些在默认的情况下是省略了window前缀的。（window.alter = alter）。

3，在“use strict”严格模式下，没有直接的挂载者（或称调用者）的函数中this是指向window，这是约定俗成的。以下都是在非严格模式下讨论。

二，普通函数中的this

普通函数，this的概念是：this是JavaScript的一个关键字，他是指函数执行过程中，自动生成的一个内部对象，是指当前的对象，只在当前函数内部使用。（this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this指向的是window；当函数被作为某个对象的方法调用时，this就等于那个对象）。一个最简单的例子：

这种情况下，我们希望在每一次循环后都能得到$("#content")的this，但是因为this是只在当前函数内部使用的，又因为js函数是可以多层嵌套的原因，使得我们无法得到最开始的this，这时我们可以把他先用一个变量存储起来，最终达到我们想要的目的。（一般我们会这样定义：var _this = this var that=this），看个人习惯。我们在来看一个函数的例子：

打印是结果是the window。原因是，匿名函数的执行环境是全局的，而且this只在函数内部起作用。此时的this.name在匿名函数中找不到，所以就从全局中找，找到后打印出来。我们将上面的函数改装一下：

我们在getNameFun内将this赋给that，此时的that指向的是挂载（调用）的对象，即为object，此时在匿名函数中调用that.name会在object上查找相应的数据，而不是在全局上查找，最终打印出myobject。我们试着把函数的执行对象放在window下看看：

打印的结果是window的对象，如下：

接下来我们把函数的执行对象放在一个自定义变量上看看：

两者打印的都是obj的对象，如下图：此时的setTimeout里面的that指向的是obj，因为在say中this的绑定对象是obj，this又赋给了that。

下面为了更深一步的理解this这个概念，我们来看一下下面的代码，并判断其运行结果：

• 第一步 obj.db1()

obj.db1()执行时，this.val是指obj里面的val=2，this.val*=2 =4;val在db1函数中并没有定义，所以默认情况下会在全局上找，此时val*=2=2（记住这个window.val值,第三部会用到）。所以打印2 4。

• 第二步 var func=obj.db1

这里定义一个func=obj.db1，我们把func打印出来看看是这样的：

所以可以看出func的执行对象是window，第一步运行后window.val=2了，在经过this.val*=2,val*=2的运算，打印的结果就是8 8。上面的代码打印的就是：

如果你对上面的结果很了解了，那就证明你已经很了解this，那接下来我们来看看es6箭头函数的this

三，es6箭头函数的this

箭头函数的this定义：**箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。**所以，这会很好的解决匿名函数和setTimeout和setInterval的this指向问题。我们不用再去给其用that变量存储this。看下面代码：

打印的结果：


这就是箭头函数中的this！是不是很简单了？