箭头函数是什么?JS箭头函数对比解析
时间:2026-01-24 13:22:30 207浏览 收藏
你在学习文章相关的知识吗?本文《箭头函数是什么?JS箭头函数与普通函数区别解析》,主要介绍的内容就涉及到,如果你想提升自己的开发能力,就不要错过这篇文章,大家要知道编程理论基础和实战操作都是不可或缺的哦!
箭头函数是ES6引入的简洁函数语法,无独立this、arguments、prototype,不能作构造函数,不绑定动态this,适合简短回调;有隐式返回和剩余参数替代arguments。

箭头函数是 ES6 引入的一种简洁的函数定义语法,它没有自己的 this、arguments、super 或 new.target,而是继承自外层作用域。它更轻量,适合写简短的回调或逻辑表达式,但不适用于需要动态 this 的场景(比如对象方法、构造函数、事件监听器等)。
箭头函数没有独立的 this
普通函数调用时,this 取决于调用方式(如对象调用、call/apply、事件触发等);而箭头函数的 this 始终绑定定义时所在上下文的 this,无法被改变。
例如:
const obj = {
name: 'Alice',
regular() { console.log(this.name); }, // 输出 'Alice'
arrow: () => { console.log(this.name); } // 输出 undefined(this 指向全局或模块顶层)
};
obj.regular(); // 'Alice'
obj.arrow(); // undefined(非严格模式下可能是 globalThis)
不能作为构造函数使用
箭头函数没有 prototype 属性,也没有 [[Construct]] 内部方法,因此不能用 new 调用,否则会报错。
const fn = () => {};→new fn()抛出TypeError: fn is not a constructor- 普通函数:
function Fn() {}→new Fn()正常创建实例
没有 arguments 对象
箭头函数内部访问 arguments 会沿作用域链向上查找,实际获取的是外层函数的 arguments(如果存在),否则为 undefined。推荐用剩余参数 ...args 替代。
function outer() {
const arrow = () => console.log(arguments[0]);
arrow('hello'); // 输出 'hello'(取自 outer 的 arguments)
}
outer('hello');
语法更简洁,隐式返回
当函数体只有一条表达式且无大括号时,箭头函数自动返回该表达式结果,无需 return 关键字。
x => x * 2等价于function(x) { return x * 2; }(a, b) => a + b→ 多参数需括号,单参数可省略() => 'hi'→ 无参必须写空括号
到这里,我们也就讲完了《箭头函数是什么?JS箭头函数对比解析》的内容了。个人认为,基础知识的学习和巩固,是为了更好的将其运用到项目中,欢迎关注golang学习网公众号,带你了解更多关于的知识点!
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
309 收藏
-
486 收藏
-
409 收藏
-
273 收藏
-
241 收藏
-
405 收藏
-
240 收藏
-
197 收藏
-
454 收藏
-
325 收藏
-
118 收藏
-
437 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习