javascript函数如何定义与调用_箭头函数与传统函数有哪些不同点【教程】_网络技术

javascript函数如何定义与调用_箭头函数与传统函数有哪些不同点【教程】

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

函数定义分传统函数和箭头函数：传统函数可提升、有this/arguments/new.target，支持new调用；箭头函数无this绑定、无arguments和new.target，不可new，适合简单回调。

函数定义和调用的两种写法必须分清场景

JavaScript 里定义函数不是只有 function 一种方式，const fn = () => {} 这种箭头函数写法在日常开发中更常见，但不能无脑替换。关键看是否需要 this、arguments 或作为构造函数使用。

传统函数声明：function add(a, b) { return a + b; }，可被提升（hoisted），能直接在定义前调用；而函数表达式（含箭头函数）不会被提升，必须先定义再调用。

需要动态绑定 this（比如事件回调、对象方法）→ 用传统函数
只是简单计算或作为回调传入（如 map、filter）→ 箭头函数更简洁且避免 this 失效
要通过 new 实例化 → 只能用传统函数，箭头函数会报 TypeError: xxx is not a constructor

箭头函数没有自己的 this，这点必须手动验证

箭头函数不绑定 this，它沿作用域链向上找外层函数的 this 值。这个特性在对象方法或事件监听器中极易出错。

比如：

const obj = {
  name: 'test',
  regular() { console.log(this.name); }, // 输出 'test'
  arrow: () => { console.log(this.name); } // 输出 undefined（this 指向全局或 module.exports）
};

在类的实例方法中误用箭头函数 → this 指向错误，无法访问实例属性
给 DOM 元素绑定事件时，若用箭头函数，this 不再是触发元素，而是定义时的作用域
调试时可在函数内加 console.log(this) 快速确认绑定结果

arguments 和 new.target 在箭头函数里根本不存在

传统函数内部可用 arguments 获取所有实参，箭头函数里访问 arguments 会报 ReferenceError。同理，new.target 在箭头函数中也无效。

替代方案很明确：

用剩余参数 ...args 替代 arguments（兼容性更好，语义更清晰）
需要判断是否被 new 调用 → 必须用传统函数，箭头函数天生不支持
想在高阶函数里透传参数？别用 arguments，改用 ...args 解构再展开

return 隐式与换行陷阱得靠格式和括号兜底

箭头函数单表达式可省略 {} 和 return，但一旦换行就

容易出错。JS 自动插入分号（ASI）会导致返回 undefined。

比如：

const getObj = () => 
  { a: 1 }; // 实际返回 undefined！因为换行后自动插入分号，{a: 1} 被当成代码块而非对象字面量

想返回对象字面量 → 必须用小括号包裹：() => ({ a: 1 })
多行逻辑必须显式写 {} 和 return，别依赖隐式返回
团队代码规范建议：所有箭头函数统一用 {} + return，避免歧义和协作风险

最常被忽略的是嵌套箭头函数里的 this 链式捕获，以及对象方法中混用两种函数导致的上下文断裂——这些不会报错，但运行时行为和预期差很远。

# javascript # java # js # 代码规范 # 作用域 # 构造函数 # Filter # const # 实参 # map

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

上一篇：仅相差200元！一图看懂REDMI Turbo 5系列新机！

下一篇：如何在 Bootstrap 5 中移除超链接默认下划线样式

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

上一篇：仅相差200元！一图看懂REDMI Turbo 5系列新机！

下一篇：如何在 Bootstrap 5 中移除超链接默认下划线样式