关于javascript:图解JavaScript变量提升hoisting

37次阅读

共计 1158 个字符,预计需要花费 3 分钟才能阅读完成。

变量晋升是每个 JS 开发人员都据说过的那些术语之一,因为你在搜索引擎上搜寻烦人的谬误,并且最终到 StackOverflow 上查找时,有人会通知你这个谬误是因为 变量晋升(hoisting)导致的。那么,什么是变量晋升呢?(BTW,作用域 会在另一篇文章中介绍,我心愿放弃文章小而专一)

如果你是 JavaScript 老手,那么你可能曾经遇到过一些怪异的行为,比方,有些变量的值会偶尔是 undefined、抛出了ReferenceError 谬误,等等。变量晋升常常被解释为_将变量和函数放到文件的顶部_。不过,只管变量晋升可能看起来像这样,然而背地并非如此????。

当 JS 引擎获取咱们的脚本时,它要做的第一件事件就是为咱们代码中的数据 设置内存 。这时候没有执行任何代码,仅仅是在为执行筹备好所有。函数申明和变量的存储形式是不同的。函数存储的是 对整个函数的一个援用

对变量来说,就有所不同了。ES6 引入了两个新关键字来申明变量:letconst。用let 或者 const 关键字申明的变量被存储的时候是_未被初始化的_。

var 关键字申明的变量以默认值 undefined 存储。

当初创立阶段曾经实现,咱们能够理论执行代码。上面咱们来看看,如果在文件头部申明函数或者任何变量之前,有三条 console.log 语句的时候,会产生什么。

既然函数存储的是对整个函数代码的一个援用,那么咱们甚至能够在创立他们的代码行之前调用他们!????

当咱们在一个用 var 关键字申明的变量的变量申明之前援用该变量时,它只会返回存储的默认值undefined!不过,这样做有时候会导致不可预期的行为。大多数状况下,这意味着你无心中援用了它(你可能并不想它的值为undefined)????。

为了避免咱们像在用 var 关键字申明变量时那样一不小心就援用了一个 undefined 变量,只有咱们试图拜访 未被初始化 的变量时,就都会抛出一个 ReferenceError 谬误。变量理论申明之前的“区域”称为 暂时性死区:就不让咱们在变量初始化之前援用该变量(这也包含 ES6 类!)。

当引擎通过咱们理论申明变量的行时,内存中的值就被咱们理论申明它们的值笼罩。

搞定!???? 上面咱们疾速回顾一下:

  • 在执行代码之前,将函数和变量存储在内存中以用于执行上下文。这称为 变量晋升(hoisting)
  • 函数被存储为一个对整个函数的援用,用 var 关键字申明的变量的值为 undefined,而用letconst关键字申明的变量未被初始化。

心愿本文能让你搞清楚 变量晋升(hoisting)这个术语。

原文 by lydia hallie:https://dev.to/lydiahallie/javascript-visualized-hoisting-478h

本文由博客一文多发平台 OpenWrite 公布!

正文完
 0