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，这是约定俗成的。在“use strict”严格模式下，没有直接的挂载者的话，this默认为undefined。以下都是在非严格模式下讨论。

二，普通函数中的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（）执行时，this.val是指obj里面的val=2，this.val*=2 =4;val在db1函数中并没有定义，所以默认情况下会在全局上找，此时val*=2=2。所以打印2 4。接着，定义一个func=obj.db1，我们把func打印出来看看是这样的：

所以可以看出func的执行对象是window，我们可以此时全局的val已经等于4了，在经过this.val*=2,val*=2的运算，打印的结果就是8  8。

上面的代码打印的就是：

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

三，es6箭头函数的this

箭头函数的this定义：箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的。简单的说，函数在定义时，this就继承了定义函数的对象。

所以，这会很好的解决匿名函数和setTimeout和setInterval的this指向问题。我们不用再去给其用that变量存储this。

看下面代码：

打印的结果：

这就是箭头函数中的this！！！

       小伙伴们今天的学习就到这里了，如果觉得本文对你有帮助的话，欢迎转发，评论，收藏，点赞！！！
       每天学习进步一点点，就是领先的开始。如果想继续提高，欢迎关注我，或者关注公众号”祯民讲前端“。大量前端技术文章，面试资料，技巧等助你更进一步！