JavaScript 变量提升(Hoisting)

'提升'是每个JS开发人员都听说过的一个术语,如果你刚接触 JS,可能会遇到一些“怪异”的行为,其中某些变量是随机undefined,会抛出ReferenceErrors 异常等等。Hoisting通常被解释为将变量和函数放到作用域顶部,但实际上并不是这样,尽管行为看起来是这样的。

当 JS 引擎获取我们的代码时,它要做的第一件事就是为代码中的数据设置内存。 目前还没有执行任何代码,只是准备要执行的所有内容。 函数声明和变量的存储方式不同。

函数是以按保存函数的引用的方式来存储。

使用变量,则有所不同。 ES6 引入了两个新的关键字来声明变量:letconstletconst关键字声明的变量保存的状态是 uninitialized

使用var关键字声明的变量存储的默认值为undefined

现在创建阶段已经完成,我们可以执行代码。让我们看看在声明函数或任何变量之前,如果顶部执行3console.log语句会发生什么。

由于函数存储在对整个函数代码的引用中,所以我们可以在创建它们的行之前调用它们。

在执行阶段,我们可以在声明函数之前调用它们,因为我们在内存中引用了整个函数。

当我们在变量声明之前引用var关键字声明的变量时,它只会返回其存储时的默认值:undefined。然而,这有时会导致“意料之外”的行为。在大多数情况下,我们有可能会无意中重新引用了它(你可能不希望它的值为undefined)

当我们在变量声明之前引用var关键字声明的变量时,它只会返回其存储时的默认值:undefined

为了防止意外引用undefined的变量,就像我们可以使用var关键字一样,每当我们试图访问未初始化(uninitialized )的变量时,都会抛出一个ReferenceError。在它们实际声明之前的“区域”称为**临时死区**:不能在它们的初始化之前引用变量(这也包括ES6类`)

每当我们试图访问未初始化(uninitialized )的变量时,都会抛出一个ReferenceError。在它们实际声明之前的“区域”称为临时死区**

当引擎通过我们实际声明变量的那一行时,内存中的值会被我们实际声明的值覆盖。

总结

  • 在执行代码之前,函数和变量存储在内存中,用于执行上下文,这就是所谓的提升。
  • 函数存储为对整个函数的引用,用var关键字声明的变量默认值为undefined,用letconst关键字声明变量默认存储值为uninitialized

希望本文对你有所帮助,感谢阅读。

英文地址原文:https://dev.to/lydiahallie/javascript-visualized-hoisting-478h

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  26人点赞

没有讨论,发表一下自己的看法吧

推荐文章
树莓派 4 正式发布!硬件性能大提升:CPU提升3倍,支持USB3.0、蓝牙5.0、千兆以太网、4G LPDDR4、H.265

本文转自|EETOP树莓派(RaspberryPi)基金会,6月24日正式发布了RaspberryPi4ModelB。树莓派是全球知名的基本计算微型电脑,深受全球开发者、编程者、极客等人士的追捧和喜爱

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

微信支付退款解析 对加密串 B 做 AES-256-ECB 解密(PKCS7Padding)

微信支付退款解析对加密串B做AES-256-ECB解密(PKCS7Padding)1.微信支付文档 https://pay.weixin.qq.com/wiki/doc/api/H5....解密方式解

揭秘青云QingCloud第二代云主机性能提升4倍的背后

前不久,青云QingCloud正式推出第二代企业型云主机,其搭载第二代英特尔至强可扩展处理器,采用独享CPU模式,可提供更高更稳定的计算性能,并针对人工智能工作负载进行优化,性能提升400%,满足企业

写速度提升20%,Elasticsearch 创始人给腾讯云发感谢信

近日,Elasticsearch的创始人兼首席执行官ShayBanon向腾讯云发出了一封感谢信,专程对腾讯团队为Elasticsearch开源社区做出的贡献表示了感谢。据了解,腾讯工程师通过提交代码,

PostgreSQL 12 正式发布:全面的性能提升

PostgreSQL12已经发布,该版本在各方面都得到了加强,包括显著地提升查询性能,特别是对大数据集,总的空间利用率方面。这个版本为应用程序开发人员提供了更多的功能,比如对SQL/JSON路径表达式

两年Flink迁移之路:从standalone到on yarn,处理能力提升五倍

一、背景与痛点在2017年上半年以前,TalkingData的AppAnalytics和GameAnalytics两个产品,流式框架使用的是自研的td-etl-framework。该框架降低了开发流式

【THE LAST TIME】深入浅出 JavaScript 模块化

前言Thelasttime,Ihavelearned【THELASTTIME】一直是我想写的一个系列,旨在厚积薄发,重温前端。也是对自己的查缺补漏和技术分享。欢迎大家多多评论指点吐槽。系列文章均首发于

第 10 节:复合类型-5. 指针 -- 指针与指针变量 7. 结构体指针变量

7.结构体指针变量我们前面定义了指针指向了数组,解决了数组引用传递的问题。那么指针是否可以指向结构体,也能够解决结构体引用传递的问题呢?完全可以。\ 下面我们先来看一下,结构体指针变量的定义:\\ 也

阿里提出针对多目标优化的全新算法框架,同时提升电商推荐场景 GMV 和 CTR

在推荐系统中,多目标优化一直是热门话题,阿里巴巴的XiaoLin、HongjieChen等人针对推荐中的多目标优化问题提出了一种基于帕累托效率的优化算法框架,并应用在电商推荐场景中,对GMV和CTR

程序员有话说:开发人员提升自己的四种方式

开发人员之间所谓的不同“级别”的界线是模糊 的。如果你问高级开发人员、开发经理或技术总监:“初学者、初级、中级和高级之间的区别是什么?”那么很有可能他们会给你截然不同的意见。由于存在各种各样的意见,因

助力AWS提升中国市场份额,光环云的这一年

2018年7月1日,光环云数据有限公司(以下简称“光环云”)正式成立。  一个月前,也就是2019年7月1日,光环云刚过完一周岁的生日。目前,云计算已进入到第二阶段,即深水期,第一波互联网、游戏等最容

走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相

背景闲鱼客户端的Flutter页面已经服务上亿级用户,因此用户体验尤其重要,完善Flutter性能稳定性监控体系,以便及早发现线上性能问题,也可以作为用户体验提升的衡量标准。那么Flutter的性能到

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

JavaScript闭包基础指南

闭包是函数创建时范围内所有变量的集合。要使用闭包,请在另一个称为嵌套函数的函数内创建一个函数。内部函数将有权访问外部函数范围中的变量(Closure有助于访问外部函数范围),即使在返回外部函数之后也是

先学php还是javascript?

javascript是前台的东西,PHP是后台的东西,两者先学谁都是一样的。两者之间没有啥实质性的必然联系。Javascript就是浏览器执行的脚本语言,控制页面内容。php就是服务器端执行的语言,读

深入了解JavaScript async/await !

Asyncfunctions让我们以async这个关键字开始。它可以被放置在任何函数前面,像下面这样:asyncfunctionf(){ return1; }在函数前面的「async」这个单词表达了一

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;