文章导航

JavaScript 变量与函数声明前置

2018-10-10 23:55| 作者: admin| 查看: 323| 评论: 0|来自: 蚂蚁部落

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

首先看一段代码实例:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/10/235604p6qls7apvkbhffah.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

再来看一段代码实例:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/10/235638q1m8fm8ce8lootze.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

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

一.变量声明前置:

首先看一段代码实例:

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/10/235705fud55mqrl4449b5u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/10/235732u1obead9mzrr5mdq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第一行代码下方声明变量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 词法分析简介一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部