浅谈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>


页面输出结果:19.png


可以看到上面一共调用了三次函数,前面两次函数都是正常调用,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>


页面输出结果:

20.png


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

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



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


  • 不可以当作构造函数
  • 不可以使用arguments对象,该对象在函数体内不存在
相关文章
|
3月前
ES6之箭头函数
ES6之箭头函数
|
3月前
|
小程序
es6学习笔记(四)箭头函数
es6学习笔记(四)箭头函数
普通函数中的this指向问题解决方案箭头函数
普通函数中的this指向问题解决方案箭头函数
33 0
|
3月前
Es6箭头函数
Es6箭头函数
45 0
|
JavaScript 前端开发
ES6——箭头函数以及this指向
箭头函数以及this指向
94 0
|
网络架构
ES6箭头函数总结
ES6箭头函数总结
ES6箭头函数总结