0

0

javascript中的箭头函数是什么?_它与普通函数有何关键区别?【教程】

夢幻星辰

夢幻星辰

发布时间:2026-01-25 17:40:42

|

930人浏览过

|

来源于php中文网

原创

箭头函数不是普通函数的简写,它没有自己的this、arguments、super和new.target;this继承外层作用域且不可修改,不能作为构造函数,无prototype,不支持arguments和yield,隐式返回需谨慎。

javascript中的箭头函数是什么?_它与普通函数有何关键区别?【教程】

箭头函数不是普通函数的简写替代品,它没有自己的 thisargumentssupernew.target,这是所有区别的根源。

箭头函数没有自己的 this,始终继承外层作用域this

这是最常踩坑的地方。普通函数的 this 取决于调用方式(如 obj.method()this 指向 obj),而箭头函数的 this 在定义时就绑定死,无法被 callapplybind 改变,也不能作为构造函数使用。

常见错误现象:

  • 在事件回调或定时器中用箭头函数访问类实例属性,结果 thisundefined(严格模式)或全局对象(非严格)——其实是因为外层作用域本就没有正确绑定 this
  • 试图用 obj.methodArrow.bind(someObj) 强行改 this,无效

实操建议:

立即学习Java免费学习笔记(深入)”;

  • 需要动态 this 的场景(如对象方法、事件处理器需访问当前实例)——用普通函数
  • 仅作回调且依赖外层 this(如 array.map(x => this.process(x)))——可用箭头函数,但要确认外层 this 已正确绑定(比如类中用 constructor 绑定,或用 class fields 语法 handler = () => {}

箭头函数不能用作构造函数,没有 prototype 属性

调用 new (() => {}) 会直接抛出 TypeError: xxx is not a constructor。它也没有 prototype,所以无法被继承或用于原型链操作。

使用场景限制:

PPT.AI
PPT.AI

AI PPT制作工具

下载
  • 绝不能用来定义类或模拟类行为
  • 不能出现在需要构造函数的地方,比如 customElements.define 的第二个参数必须是普通函数或类
  • 如果你在封装一个工厂函数并希望支持 new 调用,必须用 functionclass

箭头函数没有 arguments 对象,也不支持 yield

在箭头函数内部访问 arguments,得到的是外层函数的 arguments;若外层也没有,则报 ReferenceError。同时,它不能用作 Generator 函数(不支持 function* 语法,也不能在箭头函数里写 yield)。

替代方案:

  • 需要用类数组参数时,统一用剩余参数 ...args —— 这是推荐做法,且兼容箭头与普通函数
  • 需要 Generator 行为(如异步迭代、暂停执行),必须用 function* 普通函数
  • 旧代码中依赖 arguments.callee 实现递归?箭头函数根本不支持,得重构成显式命名函数或使用其他结构

简洁语法带来的隐式返回与单参数省略括号陷阱

箭头函数支持「单表达式隐式返回」:只有当函数体是未加大括号的单个表达式时,才自动返回其结果;一旦加了 {},就必须显式写 return,否则返回 undefined

容易忽略的细节:

  • x => x * 2 返回数值;x => { x * 2 } 返回 undefined(因为 {} 被解析为语句块,不是对象字面量)
  • 想返回对象字面量?必须加小括号:x => ({ id: x }),否则会被当成语句块解析
  • 单参数时可省略括号,但无参或多个参数必须写:() => 42(a, b) => a + b

这种语法糖在链式调用中很顺手,但一旦逻辑稍复杂(比如要加日志、条件分支),就该换回普通函数,避免括号嵌套混乱或隐式返回误判。

真正难的不是记住语法,而是判断「这个函数是否需要独立的执行上下文」——如果答案是肯定的,那就别用箭头函数。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
typedef和define区别
typedef和define区别

typedef和define区别在类型检查、作用范围、可读性、错误处理和内存占用等。本专题为大家提供typedef和define相关的文章、下载、课程内容,供大家免费下载体验。

119

2023.09.26

define的用法
define的用法

define用法:1、定义常量;2、定义函数宏:3、定义条件编译;4、定义多行宏。更多关于define的用法的内容,大家可以阅读本专题下的文章。

389

2023.10.11

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

891

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

32

2025.12.06

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

40

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

67

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

47

2025.11.27

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

3

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号