javascript变量提升

Posted 2020-08-10

提升是一种将变量和函数的声明移到函数作用域（如果不在任何函数内的话就是全局作用域）最顶部的机制。

提升影响了变量的生命周期，一个变量的生命周期包含3个阶段：

声明——创建一个新变量，例如var myValue；

初始化——用一个值初始化变量，例如myValue=150；

使用——使用变量的值，例如alert（myValue）。

javascript并没有严格遵循这个顺序，因此提供了更多的灵活性。比如：函数的使用可以在声明之前。

这是因为javascript的函数声明会被提升到作用域顶部。

变量提升在不同方面的影响也不同：

变量声明：使用var ，let ，const关键字

函数声明：使用function（）{......}语法

类声明：使用class关键字

函数声明在函数作用域内创建并初始化一个变量。默认情况下，声明但是未初始化的变量的值是undefined。

1.提升var：使用var声明的变量会被提升到所在函数作用域的顶部，如果在声明之前访问该变量，它的值会是undefined。虽然它的声明提升了，但是它的赋值没有提升到函数作用域顶部，依然留在原地。

function sum(a,b){
var myString;             //提升到顶部
console.log(myString);           //undefined
myString="HelloWorld";             //赋值不受影响
console.log(myStriing);              //‘HelloWorld’
return a+b;    
}

2.块级作用域变量：let

let声明在块级作用域内创建并初始化一个变量：默认情况下，声明但是未初始化的变量的值是undefined。

let是ECMAScript6引入的一个巨大的改进，它允许代码在代码块的级别上保持模块性和封装性；

使用let定义的变量会被提升到代码块的顶部。但是如果在声明前访问该变量，javascript会抛出异常ReferenceError:is not defined。

在声明语句一直到代码库的顶部，变量都好像在一个临时死亡区间中一样，不能被访问。

function isTruthy(value){
var myVariable=‘Value 1‘;
console.log(myVariable);      //Value1
if(value){
console.log(myVariable);    //ReferenceError:myVariable is not defined,临时死亡区
let myVariable=‘Value 2‘;
console.log(myVariable);      //Value 2
return true;
}
}

以上代码可以确认let变量确实被提升了。
let在块级作用域内提升保护了变量不受外层作用域影响。先声明，后使用。

3.常量const

常量声明在块级作用域内创建并初始化一个常量：当声明一个变量时，必须在同一条语句中对该变量进行初始化。在声明与初始化之后，变量的值不能被修改。

使用const定义的常量会被提升到代码块的顶部。由于存在临时死亡区间，常量在声明之前不能被访问。常量提升效果与let声明变量的效果相同。

4.函数声明：函数声明使用提供的名称和参数创建一个函数

函数声明的提升允许你在所属作用域内任何地方使用该函数，即使在声明之前也可以。函数可以在当前作用域或子作用域内的任何地方访问。

注意：函数声明function(){....}和函数表达式var=function(){.....}之间的区别

5.类声明

类声明会被提升到块级作用域的顶部。但是如果你在声明前使用类，javascript会抛出异常。先声明类，然后创建实例。与let的提升效果类似。