javascript中箭头函数与普通函数区别_何时不适合使用箭头函数？_网络技术

javascript中箭头函数与普通函数区别_何时不适合使用箭头函数？

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

箭头函数无this、不能new、无arguments、不支持yield、不可bind/call/apply、无prototype、参数不可重复；用于对象方法、组件handler、事件绑定、构造函数等场景会出错。

箭头函数没有自己的 `this`，这点必须时刻绷着弦

箭头函数不绑定 this，它会沿作用域链向上找外层函数的 this。这意味着在对象方法、事件回调、定时器中直接用箭头函数，this 往往不是你期待的那个对象。

常见错误现象：

const obj = {
  name: 'Alice',
  regularFn() {
    console.log(this.name); // 'Alice'
  },
  arrowFn: () => {
    console.log(this.name); // undefined（this 指向全局或 undefined）
  }
};
obj.regularFn(); // ✅
obj.arrowFn();   // ❌

对象方法定义不用箭头函数（method() { ... } 或 method: function() { ... }）
Vue/React 组件方法、生命周期钩子中避免用箭头函数声明 handler，否则拿不到组件实例的 this
给 DOM 元素绑事件时，若需访问触发元素（e.currentTarget 或 this），别用箭头函数——它让 this 失效

箭头函数不能用作构造函数，`new` 会直接报错

箭头函数没有 prototype，也没有 [[Construct]] 内部方法，所以无法被 new 调用。

错误信息：TypeError: xxx is not a constructor

需要实例化（比如封装工具类、配置类）时，必须用 function 声明或 class
React.memo 或 React.forwardRef 的参数函数也不能是箭头函数（它们内部会尝试以构造方式调用）
想在函数内用 new.target 判断是否被 new 调用？箭头函数里压根访问不到 new.target

没有 `arguments` 对象，也拿不到 `caller`/`callee`

箭头函数体内访问 arguments，得到的是外层函数的 arguments，不是当前函数的。ES6 之后推荐用剩余参数 ...args，但如果你在写兼容性代码或需要动态读取实参长度/内容（比如实现柯里化、代理函数），就得小心。

示例：

function outer() {
  const arrow = () => console.log(arguments[0]); // 指向 outer 的 arguments
  arrow('oops'); // 输出 outer 调用时的第一个参数，不是 'oops'
}

需要透传所有参数给另一个函数（如装饰器、日志包装）时，普通函数 + arguments 或显式剩余参数更可控
使用 bind、call、apply 改变执行上下文？箭头函数无视这些调用方式——它 this 和 arguments 都“冻结”在外层了

没有原型、不能用 `yield`，也不支持重复参数名

这些限制大多属于“用了就报错”，但容易在迁移旧代码或快速重构时踩坑：

定义生成器函数？function* 是唯一选择，箭头函数不支持 yield
需要检查 fn.prototype（比如某些库靠它判断是否可实例化）？箭头函数的 prototype 是 undefined
函数参数含重复名（如 (a, a) => {}）在严格模式下会报 SyntaxError；普通函数在非严格模式下允许，但箭头函数一律不允许

真正容易被忽略的，是「箭头函数看起来更短，就下意识替换所有 function」——结果在 Vue 方法、React 事件、类实例方法、需要 arguments 的工具函数里悄悄埋雷。它不是语法糖，是语义不同的函数类型。

# vue # react # javascript # es6 # java # app # 工具 # 区别 # 作用域

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

上一篇：Bing国际版多设备同步入口-Bing网页版跨平台使用链接

下一篇：VSCode自定义编辑器实现

相关栏目网站优化
网络推广
网络技术
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

上一篇：Bing国际版多设备同步入口-Bing网页版跨平台使用链接

下一篇：VSCode自定义编辑器实现

javascript中箭头函数与普通函数区别_何时不适合使用箭头函数？

箭头函数没有自己的 this，这点必须时刻绷着弦

箭头函数不能用作构造函数，new 会直接报错

没有 arguments 对象，也拿不到 caller/callee

没有原型、不能用 yield，也不支持重复参数名

箭头函数没有自己的 `this`，这点必须时刻绷着弦

箭头函数不能用作构造函数，`new` 会直接报错

没有 `arguments` 对象，也拿不到 `caller`/`callee`

没有原型、不能用 `yield`，也不支持重复参数名