javascript变量提升是什么意思-前端问答-PHP中文网

javascript变量提升是什么意思

青灯夜游

发布： 2022-02-07 14:00:02

原创

5420人浏览过

在javascript中，变量提升是指在变量的作用域内，不管变量在何处声明，都会被提升到作用域的顶部，但是变量初始化的顺序不变。变量提升实际的实现方式是JavaScript的变量和函数的声明会在编译阶段放入内存。

javascript变量提升是什么意思

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

什么是变量提升？

变量提升(Hoisting)是人们对JavaScript执行上下文工作方式的一种认识，并不是官方给出的改变。

从字面上理解，变量提升的意思是变量和函数的声明会在物理层移动到作用域的最前面，虽然这样理解并不准确，效果是相同的。

立即学习“Java免费学习笔记（深入）”；

通俗的来说，变量提升就是，在变量的作用域内，不管变量在何处声明，都会被提升到作用域的顶部，但是变量初始化的顺序不变。

变量提升实际的实现方式是JavaScript的变量和函数的声明会在编译阶段放入内存。这意味着使用者在正式声明一个函数或者变量之前就能够使用它。

要搞清楚变量提升的实现，首先我们要明确以下2点：

javascript代码并不是一行一行往下执行的.
javascript执行分为2个步骤：
- 编译(词法解释/预解释)
- 执行

变量提升帮助理解

boardmix博思白板

boardmix博思白板，一个点燃团队协作和激发创意的空间，集aigc，一键PPT，思维导图，笔记文档多种创意表达能力于一体，将团队工作效率提升到新的层次。

查看详情

console.log(a);
var a = 'ghostwu';

登录后复制

对于上面的代码这个例子，第一行代码，你可能认为报错，因为在输出a之前，没有定义a变量，但是正确的结果是undefined.。根据上面js执行代码的解释，结合实际的代码，当我们碰到 var a = "ghostwu" 定义一个变量的时候，其实js把这句话看成是2个阶段的事, var a 发生在编译阶段， a = 'ghostwu'发生在执行阶段. 然后 var a会被提升到当前作用域的最前面, a = 'ghostwu'留在原地等待执行阶段，所以看下面的案例：

 a = 'ghostwu';
 var a;
 console.log( a );
 
 //上面这段代码经过编译之后，变成下面这样

 var a;  //被提升到当前作用域的最前面
 a = 'ghostwu'; //留在原地，等待执行
 console.log( a ); //输出ghostwu
 
 
 
  console.log( a ); 
   var a = 'ghostwu';

   //上面这段代码,经过编译之后，变成下面这样
   
   var a;
  console.log( a );//输出undefined,而不会报错
   a = 'ghostwu';

登录后复制

函数声明提升

在讲解函数声明提升之前，我们先来了解函数的常见的两种定义方式

         //函数声明, 形如:
         function show(){
             console.log( '函数声明方式' );
         }
 
         //函数表达式, 形如:
         var show = function(){
             console.log( '表达式方式' );
         }

登录后复制

因为函数表达式和函数的声明，在编译阶段，会产生不同的解释效果，所以函数的声明会被提升，案例见下面代码：

         show();
         function show(){
             console.log( a );
             var a = 'ghostwu';
         }


//函数声明会被提升，所以上面的代码经过编译之后，就变成下面这样

    function show(){    //函数声明被提升到 当前作用域的最前面
    var a;    
     //var声明被提升到当前作用域的最前面, 注意，他不会提升到函数的外面, 因为当前的作用域是在函数中
    console.log( a );
    a = 'ghostwu';
   }
   show();//输出undefined

登录后复制

但是函数表达式是不会被提升的，看下面的例子：

show(); //报错,show is not a function
var show = function(){
 console.log( 'ghostwu' );
}
//对于上面这段表达式代码，经过编译之后:
var show;
show();  //执行之后就是 undefined(), 所以在表达式定义之前，调用函数报错了
show = function(){
  console.log( 'ghostwu' );  
}

登录后复制

但是看下面的案例：

show(); //你好
var show;
function show(){
console.log( '你好' );
}
show = function(){
   console.log( 'hello' );
}

登录后复制

上面的代码为什么会输出“你好”，因为当出现同名的函数声明，变量声明的时候，函数声明会被优先提升，变量声明会被忽略。所以经过编译之后，就变成:

function show(){
   console.log( '你好' );
}
show(); //你好
show = function(){
  console.log( 'hello' );
}
show();//如果这里在调用一次，就是hello, 因为show函数体在执行阶段被重新赋值了

登录后复制

但是如果有同名的函数声明，后面的会覆盖前面的，如下代码：

show(); //how are you
var show;
function show(){
console.log( 'hello' );
}    
show = function(){
console.log( '你好' );
}
function show(){
console.log( 'how are you!' );
}  

//上面的代码经过编译之后，变成如下形式:
function show(){
   console.log( 'how are you!' );
}
show(); //how are you
show = function(){
 console.log( '你好' );
}
show(); //如果在这里再执行一次，结果：你好

登录后复制

注：