javascript箭头函数是什么_它和普通函数有哪些区别？_网络技术

javascript箭头函数是什么_它和普通函数有哪些区别？

发布时间 - 2026-01-04 00:00:00 点击率：次

箭头函数没有自己的this，继承外层词法作用域的this；不能用作构造函数，无prototype、arguments、caller、callee、yield，也不支持new调用，适用于无需独立this和构造能力的场景。

箭头函数没有自己的 `this`，它继承外层作用域的 `this`

这是最常踩坑的一点。普通函数的 this 在调用时动态绑定（取决于怎么调用），而箭头函数压根不绑定 this，它直接从定义时的词法作用域向上查找 this 值。

典型问题场景：给 DOM 元素绑定事件、在对象方法中使用定时器、Vue/React 组件里写回调。

普通函数：

const obj = {
  name: 'Alice',
  say: function() { console.log(this.name) }
}
obj.say() // 'Alice'；但 setTimeout(obj.say, 100) 会输出 undefined（因为 this 指向全局）

箭头函数：

const obj = {
  name: 'Alice',
  say: () => { console.log(this.name) } // 这里的 this 是定义时外层的 this，不是 obj
}
// 即使调用 obj.say()，也几乎肯定不是你想要的结果

箭头函数不能用作构造函数，也没有 `prototype` 和 `arguments`

它没有 [[Construct]] 内部方法，所以不能用 new 调用；同时没有 prototype 属性，也不能被原型链继承；也没有独立的 arguments 对象（得靠 rest 参数 ...args 替代）。

报错示例：

const Arrow = () => {}
new Arrow() // TypeError: Arrow is not a constructor

替代 arguments：

function old(a, b) { console.log(arguments[0]) }
const arrow = (...args) => { console.log(args[0]) }

箭头函数没有 `arguments`、`caller`、`callee`，也不支持 `yield`

这些是普通函数的特有属性或能力。箭头函数设计初衷就是“轻量级函数表达式”，不承担构造、动态参数捕获或协程职责。

arguments 不可用 → 必须用 rest 参数；
caller/callee 在严格模式下本就禁用，但箭头函数彻底没这俩属性；
yield 不能用 → 要写生成器必须用 function*，不能写 () => yield；
没有 name 属性（或为 ""），调试时堆栈里显示为 anonymous。

什么时候该用箭头函数？记住两个关键信号

一是「不需要自己的 this」，二是「不需要被 new 调用」。常见于：数组方法回调（map/filter/reduce）、事件监听器（当需要闭包访问外层变量时）、Promise 链中的 then 回调。

推荐用法：

[1, 2, 3].map(x => x * 2)
button.addEventListener('click', () => this.handleClick()) // this 指向组件实例

不该用的场景：

const utils = {
  now() { return Date.now() },
  delay: () => setTimeout(this.now, 100) // ❌ this.now 是 undefined，因为箭头函数的 this 不是 utils

真正容易被忽略的是：箭头函数的简洁性会掩盖它对执行上下文的“无感”——它不关心你怎么调用它，只认自己出生的地方。写之前先问一句：这里需要自己的 this 吗？需要被 new 吗？需要动态参数吗？答案只要有一个“是”，就别用箭头函数。

# vue # react # javascript # java # 栈 # 区别 # 作用域 # red

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Python高性能Web框架对比_UVLoop与asynci

下一篇：K6 浏览器测试中页面重定向与导航等待失效的解决方案

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Python高性能Web框架对比_UVLoop与asynci

下一篇：K6 浏览器测试中页面重定向与导航等待失效的解决方案