讲师中心 微信公众号
AI工具推荐 视频效率加速

什么是箭头函数_javascript中它与普通函数有何不同?

雨宇姑娘_5170

雨宇姑娘_5170

发布时间:2025-12-26 19:25:02

|

650人浏览过

|

来源于php中文网

原创

箭头函数是JavaScript中语法简洁、this继承外层、无arguments、不可new调用、无prototype的函数形式,适用于回调场景,但不适用于构造函数、需要动态this或原型操作的场合。

什么是箭头函数_javascript中它与普通函数有何不同?

箭头函数是 JavaScript 中定义函数的一种简洁写法,用 => 符号代替 function 关键字。它不只是语法糖,更在 this、arguments、new 调用等行为上与普通函数有本质区别。

没有自己的 this

箭头函数不绑定自己的 this,而是**继承外层作用域的 this 值**,且不可被修改(比如用 call、apply、bind 改变)。

  • 普通函数:每次调用时根据调用方式决定 this(如对象方法调用 → 指向该对象;独立调用 → 指向全局或 undefined(严格模式))
  • 箭头函数:this 在定义时就固定了,和外层函数或全局作用域一致

常见用途:避免在回调中丢失 this,比如事件监听、定时器、Promise 链中:

✅ 推荐(this 指向 class 实例):
class Button {
  constructor() {
    this.label = '点击我';
  }
  init() {
    // 箭头函数自动捕获外层 this
    document.addEventListener('click', () => {
      console.log(this.label); // 正确输出 '点击我'
    });
  }
}

没有 arguments 对象

箭头函数内部访问不到 arguments,但可以使用 **剩余参数(...args)** 替代。

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

JavaStoryDevelop
JavaStoryDevelop

你接手一个需求时,是不是经常这样:"改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续";这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境(JDK、Spring Boot、ORM、数据库、前端框架),记在

下载
  • 普通函数:可直接用 arguments 获取所有实参(类数组对象)
  • 箭头函数:arguments 是引用外层函数的,若外层也没有,则报错;必须用 ...args
✅ 替代写法:
// 普通函数
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b, 0);
}
<p>// 箭头函数(推荐)
const sum = (...args) => args.reduce((a, b) => a + b, 0);

不能作为构造函数使用

箭头函数没有 prototype 属性,也不支持 new 调用,否则会抛出错误。

  • 普通函数:可被 new 调用,创建实例对象
  • 箭头函数:调用 new fn() 直接报 TypeError: xxx is not a constructor

所以类、工厂函数、需要原型链的场景,必须用普通函数(或 class)。

没有 prototype 和 super(不能用于类方法定义)

虽然箭头函数可以赋值给对象属性,但它本身不是“方法”,没有 prototype,也不能在 class 内部用箭头函数定义原型方法(它会变成实例属性上的函数,且无法被子类继承覆盖)。

  • 普通函数方法:定义在原型上,可被继承和重写
  • 箭头函数写在 class 里:只是绑定了 this 的实例属性,属于“私有行为”,不参与原型机制
⚠️ 注意:
class Counter {
  constructor() {
    this.count = 0;
  }
  // ✅ 正常方法(在原型上)
  increment() {
    this.count++;
  }
  // ⚠️ 不推荐作方法(绑定到实例,非原型,且无法被 super 调用)
  decrement = () => {
    this.count--;
  };
}

基本上就这些。箭头函数适合写简短回调、避免 this 失控,但涉及构造、动态上下文、需要 arguments 或原型操作时,就得用普通函数。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
豆包大模型

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

DeepSeek

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

立刻MV
立刻MV Hot

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

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

WorkBuddy

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

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

相关专题

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

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

3936

2024.01.03

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

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

306

2025.12.06

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

11965

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5507

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

2516

2025.12.25

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

3140

2023.08.04

js函数function用法
js函数function用法

js函数function用法有:1、声明函数;2、调用函数;3、函数参数;4、函数返回值;5、匿名函数;6、函数作为参数;7、函数作用域;8、递归函数。本专题提供js函数function用法的相关文章内容,大家可以免费阅读。

514

2023.10.07

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

4460

2023.10.12

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

0

2026.10.21

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

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