0

0

了解 JavaScript 中的提升:综合指南

霞舞

霞舞

发布时间:2024-10-17 20:48:24

|

958人浏览过

|

来源于dev.to

转载

了解 javascript 中的提升:综合指南

javascript 中的提升

提升是一种行为,其中变量和函数声明在之前被移动(或“提升”)到其包含范围(全局范围或函数范围)的顶部代码被执行。这意味着您可以在代码中实际声明变量和函数之前使用它们。

变量提升

变量

  • 用 var 声明的变量被提升到其作用域的顶部,但它们的值直到代码中发生赋值的地方才会被初始化。
console.log(x); // undefined
var x = 5;
console.log(x); // 5

让和常量

  • 用 let 和 const 声明的变量也会被提升,但会被放置在“临时死区”中,直到到达它们的声明为止。在声明之前访问它们将导致引用错误。
console.log(y); // referenceerror: cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // referenceerror: x is not defined

函数提升

传统功能

  • 函数声明被完全提升,这意味着声明和函数体都被移动到作用域的顶部。这允许您在代码中声明函数之前调用该函数。
sayhello(); // "hello!"
function sayhello() {
  console.log("hello!");
}
  • 相反,函数表达式(其中将函数分配给变量)仅作为变量提升,因此在初始化变量之前调用它们将导致未定义或类型错误。
greet(); // typeerror: greet is not a function
var greet = function () {
  console.log("hi!");
};

greet(); // referenceerror: cannot access 'one' before initialization
let greet = function () {
  console.log("hi!");
};

箭头功能

  • 相反,函数表达式(其中将函数分配给变量)仅作为变量提升,因此在初始化变量之前调用它们将导致未定义或类型错误。
greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

暂时死区 (tdz)

使用 let 和 const 声明的变量存在临时死区 (tdz),因为 javascript 旨在防止您在声明和初始化这些变量之前访问它们。

杰易OA办公自动化系统6.0
杰易OA办公自动化系统6.0

基于Intranet/Internet 的Web下的办公自动化系统,采用了当今最先进的PHP技术,是综合大量用户的需求,经过充分的用户论证的基础上开发出来的,独特的即时信息、短信、电子邮件系统、完善的工作流、数据库安全备份等功能使得信息在企业内部传递效率极大提高,信息传递过程中耗费降到最低。办公人员得以从繁杂的日常办公事务处理中解放出来,参与更多的富于思考性和创造性的工作。系统力求突出体系结构简明

下载

为什么 var 和 let、const 在提升中表现不同

  • 这是因为 javascript 的历史演变。
  • 最初,javascript 是为非开发人员的用户设计的,javascript 的主要核心用途是向网页添加小型交互元素。
  • 因此 var 仅支持函数作用域。同样在那个时候,还没有块作用域。
  • 但是在 javascript 的后期发展中,使用 var 和修复 bug 变得更加复杂。
  • 因此,为了使 javascript 与其他现代语言竞争,添加了更多功能,如 let、const、箭头函数、es6 方法等。

为什么 var 不像 let 和 const 那样更新

  • 这是因为向后兼容。
  • 当时,javascript 被许多企业广泛使用,因此更新或更改现有功能会导致破坏代码库。
  • 因此,单独添加了现代功能。

常见面试问题

  • javascript 中的提升是什么?
  • javascript 中什么是提升的,什么不是?
  • var、let 和 const 在提升方面有什么区别
  • javascript 中的临时死区 (tdz) 是什么?
  • 您能解释一下使用函数声明与函数表达式进行提升吗?
  • es6 模块中的提升是什么?
  • 为什么我们应该避免在现实代码中依赖提升?

概括

  • 提升是 javascript 中的默认行为,其中变量和函数声明在编译阶段被移动到各自作用域的顶部。
  • 提升仅适用于使用 var 和传统函数声明的变量,不适用于 let、const 和箭头函数。
  • 仅提升函数声明,因此传统函数可以工作,但如果将函数分配给变量,则在定义之前它无法调用。
  • 之所以 var 和传统函数被提升,而 let、const 和箭头函数没有被提升,是因为在初期,javascript 主要用于小型 ui 交互。
  • 但后来,随着 javascript 被广泛用于企业构建应用程序,仅在全局范围内修复错误变得更加困难。
  • 因此在未来的更新中,会解决更多安全问题。
  • 此外,更新现有功能会破坏代码库,因此单独添加新功能。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

103

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

195

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

222

2025.12.24

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1501

2023.10.24

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

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

531

2023.09.20

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

167

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

74

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

热门下载

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

精品课程

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

共61课时 | 3.6万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

光速学会docker容器
光速学会docker容器

共33课时 | 1.9万人学习

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

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