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

javascript箭头函数是什么_和普通函数有何不同

浅涛大大_1596

浅涛大大_1596

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

|

505人浏览过

|

来源于php中文网

原创

箭头函数无独立this绑定,沿作用域链继承外层普通函数的this,故不可用作对象方法、事件回调或构造函数;无arguments对象和yield支持;单表达式自动返回,块级需显式return。

javascript箭头函数是什么_和普通函数有何不同

箭头函数没有自己的 this 绑定

这是最常踩坑的一点:箭头函数不创建自己的 this,而是沿作用域链向上找外层普通函数的 this。这意味着它不能用作对象方法、事件回调(需动态 this 时)、或构造函数。

常见错误现象:

const obj = {
  value: 42,
  normalFunc() { console.log(this.value); }, // 输出 42
  arrowFunc: () => { console.log(this.value); } // 输出 undefined(在非严格模式下可能是 globalThis)
};
如果在浏览器中执行,this 指向 windowundefined(严格模式),而非 obj

  • 需要动态绑定 this 的场景(如 DOM 事件监听器、Vue/React 方法)慎用箭头函数
  • 想让函数继承外层 this(比如在 setTimeout 里保持当前对象上下文),箭头函数反而更安全
  • 类字段中写箭头函数(handleClick = () => {})正是利用了这点,避免手动 bind

箭头函数不能用 new 调用

它没有 [[Construct]] 内部方法,也没有 prototype 属性,所以调用 new myArrowFunc() 会直接抛出 TypeError: myArrowFunc is not a constructor

对比:

  • function Person(name) { this.name = name; } → 可以 new Person('Alice')
  • const Person = (name) => { this.name = name; }new Person('Alice') 报错
  • 即使函数体为空,const fn = () => {}; 依然不可构造

没有 arguments 对象,也不支持 yield

箭头函数内部访问 arguments 会报 ReferenceError,因为它根本不绑定该标识符——它会去外层函数找。同理,它不能用作 Generator 函数(不支持 function* 语法,也不能在函数体中写 yield)。

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

React Flow Architecture
React Flow Architecture

提供使用 React Flow 构建基于节点的 UI 的架构指导,适用于设计基于流程的应用程序,在状态管理、交互和性能等方面进行决策。

下载

替代方案:

  • 用剩余参数 ...args 替代 arguments(推荐,更语义化)
  • 需要 yield 就必须写成 function* 普通函数
  • 嵌套多层箭头函数时,arguments 查找可能跨多级外层,容易误判来源

简写语法带来的隐式返回限制

当箭头函数体是单个表达式(无花括号)时,自动隐式返回结果;但一旦加了 {},就必须显式写 return,否则返回 undefined

示例:

const add = (a, b) => a + b;           // ✅ 返回和
const log = (x) => { console.log(x); }; // ❌ 不返回任何值(undefined)
const safeLog = (x) => { console.log(x); return x; }; // ✅ 显式返回

这个差异在链式调用或 Promise 处理中极易引发 bug:漏写 return 会导致后续 .then() 接收到 undefined

容易被忽略的地方:解构赋值、对象字面量返回必须用括号包裹,否则 JS 会把 {} 解析为代码块而非对象:

const makeObj = () => ({ a: 1, b: 2 }); // ✅ 正确
const broken = () => { a: 1, b: 2 };     // ❌ 是代码块,标签语句,返回 undefined

热门AI工具

更多
DeepSeek

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

超级简历WonderCV

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

立刻MV
立刻MV Hot

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

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

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

墨刀AI
墨刀AI Hot

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

豆包大模型

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

Loomy
Loomy Hot

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

蛙蛙写作

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

相关专题

更多
mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

11100

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

943

2024.02.23

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

6690

2025.06.11

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

2642

2025.08.07

c语言const用法
c语言const用法

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

1918

2023.09.20

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

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

3776

2023.06.20

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

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

1195

2023.07.28

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

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

1538

2023.08.03

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

20

2026.09.23

热门下载

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

精品课程

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

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 16.7万人学习

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

共26课时 | 2.4万人学习

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

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