浅谈ES6箭头函数this指向

前言

如果在面试中被问到ES6的相关知识，那么箭头函数是肯定会被问到的。很多小伙伴可能对箭头函数只停留在表面，比如面试官会问“箭头函数和正常函数的区别？”、”箭头函数的this指向哪里“。可能很多小伙伴会回答指向执行上下文，这是很多书面解答，也是很多小伙伴死记硬背的，今天我以代码实例给大家演示以下箭头函数的this指向。

1.正常函数this指向

正常函数的this指向可以用一句话简单概括：

this在运行时确定，即指向函数调用对象，除非利用call、apply等方法改变this指向。

虽然上面那句话不是那么完善，但是也足以大概知道正常函数调用时的this指向哪里了，下面我们再来看一段代码来理解，代码如下：

<script>
  var objA = {
    name: "张三",
    age: 24,
    objAFun: function () {
      console.log("姓名", this.name)
    }
  }
  var objB = {
    name: "李四",
    age: 25,
    objBFun: function () {
      console.log("姓名", this.name)
    }
  }

  objA.objAFun(); // 姓名 张三
  objB.objBFun(); // 姓名 李四

  objA.objAFun.call(objB); // 姓名 李四
</script>

页面输出结果：

可以看到上面一共调用了三次函数，前面两次函数都是正常调用，this也是指向的调用者对象，第一个是objA调用的，所以this指向了objA，第二个同理。但是第三个我们通过call()方法改变了this的指向，所以输出了李四。

2.箭头函数this指向

箭头函数的this指向也可以用一句话简单的概括：

箭头函数的this指向于函数作用域所在的对象

<script>
  var name = "我是windown对象";
  var objA = {
    name: "张三",
    age: 24,
    objAFun: () => {
      console.log("姓名", this.name)
    }
  }
  var objB = {
    name: "李四",
    age: 25,
    objBFun: () => {
      console.log("姓名", this.name)
    }
  }

  objA.objAFun(); // 姓名 张三
  objB.objBFun(); // 姓名 李四

  objA.objAFun.call(objB); // 姓名 李四
</script>

页面输出结果：

由上面可以看出，无论怎么调用箭头函数，输出的结果都是最外层的name，刚好印证了刚刚那句话：

箭头函数的this指向于函数作用域所在的对象

3.使用箭头函数注意事项

• 不可以当作构造函数
• 不可以使用arguments对象，该对象在函数体内不存在。