浅谈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对象,该对象在函数体内不存在
相关文章
|
7月前
ES6之箭头函数
ES6之箭头函数
|
1月前
|
JavaScript
哪些场景适合使用 ES6 的箭头函数?
总之,当需要简洁地定义函数、处理回调函数、避免 `this` 指向问题以及进行函数式编程等场景时,ES6的箭头函数都是一个很好的选择。但需要注意的是,箭头函数也有一些限制,如不能作为构造函数使用等,在使用时需要根据具体情况进行选择。
|
1月前
|
安全 JavaScript 前端开发
es6 箭头函数
【10月更文挑战第26天】ES6箭头函数为JavaScript开发者提供了一种更简洁、更直观的函数定义方式,同时其独特的`this`绑定和无`arguments`对象等特性也使得在一些特定场景下的代码编写更加方便和安全,但在使用时也需要注意其与普通函数的区别,以确保正确地使用和理解箭头函数。
114 62
|
1月前
|
自然语言处理
ES6 中箭头函数和普通函数区别
【10月更文挑战第19天】这些仅是对箭头函数和普通函数区别的一些主要方面进行的详细阐述,实际应用中可能还会有更多具体的细节和情况需要进一步探讨和理解。可以根据自己的需求进一步深入研究和实践,以更好地掌握它们在不同场景下的应用。
36 2
ES6学习(4)箭头函数
ES6学习(4)箭头函数
|
7月前
|
小程序
es6学习笔记(四)箭头函数
es6学习笔记(四)箭头函数
|
7月前
Es6箭头函数
Es6箭头函数
75 0
|
网络架构
ES6箭头函数总结
ES6箭头函数总结
ES6箭头函数总结