JavaScript中的函数声明、函数表达式与箭头函数有何本质区别?

函数声明存在提升,可先调用后定义;函数表达式赋值给变量,无完整提升;箭头函数无自身this,继承外层作用域,适用于简洁回调。

javascript中的函数声明、函数表达式与箭头函数有何本质区别?

函数声明、函数表达式和箭头函数在JavaScript中虽然都能创建函数,但它们在定义方式、提升机制、this绑定以及使用场景上有本质区别

函数声明:存在变量提升,可提前调用

函数声明是通过 function 关键字定义的,它会在代码执行前被“提升”到当前作用域顶部。

这意味着你可以在声明之前调用它:

console.log(add(2, 3)); // 输出 5function add(a, b) { return a + b; }

这种提升仅适用于函数声明本身,不适用于函数表达式或箭头函数。

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

函数表达式:赋值给变量,不会被完整提升

函数表达式是将一个匿名或具名函数赋值给变量的形式:

const multiply = function(a, b) { return a * b; };

此时,变量名会被提升,但函数体不会。如果在赋值前调用,会报错:

// 报错:Cannot access ‘multiply’ before initializationconsole.log(multiply(2, 3));const multiply = function(a, b) { return a * b; };

这类函数更灵活,常用于回调、立即执行函数(IIFE)等场景。

箭头函数:无自己的this,语法简洁

箭头函数使用 => 语法,不绑定自己的 thisargumentssupernew.target

它的 this 继承自外层作用域:

const obj = {
  value: 42,
  normalFunc: function() { console.log(this.value); },
  arrowFunc: () => { console.log(this.value); }
};
obj.normalFunc(); // 输出 42
obj.arrowFunc(); // 输出 undefined(因为 this 指向外层)

箭头函数不能用作构造函数,也不能使用 yield,因此不能生成器函数。

基本上就这些关键差异。选择哪种方式取决于是否需要提升、对 this 的控制需求,以及代码风格偏好。函数声明适合工具函数,函数表达式适合动态赋值,箭头函数适合简洁回调和保持 this 上下文。

以上就是JavaScript中的函数声明、函数表达式与箭头函数有何本质区别?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1529545.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 21:13:13
下一篇 2025年12月20日 21:13:23

相关推荐

发表回复

登录后才能评论
关注微信