动画篇:变量提升

简介: 变量提升(Hoisting)被认为是, Javascript中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的JavaScript文档中找不到变量提升(Hoisting)这个词。不过,需要注意的是,开始时,这个概念可能比较难理解,甚至恼人。

变量提升(Hoisting)被认为是, Javascript中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的JavaScript文档中找不到变量提升(Hoisting)这个词。不过,需要注意的是,开始时,这个概念可能比较难理解,甚至恼人。

例如,从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

当 JS 引擎获取我们的脚本时,它做的第一件事就是为我们代码中的数据设置内存。 此时没有执行任何代码,它只是为执行做准备。 函数声明和变量的存储的方式不同。 函数与对整个函数的引用一起存储。

gif

有了变量,就有点不同了。 ES6 引入了两个新的关键字来声明变量:let 和 const。 使用 let 或 const 关键字声明的变量未初始化存储

gif

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

gif

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

由于函数存储在对整个函数代码的引用中,因此我们甚至可以在创建它们的行之前调用它们! 🔥

gif

当我们在声明之前引用使用 var 关键字声明的变量时,它会简单地返回其存储时的默认值:undefined! 但是,这有时会导致“意外”行为。 在大多数情况下,这意味着你无意中引用了它 😬

gif

为了防止意外引用未定义的变量,就像我们可以使用 var 关键字一样,每当我们尝试访问未初始化的变量时都会抛出 ReferenceError 。 实际声明之前的“区域”称为临时性死区:不能在初始化之前引用变量。

gif

当 JS 引擎执行到我们实际声明的变量时,内存中的值将被我们实际声明它们的值覆盖。

gif

回顾:

  • 在我们执行代码之前,函数和变量存储在内存中作为执行上下文。 这称为变量提升。
  • 函数与对整个函数的引用一起存储,带有 undefined 值的 var 关键字的变量以及带有 let 和 const 关键字的变量以未初始化的方式存储。
相关文章
|
6月前
|
JavaScript 前端开发 安全
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量(三)
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量
|
28天前
|
前端开发
HarmonyNext动画大全02-显式动画
HarmonyNext动画大全02-显式动画
29 2
HarmonyNext动画大全02-显式动画
|
21天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
4月前
|
JavaScript 前端开发 安全
20 JavaScript学习:变量提升和严格模式
20 JavaScript学习:变量提升和严格模式
|
6月前
|
JavaScript 前端开发 网络架构
JavaScript中的箭头函数是一种新的函数表达形式
【5月更文挑战第9天】JavaScript的箭头函数以简洁语法简化函数定义,其特性包括:1) 不绑定自身this,继承上下文的this,适合回调和事件处理;2) 没有arguments对象,需用剩余参数语法访问参数;3) 不能用作构造函数,无new调用;4) 没有prototype属性,不支持基于原型的继承。箭头函数在特定场景下优化了this处理,但使用时要注意与普通函数的差异。
27 2
|
6月前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
42 0
|
6月前
|
JavaScript 前端开发
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量(二)
闭包治愈“全局变量恐惧症”,利用闭包实现JavaScript私有变量
|
JavaScript
原生js实现一个节流函数和防抖函数?
原生js实现一个节流函数和防抖函数?
69 0
|
JavaScript
如何通过原生js实现一个节流函数和防抖函数?
如何通过原生js实现一个节流函数和防抖函数?
|
JavaScript 前端开发 Go
立即执行函数
立即执行函数
58 0