JS变量提升

1、概念

在正常的编程过程中，我们一般会把变量声明放在作用域顶部。

但在JS中，函数及变量的声明可以不在作用域顶部声明，因为它们最终都将被提升到作用域的最顶部。

2、应用

JS中，变量与函数可以在使用后声明。

如

console.log(x);
var x;

上面代码输出结果为undefined。

但是对于其他语言来说，就要严格遵循变量的先定义、后使用。

3、变量初始化值不会提升

console.log(x);
var x = 5;

此时，我们很容易误会输出的值为5。但是实际上输出的值仍为undefined。

这是因为初始化并不会跟随变量提升。此时这个代码的结构就相当于：

var x;
console.log(x);
x = 5;

此时我们就很好理解为什么会输出undefined了。

4、函数的变量提升

函数定义有两种方法：

var power = function(n){
	return n * n * n;
}
function power(n){
  return n * n;
}
console.log(power(3));

• 第一种方法定义的函数不会变量提升，因为它是一个变量初始化。

• 第二种方法定义的函数会整体提升。

那么此时函数power的效果应该是什么？

此时输出结果，答案是27。编译后结构应该是

var power;
function power(n){
  return n * n;
}
//-------上方为被提升部分---------
function power = function(n){
	return n * n * n;
}
console.log(power(3));

可以看出，函数后来又进行了一次赋值，所以最终答案是27。

可得结论：

如果一个函数被定义了多次，那么用var方法定义的函数优先级一定高于直接定义的函数

5、函数变量提升容易陷入的误区：

function power(n){
  return n * n;
}
function power(n){
  return n * n * n;
}
console.log(power(3));

可能会有人认为，后写的函数，后进行变量提升，而变量提升会把函数放到最顶部，那么最终变量提升后应该是

function power(n){
  return n * n * n;
}
function power(n){
  return n * n;
}
//------上方为变量提升区-----
console.log(power(3));

那么根据后写覆盖先写的原则，结果应该是9。

但是实际上提升后的结构应该是

function power(n){
  return n * n;
}
function power(n){
  return n * n * n;
}
//------上方为变量提升区-----
console.log(power(3));

那么对变量提升应该理解为：把代码中所有的变量、函数定义部分，按顺序拿出来，然后放到作用域顶部。

它们是保持原本的顺序整体拿出，整体放入。

而不是看到一个，拿出一个，放到顶部一个。

新人浅见，敬请指摘

JS变量提升

原文：https://www.cnblogs.com/huahongyi/p/14096537.html