浅谈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对象,该对象在函数体内不存在
相关文章
|
15天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
7天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
10天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
927 29
|
9天前
|
机器学习/深度学习 人工智能 搜索推荐
万字长文深度解析最新Deep Research技术:前沿架构、核心技术与未来展望
近期发生了什么自 2025 年 2 月 OpenAI 正式发布Deep Research以来,深度研究/深度搜索(Deep Research / Deep Search)正在成为信息检索与知识工作的全新范式:系统以多步推理驱动大规模联网检索、跨源证据。
668 52
|
3天前
|
监控 BI 数据库
打工人救星!来看看这两家企业如何用Quick BI让业务更高效
Quick BI专业版监控告警助力企业高效运作,通过灵活配置规则与多渠道推送,让数据异常早发现、快响应,推动业务敏捷决策与持续增长。
打工人救星!来看看这两家企业如何用Quick BI让业务更高效
|
7天前
|
文字识别 测试技术 开发者
Qwen3-VL新成员 2B、32B来啦!更适合开发者体质
Qwen3-VL家族重磅推出2B与32B双版本,轻量高效与超强推理兼备,一模型通吃多模态与纯文本任务!
583 11