定义及确定`this`的箭头函数

箭头函数=>，一个号称解决了function的this问题的最大杀器，比如曾经撸掉一撮又一撮头发的经典问题:

function Person () {
  setInterval(function () {
    console.log(this);
  },1000);
}

new Person();

当然，身为为一名身经百战 (常年摸鱼) 的前端来说，这很明显是因为匿名函数中的this是在运行时判断，并不是立即能判断出来，注意重点---运行时。当然说成大白话就是执行函数的时候再判断。所以window.setInterval的输出并不是那么我们想要的。

当然，身为为一名身经百战(常年摸鱼) 的前端来说，我立马给出了出色的解决方案---闭包:

function Person () {
  let that = this;
  setInterval(function () {
    console.log(that);
  },1000);
}

new Person();

结果就变成了我想要的:

当然这显然并没有从根本上解决，因为最佳的解决方案肯定是像c#,java大锅们那样在书写时，就能知道它的this的指向。说的专业一点，就是在定义的时候就能判断出来this的指向。于是乎，终于在es6中出现了万众期待(晕头转向) 的箭头函数---=>。当然它的作用不仅仅是像c#等大锅那样的简写，更重要的是解决了撸突一众老大哥头发的this指向问题。

当然这里省略箭头函数的many many特点，我们直接跳到this问题。首先我们得出结论：

• 箭头函数本身没有this(其实从它没有{}号的简写也可以看出)。
• 箭头函数中书写的this其实被绑定到了上级作用域的this。

所以我们可以用非常简便的方式将刚才的例子写成:

function Person () {
  setInterval(() => {
    console.log(this);
  },1000);
}

new Person();

没错正是我们想要的，当然如果还不懂的话，其实可以把作用域划分一下:

function Person () {
 ---------person对象作用域,也就是箭头函数的上一级作用域---------
  setInterval(() => {
     ------箭头函数作用域----------
    console.log(this);
      ------箭头函数作用域----------
  },1000);
 ---------person对象作用域,也就是箭头函数的上一级作用域---------
}

new Person();

这样就比较清楚了。最后留下一道给大家自我校验的经典例题:

  以下两个函数执行`new person()`之后的输出如何解释?

 
 function Person () {
      const obj = new Object();
      obj.name = '我是object';
      obj.obj = '我是object';
      obj.getName = () => {
        console.log(this);
      };
      obj.getName();
    }

 function Person () {
      const obj = new Object();
      obj.name = '我是object';
      obj.obj = '我是object';
      obj.getName = function() {
        console.log(this);
      };
      obj.getName();
    }