JavaScript 变量提升

li21 发布于2019-08-23 14:13 / 2514人阅读

摘要：生命周期假设这样一个场景当解释器刚进入一个包含的作用域时，则在任何语句执行之前，变量就已完成了声明阶段和初始化阶段，且值为。当解释器执行完，变量就已完成了初始化阶段，离开了临时死区，并具有的值。

变量提升是一个将变量声明或者函数声明提升到作用域起始处的过程。在本篇博文中，我们一起深入了解这个过程的更多细节。

变量的生命周期

当引擎使用变量时，它们的生命周期包含以下阶段：

声明阶段，这一阶段在作用域中注册了一个变量

初始化阶段，这一阶段分配了内存并在作用域中让内存与变量建立了一个绑定，变量会被自动初始化为 undefined

赋值阶段，这一阶段为已初始化的变量分配具体的一个值

注意，声明阶段与我们通常所说的变量声明是不同的术语。

var 生命周期

假设这样一个场景：当解释器刚进入一个包含 var variable 的作用域时，则在任何语句执行之前，变量就已完成了声明阶段和初始化阶段，且值为 undefined。语句 varibale = "value" 为赋值阶段。

// 在刚进入到 func 作用域时，a 已完成了声明和初始化阶段，且值为 undefined
function func() {
  console.log(a); // undefined
  var a = 1; // 赋值阶段
  console.log(a); // 1
}
func();

function 生命周期

对于 function ，声明、初始化和赋值阶段在解释器刚进入函数作用域时，便已全部完成。

可以结合以下的代码，去理解 function 的变量提升过程。

// function 提升优先级比 var 和 let 高
foo(); // 2

// 具名函数表达式的函数名只在函数内部有效
bar(); // ReferenceError

function foo() {
  console.log(1);
}

// 多个函数声明时，后面的函数声明会覆盖之前的函数声明
function foo() {
  console.log(2);
}

// 函数声明会被提升，但函数表达式不会被提升
var foo = function bar() {
  console.log(3);
};

foo(); // 3

let 变量的生命周期

let 的提升是只针对声明阶段的提升。

假设这样一个场景：当解释器刚进入一个包含 let variable 的作用域时，就已完成了声明阶段。

从声明阶段结束到初始化阶段开始，这段区域被称为临时死区。如果在这时访问 variable ，将会抛出 ReferenceError: variable is not defined 。

当解释器执行完 let variable ，变量就已完成了初始化阶段，离开了临时死区，并具有 undefined 的值。之后的语句 variable = "value" 为赋值阶段。

如果解释器遇到了 let variable = "value" ，则完成了初始化和赋值阶段。

总结

至此，总结一下变量提升过程中的一些重要知识点：

var 只有声明阶段和初始化阶段被提升

function 的声明阶段、初始化阶段和赋值阶段都被提升

let 只有声明阶段被提升

function 提升优先级比 var 和 let 高，且对于多个函数声明，后面的声明会覆盖前面的声明

函数表达式无法被提升

参考资料

JavaScript variables lifecycle: why let is not hoisted

我用了两个月的时间才理解 let

GPU云服务器云服务器 js变量声明提升 javascript提升 javascript变量 javascript定义变量

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100291.html

Javascript中的变量提升、函数提升及变量访问原则

摘要：变量提升什么是变量提升在函数体内声明的变量，无论你是在函数的最底端还是中间声明的，那么都会把该变量的声明提升到函数的最顶端相当于第一行，但是只是提升变量的声明，不会赋值。 1、变量提升什么是变量提升？在函数体内声明的变量，无论你是在函数的最底端还是中间声明的，那么都会把该变量的声明提升到函数的最顶端(相当于第一行)，但是只是提升变量的声明，不会赋值。 var num = 10; fu...

zhigoo 2019-08-23 14:29 评论0 收藏0
JavaScript变量提升

摘要：发布自的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在的个人的知识整理仓库，欢迎投稿介绍变量提升是人们对执行上下文工作方式的一种认识，并不是官方给出的改变从字面上理解，变量提升的意思是变量和函数的声明会在物理层移动到作用域的最前发布自Kindem的博客，欢迎大家转载，但是要注意注明出处。另外，该文章收纳在Kindem的个人的 IT 知识整理仓库，欢迎 Star、Fork、...

yzd 2019-08-23 11:59 评论0 收藏0
ES6 变量作用域与提升：变量的生命周期详解

摘要：不同的是函数体并不会再被提升至函数作用域头部，而仅会被提升到块级作用域头部避免全局变量在计算机编程中，全局变量指的是在所有作用域中都能访问的变量。 ES6 变量作用域与提升：变量的生命周期详解从属于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建...

lmxdawn 2019-08-21 11:55 评论0 收藏0
JavaScript 变量声明提升

摘要：输出的结果为输出的结果为提升后输出的结果为重新定义了变量输出的结果为如果定义了相同的函数变量声明，后定义的声明会覆盖掉先前的声明，看如下代码输出练习的值是多少的值是多少第二题的解析请看这里参考资料文章文章中文版链接文章推荐文章变量提升 JavaScript 变量声明提升原文链接一个小例子先来看个例子： console.log(a); // undefined var a =...

fireflow 2019-08-20 10:39 评论0 收藏0
JavaScript变量提升

摘要：变量提升需要注意两点提升的部分只是变量声明，赋值语句和可执行的代码逻辑还保持在原地不动提升只是将变量声明提升到变量所在的变量范围的顶端，并不是提升到全局范围，说明如下会输出变量提升之后的效果函数声明会提升，但是函数表达式就不了。问题有些朋友可能会觉得javascript的代码是从上到下，一行一行的解释执行的。如果按照这样的思路，在有些情况下阅读代码会得到错误的结果，考虑以下代码： ...

Zoom 2019-08-21 10:44 评论0 收藏0
javascript声明提升

摘要：但是碰到声明提升，这种想法就会被打破。声明一个函数进行相应的操作，会得到函数声明提升的结果。由此可以发现变量和函数的声明都会被提升在其他代码的前面执行。一个普通块内部的函数声明通常会被提升到所在的作用域的顶部。的创建初始化和赋值均会被提升。 Javascript声明提升在分析声明提升之前，我认为有必要知道的两点：一、引擎查询变量的两种方式引擎查询变量的方式可以分为LHS和RHS两...

evin2016 2019-08-23 16:15 评论0 收藏0