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

javascript的箭头函数与传统函数有何不同?【教程】

冬枫姑娘_4282

冬枫姑娘_4282

发布时间:2026-01-28 12:35:02

|

733人浏览过

|

来源于php中文网

原创

箭头函数没有自己的this、arguments、super或new.target,不能用作构造函数;其this继承自外层词法作用域,不动态绑定;无arguments对象,不支持yield、prototype及caller/callee。

javascript的箭头函数与传统函数有何不同?【教程】

箭头函数没有自己的 this、arguments、super 或 new.target,也不能用作构造函数——这是最根本的区别,不是语法糖那么简单。

箭头函数的 this 永远继承自外层作用域

传统函数的 this 在调用时动态绑定(取决于怎么被调用),而箭头函数根本不绑定 this,它直接从定义时的词法作用域“捕获”外层的 this 值。

常见错误现象:
在对象方法中用箭头函数写回调,结果 this 指向意外(比如指向全局或 undefined):

const obj = {
  name: 'test',
  regular() {
    setTimeout(function() {
      console.log(this.name); // undefined(非严格模式下是 global)
    }, 100);
  },
  arrow() {
    setTimeout(() => {
      console.log(this.name); // 'test' —— 因为箭头函数继承了 arrow() 执行时的 this
    }, 100);
  }
};

使用场景:
– 事件监听器、定时器、Promise 回调中避免 bind(this) 或缓存 const self = this
– React 类组件的事件处理函数(但注意:现代 React 更推荐函数组件 + useCallback)

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

箭头函数不能用 new 调用,也没有 prototype

尝试用 new 调用箭头函数会直接抛出 TypeError: xxx is not a constructor。

原因:
– 箭头函数内部没有 [[Construct]] 内部方法
– Function.prototype 上的方法(如 call、apply、bind)对它无效(虽然能调用,但不会改变 this)
– arrowFn.prototype 是 undefined

Java注释规范Skills
Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式,或要求按照代码注释规范处理 Java 文件时,使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则,并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括:补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

所以这些写法都错:
– new (() => {})
– (() => {}).prototype
– (() => {}).bind(obj)(虽不报错,但无实际效果)

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

在箭头函数体内访问 arguments,得到的是外层函数的 arguments(如果外层也没有,就报 ReferenceError)。

替代方案:
– 用剩余参数 ...args(推荐,更语义化)
– 或显式命名参数(适合固定参数个数)

其他限制:
– 不能用作 Generator 函数(不支持 function* 语法,也不支持 yield)
– 没有 caller 和 callee 属性(已被废弃,但传统函数仍可访问)
– 不能用 yield,哪怕嵌套在 generator 内部也不行

什么时候不该用箭头函数

以下情况必须用传统函数:
– 定义对象方法(尤其是需要正确 this 指向当前对象时)
– 需要 arguments 对象且无法改用剩余参数时(极少见)
– 显式构造实例(new MyClass())
– Vue 选项对象中的 methods、computed、生命周期钩子(Vue 2/3 都依赖 this 绑定)
– 作为事件监听器并需通过 event.currentTarget 或 this 访问 DOM 元素(除非你手动传参)

容易被忽略的一点:
箭头函数的“简洁”可能掩盖执行上下文的丢失——尤其在团队协作或维护老代码时,看到 () => {} 很容易默认它“和普通函数一样”,结果调试半天才发现 this 不是想要的那个。

热门AI工具

更多
DeepSeek

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

豆包大模型

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

立刻MV
立刻MV Hot

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

Atoms
Atoms Hot

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

WorkBuddy

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

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

相关专题

更多
c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2278

2023.09.20

undefined是什么
undefined是什么

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

12045

2023.07.31

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

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

5527

2024.08.14

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

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

2516

2025.12.25

function是什么
function是什么

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

3260

2023.08.04

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

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

554

2023.10.07

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

6521

2024.08.14

promise的用法
promise的用法

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

4580

2023.10.12

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习

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

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