JavaScript hoisting(变量提升)学习总结

定义：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

例如一下两个例子：

例1：

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

例2：

var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     // 在元素中显示 x

他们的结果都是一样的，都是demo的内容都是5。

但是，JavaScript在初始化时却是不会提升的，也就是说只有在只声明，不初始化的前提下才能得到提升。如下两例子：

例1：

<p id="demo"></p>
<script>
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y
</script>

输出：

5  7

例2：

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x + " " + y;           // 显示 x 和 y

var y = 7; // 初始化 y

输出：

5  undefined

其实主要理解 js 的解析机制就行。

遇到 script 标签的话 js 就进行预解析，将变量 var 和 function 声明提升，但不会执行 function，然后就进入上下文执行，上下文执行还是执行预解析同样操作，直到没有 var 和function，就开始执行上下文。如:

a=5;
show();
var a;
function show(){};

预解析：

var a;
function show(){};
a=5;
show();

提醒：在头部声明你的变量

对于大多数程序员来说并不知道 JavaScript 变量提升。

如果程序员不能很好的理解变量提升，他们写的程序就容易出现一些问题。

为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。