JavaScript 变量与函数声明前置

JavaScript是自上而下按照一定的规则执行的。

首先看一段代码实例：

[JavaScript] 纯文本查看 复制代码运行代码
let a=1,b=2;
let num;
num=a+b;
console.log(num);

代码运行效果截图如下：

非常简单的一段代码，代码由上而下很顺利的执行完毕。

再来看一段代码实例：

[JavaScript] 纯文本查看 复制代码运行代码
func();
function func(){
  console.log("蚂蚁部落");
}

代码运行效果截图如下：

上面代码也可以顺畅的执行。

在文章的开头提到过，JavaScript代码是从上到下执行的，函数声明在下，函数调用在上。

为什么还可以正常调用函数，并打印出"蚂蚁部落"字符串，这就涉及到声明前置概念。

声明前置包括变量声明前置和函数声明前置，分别做一下分析。

一.变量声明前置：

首先看一段代码实例：

[JavaScript] 纯文本查看 复制代码运行代码
console.log(webName);

代码运行效果截图如下：

代码运行报错了，因为变量webName并未声明。

对一个未声明的变量求值会报错。

[JavaScript] 纯文本查看 复制代码运行代码
console.log(webName);
var webName="蚂蚁部落";
console.log(webName);

代码运行效果截图如下：

第一行代码下方声明变量webName，这时第一行代码不会报错，并打印出undefined。

第三行代码则可以打印出字符串"蚂蚁部落"，下面分析一下原理。

我们总说代码执行，其实在JavaScript中，代码的"执行"仅是JavaScript代码运行的一部分，在代码执行之前，代码还需要进行"词法分析"。在词法分析阶段，变量会被声明被前置，并赋初值为undefined，词法分析结束之后，再去执行代码，在代码执行阶段，变量被赋值为用户规定的值。所以上面的代码可以大致等同如下：

[JavaScript] 纯文本查看 复制代码
// 词法分析阶段，变量声明被前置并赋初值为undefined。
var webName=undefined
// 执行阶段，变量默认值为undefined。
console.log(webName);
// 执行阶段，变量赋值为字符串蚂蚁部落
webName="蚂蚁部落";
// 执行阶段，打印出字符串蚂蚁部落
console.log(webName);

已经进行注释说明，不再多做介绍。

二.函数声明前置：

函数声明也会前置，前面的代码已经进行了演示。

代码如下：

[JavaScript] 纯文本查看 复制代码运行代码
func();
function func(){
  console.log("蚂蚁部落");
}

和变量声明前置基本一样，在词法分析阶段，变量被前置声明，所以上述代码可以正常运行。

三.特别说明：

被前置声明的变量或者函数都被局限于当前作用域。

代码实例如下：

[JavaScript] 纯文本查看 复制代码运行代码
function func(){
  console.log(webName)
  var webName="蚂蚁部落";
}
func();

变量webName声明前置局限于函数作用域，通俗的将它被前置于函数作用域的顶端。

更多相关内容可以参阅JavaScript 词法分析简介一章节。