浅谈JavaScript 声明提升

在进修JavaScript声明晋升之前，我们先看下面这个例子：

console.log(a);
var a=2;

运行功效会是什么？你也许会有以下的揣摩：

1.报错ReferenceError: a is not defined；

2.打印2；

3.打印undefined。

正确的功效是第三种，打印undefined。

下面让我们来看看详细的缘故起因。着实，对付var a=2;这条语句，JavaScript会将其视为两个声明：

界说声明var a，会在编译阶段举办；

赋值声明a=2，会留在原地守候执行阶段举办。

而所谓的声明晋升：就是JavaScript会把var变量声明和函数声明城市被晋升到各自浸染域的顶部，而赋值操纵并不会被晋升。

因此，上面的例子现实是凭证这样的流程来处理赏罚：

var a;
console.log(a);
a=2;

我们还必要知道，不只仅是var变量声明会晋升，函数声明同样也会晋升，此刻来看下面这个例子

foo();
function foo(){
 console.log(a);
 var a=2;
}

这个例子的运行功效为：打印undefined。这段代码现实上会被领略为为下面的情势：

function foo(){
 var a;
 console.log(a);
 a=2;
}
foo();

2 关于声明晋升的常见题目

2.1 函数表达式

先看一个函数表达式的例子：

console.log(foo);
var foo=function(){}

上面代码的运行功效为：打印undefined。现实上，变量标识符foo被晋升了，但它的赋值操纵并没有被晋升，我们可以领略为下面的情势：

var foo;
console.log(foo);
foo=function(){}

结论：函数声明会被晋升，但函数表达式不会被晋升。

2.2 声明的优先级

function a(){}
var a;
console.log(a);

var a;
function a(){}
console.log(a);

假如在统一个浸染域内，存在同名的函数声明和var变量声明，那么会产生什么样的环境呢？我们同样再来看一个例子：

上面的两种写法，运行功效均为打印a(){}。也就是说，假如在统一个浸染域内，存在同名的函数声明和var变量声明，则函数声明的优先级更高。

尚有一种环境：假犹如一个浸染域内，存在多个同名的函数声明。这种环境下，后头声明的会包围前面声明的。

3 操练题

3.1 第一题

var getName;//与函数声明同名，故失效
function getName() {
 console.log(2);
}
getName = function() {//赋值
 console.log(1);
};
getName();

谜底：打印1

理会：晋升后的次序如下

3.2 第二题

var a = 1;
function b(){
 a = 10;
 return;
 function a(){
  console.log(a);
 }
}
b();
console.log(a);

谜底：打印1

理会：起首，我们必要梳理清晰声明的晋升。

本题有几个要害点，我们必要大白：

函数b内的a函数固然在return之后，但它并没有失效，它会产生声明晋升，从而晋升到b函数浸染域的顶部。

许多童鞋（好比我TAT）也许会错误地以为这题的谜底是10，以为我们在最后挪用了b函数，修改了全局变量a。现实上，因为函数a产生了声明晋升，导致在函数b内“掩蔽”了全局浸染域中的变量a，因此，a=10;着实是将函数a从头赋值。为了进一步考试，各人可以把a函数注释掉，会发明此时的谜底就酿成了10。

注：本题还涉及到了闭包的相干常识，这一题具体的理会请见参考资料[2]，讲得很是具体。

var a;//全局变量a产生了声明晋升
function b(){
 function a(){//函数a产生声明晋升
   console.log(a);
  }
 a = 10;//由于函数a离它最近，因此赋值给函数a
 return;
}
a = 1;//赋值给了全局变量a
b();
console.log(a);

4 参考资料

[1] 《你不知道的JavaScript》

[2] js中变量名与函数名重名的题目，Charles_Tian

[3] 函数声明与变量声明的晋升机制优先级题目，一个菜鸟的格斗史

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!