第六小节:箭头函数this的理解

        这节呢,我们一起来了解一下箭头函数的this值,接下来我们先看一段常规代码:


        打印出来后你会发现map回调函数中的this.name没有打印出来,那么this.name去哪里了呢?可能是这个this的指向有问题,当我们打印一下这个this.name中的this值,会发现指向的是window。这是为什么呢,是因为JS的值在运行当中的时候才绑定的,我们再来看一下printHobbies的方法是lucy这个对象调用的,那么在printHobbies方法当中,这个this值应该指向他的调用对象lucy。
        那我们再打印一this.hobbies中的this值,你会发现结果是指向lucy对象的。我们再来看一下map方法中的回调函数,这个函数是独立的一个函数。一个函数当它独立运行的时候,也就是说它不是被作为对象的方法调用,也没有通过其他方法来改变this值的话,那么这个时候这个独立函数里的this就应该指向window或者glob或者在严格模式下 指向 undefined。
        所以,当我们执行这个单独的函数的时候,这个this.name的this值就应该指向window这个对象。那么之前呢,我们通常使用的的方法是声明一个变量,如下:


但是在ES6中我们可以用箭头函数来代替这种方式


为什么箭头函数可以达到这种效果呢,这是因为箭头函数没有自己的this值,它的this值是继承它的父作用域,与我们之前所接触的this值是在运行时候动态指定的有所不同。
        箭头函数的this值是词法作用域,也就是说它在定义的时候就被指定了的,而且以后也不会随着它调用方法的改变而改变,所以我们这里的this值就指向它的父级作用域,也就是 this.hobbies中的this值,而且我们也知道 this.hobbies中的this值是指向lucy对象,所以this.name中的this值也是指向lucy对象的。
        所以说当你想让你的函数this值绑定它定义的时候父级作用域的this值,并且不希望它被调用的的时候被改变的话,那么就可以使用箭头函数代替我们以前经常使用的函数。但是呢,一定要注意不要将this机制和箭头函数一起用,不然太容易混乱啦~

你可能感兴趣的:(第六小节:箭头函数this的理解)