JavaScript变量提升

Zoom 发布于2019-08-21 10:44 / 3499人阅读

摘要：变量提升需要注意两点提升的部分只是变量声明，赋值语句和可执行的代码逻辑还保持在原地不动提升只是将变量声明提升到变量所在的变量范围的顶端，并不是提升到全局范围，说明如下会输出变量提升之后的效果函数声明会提升，但是函数表达式就不了。

问题

有些朋友可能会觉得javascript的代码是从上到下，一行一行的解释执行的。如果按照这样的思路，在有些情况下阅读代码会得到错误的结果，考虑以下代码：

a = 2;
var a;
console.log(a);

console.log(a)应该输出什么呢？有些开发者觉得会输出undefined，因为var a在"a = 2"之后，变量a被重复定义了，但是没有被赋值，所以是"undefined"。但是结果输出是2。如下图所示：

我们再来考虑另一段代码，如下所示：

console.log(a);
var a = 2;

这段代码会输出什么样的结果呢？有些人可能会觉得输出ReferenceError。因为变量a在没有声明的情况下就被使用了。真实结果呢，如下图所示：输出的是undefined

为什么会这样呢？这就牵出了本文的主题：JavaScript声明提升

JavaScript代码的运行规则

在JavaScript代码运行之前其实是有一个编译阶段的。编译之后才是从上到下，一行一行解释执行。变量提升就发生在编译阶段，它把变量和函数的声明提升至作用域的顶端。（编译阶段的工作之一就是将变量与其作用域进行关联）。
所以对于代码var a =2;来说，编译器看到的是两行代码var a; a = 2;第一个语句是声明语句，在编译阶段处理。第二个语句是赋值语句，在运行阶段处理。
那么我们再回过头来看看问题中出现的代码：

a = 2;
var a;
console.log(a);

应该这样来处理：

var a;            //编译阶段
a = 2;            //运行阶段
console.log(a);   //运行阶段

所以这段代码的最终输出的结果是2。

第二段代码：

console.log(a);
var a = 2;

应该这样来处理：

   var a;            //编译阶段
   console.log(a);   //运行阶段 
   a = 2;            //运行阶段

所以这段代码的最终输出结果是undefined。

变量提升需要注意两点：

提升的部分只是变量声明，赋值语句和可执行的代码逻辑还保持在原地不动

提升只是将变量声明提升到变量所在的变量范围的顶端，并不是提升到全局范围，说明如下：

foo();
function foo(){
    console.log(a); //会输出undefined
    var a = "2";
}
//变量提升之后的效果
function foo(){
    var a;
    console.log(a);
    a = "2";
}
foo();

函数声明会提升，但是函数表达式就不了。看如下代码：

foo();
var foo = function bar(){    //这是一个函数表达式，不再是函数声明。
    console.log("bar");
}

处理方式如下：

var foo;    
foo();    //TypeError，因为还没有赋值
bar();    //bar不可以在全局范围内引用
foo = function bar(){            
    console.log("bar");
}

函数是一等公民

变量声明和函数声明都会得到变量提升，但函数声明会最先得到提升，然后是变量声明。
考虑如下代码：

foo();    //输出的结果为1
var foo;
function foo(){
    console.log(1);
}
foo = function(){
    console.log(2);
}

处理方式如下：

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

注意：var foo;由于是重复声明变量，所以被编译优化去掉。

最后再来说明几种情况

对于函数声明来说，如果定义了相同的函数变量声明，后定义的声明会覆盖掉先前的声明，看如下代码：

foo();    //输出3
function foo(){
    console.log(1);
}
var foo = function(){
    console.log(2);
}  
function foo(){
    console.log(3);
}

JavaScript中是没有块级作用域的概念（ps：ES6中有改进了），看如下代码：

foo();    //输出结果为2
var a = true;
if(a){
    function foo(){
        console.log(1);
    }
}else{
    function foo(){
        console.log(2);
    }
}

这段代码输出结果为2，if语句没有块级作用域的功能，所以函数声明都被提升到全局作用域中，又因为定义了两个foo，后来的定义覆盖了前边的定义，所以输出结果为2。

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/86101.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声明提升在分析声明提升之前，我认为有必要知道的两点：一、引擎查询变量的两种方式引擎查询变量的方式可以分为LHS和RHS两...

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