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 被广泛用于企业构建应用程序,仅在全局范围内修复错误变得更加困难。
  • 因此在未来的更新中,会解决更多安全问题。
  • 此外,更新现有功能会破坏代码库,因此单独添加新功能。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

557

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

754

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

478

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

454

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1031

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

553

2023.09.20

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

1

2026.01.21

热门下载

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

精品课程

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

共61课时 | 3.5万人学习

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号