问题:有如下代码

 var a = 1;
function pop() {
alert(a);
var a = 5;
}
pop();//执行结果,弹出undefined

这段代码的执行结果为undefined,为什么呢?

JS的解析与执行并不是读一行,处理一行,读一行,处理一行这样进行的,而是分为两个阶段:

1、预处理阶段;

2、执行阶段;

然后分别以全局和函数内部的局部代码而言:

1、全局预处理

在解析JS代码的时候,首先会创建一个全局LexicalEnviroment{ }(词法环境)对象

接下来扫描JS代码里面的两个部分:

a、用声明的方式创建的函数;

b、用var定义的变量;

扫面完毕后将这些变量及函数添加到全局的词法环境对象里面去;

 LexicalEnviroment: {
a: undefined,
b: undefined,
test: 对函数的一个引用
} //用声明的方式创建的函数
function test(params) { }
//用函数表达式创建的函数
var test1 = function(params) { }
//用var定义的变量
var a = 5;
var b;
//其他变量
c = 6;

定义一个声明函数和一个函数表达式来证明这一点,代码如下:

 f();
g(); function f() {
console.log("ff");
}
var g = function() {
console.log("gg");
}

得到如下结果:

 ff
e:\Code\JavaScript\day03\test2.js:2
g();
^ TypeError: g is not a function

函数f被正常执行,而函数g报错了

因为在预处理阶段,函数f的引用被放在LexicalEnviroment对象中了,而g没有,所以在调用时函数g()并不存在,所以报错。

改一下位置,这样就对了

 f();
var g = function() {
console.log("gg");
}
g(); function f() {
console.log("ff");
}

这点在var定义变量上的体现:

 console.log(a);
console.log(b); var a = 5;
b = 6;

这段代码的执行结果如下:

 undefined
e:\Code\JavaScript\day03\test3.js:2
console.log(b);
^ ReferenceError: b is not defined

可见,如上所说,以var方式定义的a被添加到全局LexicalEnviroment{ }(词法环境)对象中了,其值为undefined,而直接定义的b此时不存在,所以报错。

这就是全局预处理阶段的过程。

声明:

关于全局的词法环境对象LexicalEnviroment,在浏览器中就约等于window对象,该对象是属于JS解析器的东西,在不同的地方叫法不同,比如在Node中称为Execute Context(运行上下文对象)或许更合适一点,在ECMA -262标准中有其解释,但我们无需关心其具体含义,只是有这个概念便可。

JS的解析与执行过程—全局预处理阶段之全局词法环境对象的更多相关文章

  1. JS的解析与执行过程—函数预处理

    声明:之所以分为全局预处理与函数预处理,只是为了理解方便,其实在实际运行中二者是不分先后的. 函数预处理阶段与全局预处理的差别: 函数每调用一次,就会产生一个LexicalEnviroment对象,在 ...

  2. JS的解析与执行过程

    JS的解析与执行过程 全局中的解析和执行过程 预处理:创建一个词法环境(LexicalEnvironment,在后面简写为LE),扫描JS中的用声明的方式声明的函数,用var定义的变量并将它们加到预处 ...

  3. JS的解析与执行过程—全局预处理阶段之命名冲突的处理策略

    有如下代码: <body> <script> alert(f); function f() { console.log("fff"); } var f = ...

  4. js全局的解析与执行过程

    先看下面实例的执行结果: alert(a);//undefined alert(b);//报错 alert(f);//输出f函数字符串 alert(g);//undefined var a = 1; ...

  5. js函数的解析与执行过程

    function f(a,b,c){ alert(a);//函数字符串 alert(b); var b = 5; function a(){ } } f(1,2); //预处理 lexicalEnvi ...

  6. JS引擎线程的执行过程的三个阶段(二)

    继续JS引擎线程的执行过程的三个阶段(一) 内容, 如下: 三. 执行阶段 1. 网页的线程 永远只有JS引擎线程在执行JS脚本程序,其他三个线程只负责将满足触发条件的处理函数推进事件队列,等待JS引 ...

  7. JS引擎线程的执行过程的三个阶段(一)

    浏览器首先按顺序加载由<script>标签分割的js代码块,加载js代码块完毕后,立刻进入以下三个阶段,然后再按顺序查找下一个代码块,再继续执行以下三个阶段,无论是外部脚本文件(不异步加载 ...

  8. openWRT自学---基于backfire版本,分析其Make命令的执行过程和各阶段的主要产物

    准备阶段:从SVN下载backfire的编译环境(位置是:svn co svn://svn.openwrt.org/openwrt/branches/backfire),然后按照openWRT的要求, ...

  9. js的解析--预处理(三)

    js的解析与执行过程  分全局  {预处理阶段和执行阶段}  函数{预处理函数和执行阶段}   1/创建词法环境(环境上下文) LexicalEnvironment   === window { } ...

随机推荐

  1. mysql-联结

    一.联结 联结是利用SQL的select能执行的最重要的操作. 1.关系表:假如有一个包含产品目录的数据库表,其中每个类别的物品占一行.对于每种物品要求存储的信息包括产品描述和价格,以及生产该产品的供 ...

  2. Hadoop2.6.0配置參数查看小工具

    前言 使用Hadoop进行离线分析或者数据挖掘的project师,常常会须要对Hadoop集群或者mapreduce作业进行性能调优. 或许你知道通过浏览器訪问http://master:18088/ ...

  3. Insert Data with C# Driver

    https://docs.mongodb.com/getting-started/csharp/insert/ OverView You can use the InsertOneAsync meth ...

  4. [NOIP2015模拟10.22] 最小代价 解题报告 (最小生成树)

    Description 给出一幅由n个点m条边构成的无向带权图.其中有些点是黑点,其他点是白点.现在每个白点都要与他距离最近的黑点通过最短路连接(如果有很多个黑点,可以选取其中任意一个),我们想要使得 ...

  5. 实体转XML XML转实体

    // <summary> /// 实体类序列化成xml /// </summary> /// <param name="enitities">实 ...

  6. UVa 1600 Patrol Robot【BFS】

    题意:给出一个n*m的矩阵,1代表墙,0代表空地,不能连续k次穿过墙,求从起点到达终点的最短路的长度 给vis数组再加一维状态,表示当前还剩下的能够穿越的墙的次数,每次碰到墙,当前的k减去1,碰到0, ...

  7. nginx的Rewrite重写

        location /{                if ($remote_addr=192.168.1.100){                          //禁止此 ip 访问 ...

  8. Tomcat IO阻塞异常

    tomcat的maxThreads.acceptCount(最大线程数.最大排队数) tomcat 的Connector配置如下 <Connector port="8080" ...

  9. 记intel杯比赛中各种bug与debug【其三】:intel chainer的安装与使用

    现在在训练模型,闲着来写一篇 顺着这篇文章,顺利安装上intel chainer 再次感谢 大黄老鼠 intel chainer 使用 头一次使用chainer,本以为又入了一个大坑,实际尝试感觉非常 ...

  10. 题解 CF1027D 【Mouse Hunt】

    这道题原本写了一个很复杂的DFS,然后陷入绝望的调试. 看了一下题解发现自己完全想复杂了. 这里大概就是补充一些题解没有详细解释的代码吧... (小声BB)现在最优解rank4(话说$O2$负优化什么 ...