讲师中心 微信公众号

工具推荐

视频效率加速
Laper
Laper

剧本策划到成片协作

Seko
Seko

AI短剧一键生成成片

AniShort
AniShort

AI短剧协同制作平台

立刻MV
立刻MV

低成本歌曲 MV、视频生成

JavaScript箭头函数与普通函数有何区别【教程】

陌晨大大_8384

陌晨大大_8384

发布时间:2026-01-27 16:35:02

|

578人浏览过

|

来源于php中文网

原创

箭头函数无自有this、不可构造、无arguments、无yield、返回值需注意隐式规则:其this沿用外层,不能new调用,不支持arguments和yield,单表达式自动返回,对象字面量须用小括号包裹。

javascript箭头函数与普通函数有何区别【教程】

箭头函数没有自己的 this

这是最常踩坑的一点:箭头函数不绑定自己的 this,而是沿用外层作用域的 this 值。普通函数每次调用时会根据调用方式(如 obj.fn()、fn.call(obj))动态确定 this。

典型问题场景:

  • 对象方法中写箭头函数 → this 指向外层(通常是 window 或 undefined,严格模式下)
  • 事件回调里用箭头函数 → 本意是绑定当前实例,但若外层 this 不对,就失效
  • 想用 call/apply 强制改变 this → 对箭头函数完全无效

示例:

const obj = {
  name: 'Alice',
  regular() { return this.name },
  arrow: () => this.name
};
obj.regular(); // 'Alice'
obj.arrow();   // undefined(非严格模式下可能是 window.name)

箭头函数不能作为构造函数

调用 new 箭头函数会直接抛出 TypeError: xxx is not a constructor。因为箭头函数没有 [[Construct]] 内部方法,也没有 prototype 属性。

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

这意味着:

  • 不能用 new 实例化
  • 不能用在需要原型链继承的场景(如 Class 的静态方法中返回新实例时需谨慎)
  • 无法通过 instanceof 判断类型(它连 prototype 都没有)

替代方案:必须用普通函数或 class 定义构造逻辑。

Expanso yaml-to-json
Expanso yaml-to-json

使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。

下载

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

箭头函数内部访问 arguments 会报 ReferenceError,因为它不创建自己的 arguments 对象。同理,它不能用 yield,因此不能作为 Generator 函数。

常见应对方式:

  • 用剩余参数 ...args 替代 arguments
  • 需要 yield 就必须改用 function* 声明
  • 在需要动态参数处理又想用箭头函数时,得提前把参数收进数组再传入

示例:

const bad = () => console.log(arguments); // ReferenceError
const good = (...args) => console.log(args); // ✅

箭头函数的返回值隐式规则容易误判

当箭头函数体是单个表达式且省略大括号时,会自动返回该表达式的值;但一旦用了大括号,就必须显式写 return,否则返回 undefined。

这个差异在对象字面量返回时尤其危险:

  • x => ({a: 1}) → 正确返回对象(小括号避免被解析为代码块)
  • x => {a: 1} → 返回 undefined(这其实是代码块,a: 1 是标签语句)
  • x => ({a: 1}) 和 x => return {a: 1} 看似一样,但后者语法错误(箭头函数里不能用 return 关键字除非有大括号)

最容易忽略的是:对象字面量必须包裹在小括号里,否则 JS 解析器会把它当作函数体的开始。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

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

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

4536

2024.01.03

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

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

326

2025.12.06

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4916

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1435

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1918

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10463

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

1040

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

3124

2023.09.04

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

60

2026.11.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn