讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript函数如何定义_提升和作用域有何奥秘【教程】

风磊大大_6162

风磊大大_6162

发布时间:2026-02-01 11:32:43

|

999人浏览过

|

来源于php中文网

原创

函数声明完全提升(名与体),可提前调用;函数表达式仅变量名提升(var)或不提升(let/const),提前调用报错;闭包依赖定义时词法作用域,非调用时动态作用域。

javascript函数如何定义_提升和作用域有何奥秘【教程】

JavaScript 函数定义本身不难,但 var 声明的函数表达式不会被提升,只有函数声明(function name() {})才真正“提升”——这是绝大多数人混淆的起点。

函数声明 vs 函数表达式:提升行为完全不同

函数声明会被**完全提升**(包括函数名和函数体),可在定义前调用;函数表达式只提升变量名(若用 var),函数体仍留在原地,提前调用会报 TypeError: xxx is not a function。

常见错误现象:

  • foo(); // TypeError,而 function foo() { console.log('ok'); } 写在后面
  • 误以为所有 function 关键字都提升,没注意它是否是语句(声明)还是赋值右侧(表达式)

实操建议:

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

  • 想安全提升 → 用函数声明:function handleClick() { ... }
  • 想控制初始化时机或避免全局污染 → 用 const handleClick = function() { ... };(此时无提升,必须先定义后调用)
  • 箭头函数永远是表达式,从不提升:const fn = () => {};

作用域链:闭包不是魔法,是词法作用域的自然结果

函数的作用域在**定义时**就确定了,不是调用时。这意味着内部函数能持续访问其外层函数的变量,哪怕外层已执行完毕。

使用场景:

  • 模块私有变量(如 IIFE 中返回对象方法)
  • 事件监听器中保存循环索引(for (let i = 0; i console.log(i), 0); 有效,但用 var 就失效)

容易踩的坑:

  • 在循环中用 var 定义函数并引用计数器 → 所有函数共享同一个 i 变量
  • 误以为 this 或 arguments 会被闭包捕获 → 它们是动态绑定的,不是词法环境的一部分

let/const 声明的函数表达式:没有提升,但有暂时性死区

用 let fn = function() {}; 或 const fn = () => {}; 定义函数时,变量名不会被提升,且在声明前访问会直接抛 ReferenceError,不是 undefined。

性能 / 兼容性影响:

  • 现代引擎对 let/const 函数表达式优化良好,无需担心性能损失
  • IE 不支持 let/const,若需兼容,只能退回到 var + 显式声明顺序管理
  • ESLint 规则 no-use-before-define 对这类写法更友好,能提前暴露调用顺序问题

真正复杂的不是“有没有提升”,而是混用 var/let、声明/表达式、以及嵌套作用域中变量重名时,作用域链查找路径变得难以推演——这时候别猜,打开 DevTools 的 Scope 面板看实际绑定。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

相关专题

更多
typedef和define区别
typedef和define区别

typedef和define区别在类型检查、作用范围、可读性、错误处理和内存占用等。本专题为大家提供typedef和define相关的文章、下载、课程内容,供大家免费下载体验。

313

2023.09.26

define的用法
define的用法

define用法:1、定义常量;2、定义函数宏:3、定义条件编译;4、定义多行宏。更多关于define的用法的内容,大家可以阅读本专题下的文章。

619

2023.10.11

c语言const用法
c语言const用法

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

2158

2023.09.20

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

4193

2025.07.29

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

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

836

2023.08.08

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

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

6103

2024.05.29

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

11705

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5507

2024.08.14

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn