js变量提升

Posted 2021-01-18 Amy_World

javascript中ES5的var、function，ES6的function *、let、const、class会被提升，但是var、function、function *和let、const、class的的提升并不相同。

本文只讨论ES5中变量提升，ES6中变量提升

ES5变量提升

首先了解js的执行环境和作用域

执行环境

执行环境定义了变量和函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有与之对应的变量对象（variable object），此对象保存着环境中定义的所有变量和函数。我们无法通过代码来访问变量对象，但是解析器在处理数据时会在后台使用到它。

 -全局执行环境

  全局执行环境是最外围的一个执行环境，根据ECMAscript实现所在的宿主环境不同，表示执行环境的对象也不同。在web浏览器中，我们可以认为它是window对象，因此所有的全局变量和函数都是作为window对象的属性和方法创建的。代码载入浏览器时，全局环境被创建，应用程序退出，如关闭网页或者浏览器时，全局执行环境被销毁。

 -函数执行环境

  每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境就被推入一个环境栈中，当函数执行完毕后，栈将其环境弹出，把控制权返回给之前的执行环境。

作用域

在ES5中，js只有两种形式的作用域：全局作用域和函数作用域。

 -全局作用域

  全局对象的作用域，任意地方都可以访问到（如果没有被函数作用域覆盖）。在ES6中，新增了一个块级作用域（最近的大括号涵盖的范围），但是仅限于let方式申明的变量。

 -函数作用域

  整个函数范围

作用域链

 

变量提升（hoisting）

 ES5 提升有变量提升和函数提升。

 原则： 

     1、所有申明都会被提升到作用域的最顶上；

     2、同一个变量申明只进行一次，并且因此其他申明都会被忽略；

     3、函数声明的优先级优于变量申明，且函数声明会连带定义一起被提升。

 -变量提升

 把变量声明提升到函数的顶部，但是变量赋值不会提升。

console.log(a);
var a = 10;
//输出为undefined
/************/
var a;
console.log(a);
a = 10;
//与上例等价

 

function add(){
    y = 10;
    var y = 1;
    console.log(y); 
}
add(); //输出1

注意：变量未声明，直接使用，输出‘变量 is not defined’。

　　　

 -函数提升

  函数提升会将函数声明连带定义一起提升。

  在JavaScript中函数的创建方式有三种：函数声明、函数表达式（函数字面量）、函数构造法（动态的，匿名的）。只有函数声明创建的函数会执行函数提升，字面量定义的函数（实质为变量+匿名函数）会执行变量提升。

 test1(); 
 function test1(){ 
     console.log("可以被提升"); 
 } 

 test2(); 
 var test2 = function(){ 
     console.log("不可以被提升"); 
 } 

console.log(test2); 
var test2 = function(){ 
   console.log("不可以被提升"); 
} 　　

函数和变量同时提升

console.log(test3);
function test3(){console.log(\'func\');}
var test3 = \'Mary\';