0

0

javascript如何定义函数_函数表达式和声明有何不同【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-25 17:08:42

|

433人浏览过

|

来源于php中文网

原创

函数声明会被提升到作用域顶部,可提前调用;函数表达式仅变量声明提升(var)或不提升(let/const),提前调用报错。实操中需提前调用选声明,控初始化顺序选const/箭头函数。

javascript如何定义函数_函数表达式和声明有何不同【教程】

函数声明和函数表达式在执行时机上根本不同

JavaScript 会把 function 声明(即函数声明)**提升(hoist)到当前作用域顶部**,所以可以在定义前调用;而函数表达式只是变量赋值,var 声明会被提升但赋值不会,let/const 甚至不提升声明本身——这意味着在定义前调用函数表达式必然报错 TypeError: xxx is not a functionReferenceError

实操建议:

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

  • 需要在定义前调用(比如事件回调、递归入口),优先用函数声明
  • 想控制初始化顺序或避免意外提升,用 const myFn = function() { ... } 或箭头函数
  • 注意:只有 function name() { ... } 形式才算函数声明;const f = function name() { ... } 是带名字的函数表达式,名字只在内部可用(用于调试和递归),不影响外部作用域

name 属性和堆追踪表现不一样

函数声明的 name 属性总是准确反映声明时写的名称;函数表达式是否带名,直接影响错误堆栈和 console.log(myFn.name) 的输出。

实操建议:

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

  • 调试时看到 anonymous,大概率是没给函数表达式命名,加上名字能显著改善 DevTools 中的断点定位和错误堆栈可读性
  • 递归调用函数表达式时,必须写名字(如 const factorial = function fact(n) { return n ),否则内部无法引用自身
  • 箭头函数没有 name 属性(返回空字符串),也不绑定 thisarguments,别指望它替代具名函数表达式做递归

作为参数传入或立即执行时,语法边界容易出错

JS 解析器看到 function 开头的语句,**默认按函数声明处理**;但如果它出现在表达式上下文中(如括号内、赋值右侧、逗号后),才会当作函数表达式。漏掉括号或分号可能触发意外行为。

Rose.ai
Rose.ai

一个云数据平台,帮助用户发现、可视化数据

下载

常见错误现象:

  • function(){}(); 报错:解析器认为这是函数声明,但后面跟 () 不合法
  • var a = function(){}(); 合法:赋值语句右侧强制进入表达式解析模式
  • (function(){}()); 合法:括号让解析器明确进入表达式上下文,这是 IIFE 标准写法
  • !function(){}(); 也合法:一元运算符同样触发表达式解析

性能影响很小,但写法不统一容易引发团队协作歧义——建议始终用括号包裹 IIFE,清晰表明意图。

箭头函数不是“更短的函数表达式”,它没有自己的 this 和 arguments

箭头函数本质是词法绑定的函数表达式变体,它不创建自己的 thisargumentssupernew.target,而是继承外层函数作用域的值。这导致它不能用作构造函数(new (() => {}) 报错),也不能用 call/apply 改变 this

使用场景判断:

  • 需要动态 this(如事件处理器、对象方法),别用箭头函数
  • 写回调且依赖外层 this(如 React 类组件中 onClick={() => this.setState(...)}),箭头函数合适
  • arguments 处理不定参?得改用剩余参数 ...args,因为箭头函数里访问 arguments 会报 ReferenceError

函数声明和函数表达式都支持 arguments,但现代代码更推荐用 ...rest 参数替代——这点与是否匿名无关,纯属语言演进选择。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

564

2023.09.20

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

447

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

606

2023.08.10

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

447

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

606

2023.08.10

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

420

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

541

2024.05.29

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

499

2023.08.04

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号