箭头函数的this

JavaScript

我们先来看一看在MDN上面介绍的箭头函数基础语法：

    (参数1, 参数2, …, 参数N) => { 函数声明 }
    (参数1, 参数2, …, 参数N) => 表达式（单一）
    //相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

    // 当只有一个参数时，圆括号是可选的：
    (单一参数) => {函数声明}
    单一参数 => {函数声明}

    // 没有参数的函数应该写成一对圆括号。
    () => {函数声明}

箭头函数和以前的函数相比有什么优势吗？

1. 首先你可以清晰的感觉到箭头函数比以前的函数用起来更加的方便。
2. 箭头函数不绑定自己的this，This被证明是令人厌烦的面向对象风格的编程。箭头函数出现之前每一个函数都会有它自己的this值。

然后我们来谈谈箭头函数的this指向问题，首先前面说过:“箭头函数是不绑定自己本身的this的”，所以你如果在箭头函数里面使用象下面这样使用this，输出的就不会是你期待的那个结果了。

    const obj = {
    name: "obk",
        a: () => {
            console.log(this.name)
        }
    }
    obj.a()  //打出来的是undefined

因为箭头函数默认不会使用自己的this，而是会和外层的this保持一致，注意这里的外层其实应该是window对象,箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，并不是我们以为的obj。外层的this就是window对象。由于在window对象上面没有name这个属性所以打印出来的是undefined；箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值。

还有一点就是“箭头函数”的this，总是指向定义时所在的对象，而不是运行时所在的对象。比如下面这一个例子：

    const obj = {
        a: function() { console.log(this) },
        b: {
            c: () => {console.log(this)}
        }
    }
    obj.a()   
    obj.b.c()  

在上面的这一个例子当中obj.a()打印出来的是obj,而obj.b.c()打印出来的却是window对象。