Lazy loaded image
前端开发
💘JS 箭头函数
Words 837Read Time 3 min
2026-5-13
2026-5-14
type
Post
status
Published
date
May 13, 2026
slug
arrowfunc
summary
箭头函数不仅仅是编写简洁代码的“捷径”。它还具有非常特殊且有用的特性。
tags
JS
笔记
category
前端开发
icon
password
类型
日期
标签
概述
状态
进行中

基础

基本语法

箭头函数可以是 async 的,方法是在表达式前加上 async 关键字。
例子
(a, b) => a + b 表示一个函数接受两个名为 a 和 b 的参数。在执行时,它将对表达式 a + b 求值,并返回计算结果;若只有一个参数,则可以省略参数外的括号;若没有参数,括号也必须保留置空。

多行箭头函数

带有多行的表达式或语句,可以使用花括号将它们括起来。主要区别在于,用花括号括起来之后,需要包含 return 才能返回值(就像常规函数一样)。

进阶

JavaScript 充满了我们需要编写在其他地方执行的小函数的情况。
例如:
  • arr.forEach(func) —— forEach 对每个数组元素都执行 func
  • setTimeout(func) —— func 由内建调度器执行。
  • ………
当我们希望创建一个函数将其传递到另一个地方,又不想离开当前上下文,这时候就轮到箭头函数上场了。

箭头函数没有 “this”

箭头函数没有 this。如果访问 this,则会从外部获取。 例如,我们可以使用它在对象方法内部进行迭代:
⚠️
不能对箭头函数进行 new 操作
不具有 this 自然也就意味着另一个限制:箭头函数不能用作构造器(constructor)。不能用 new 调用它们。
💡
箭头函数 VS bind
箭头函数 => 和使用 .bind(this) 调用的常规函数之间有细微的差别:
  • bind(this) 创建了一个该函数的“绑定版本”。
  • 箭头函数 => 没有创建任何绑定。箭头函数只是没有 thisthis 的查找与常规变量的搜索方式完全相同:在外部词法环境中查找。

箭头函数没有 “arguments”

当我们需要使用当前的 this 和 arguments 转发一个调用时,这对装饰器(decorators)来说非常有用。
 
上一篇
在线简历
下一篇
JS - DOM 语法