博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS的解析与执行过程—全局预处理阶段之全局词法环境对象
阅读量:5055 次
发布时间:2019-06-12

本文共 1550 字,大约阅读时间需要 5 分钟。

问题:有如下代码

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

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

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

1、预处理阶段;

2、执行阶段;

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

1、全局预处理

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

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

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

b、用var定义的变量;

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

1 LexicalEnviroment: { 2     a: undefined, 3     b: undefined, 4     test: 对函数的一个引用 5 } 6  7 //用声明的方式创建的函数 8 function test(params) { 9     10 }11 //用函数表达式创建的函数12 var test1 = function(params) {13     14 }15 //用var定义的变量16 var a = 5;17 var b;18 //其他变量19 c = 6;

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

1 f();2 g();3 4 function f() {5     console.log("ff");6 }7 var g = function() {8     console.log("gg");9 }

得到如下结果:

1 ff2 e:\Code\JavaScript\day03\test2.js:23 g();4 ^5 6 TypeError: g is not a function

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

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

改一下位置,这样就对了

1 f();2 var g = function() {3     console.log("gg");4 }5 g();6 7 function f() {8     console.log("ff");9 }

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

1 console.log(a);2 console.log(b);3 4 var a = 5;5 b = 6;

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

1 undefined2 e:\Code\JavaScript\day03\test3.js:23 console.log(b);4             ^5 6 ReferenceError: b is not defined

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

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

声明:

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

转载于:https://www.cnblogs.com/jixiaohua/p/10480855.html

你可能感兴趣的文章
Group_Concat函数示例
查看>>
ZOJ 3209 Treasure Map (DLX精确覆盖)
查看>>
使用python实现简单爬虫
查看>>
hbuilder mui调用系统裁剪图片、头像裁剪-Android
查看>>
Nuxt使用iconfont矢量图标
查看>>
IE6图片透明问题
查看>>
40个Android问题
查看>>
项目质量管理三角形
查看>>
获取32位随机码(uuid)的方法
查看>>
linux内核 同步
查看>>
wamp2.4.4 如何配置虚拟主机及反向代理(解决跨域问题)
查看>>
(官网)虚幻3--入门指南: 游戏性元素
查看>>
3.2-1937 Problem D
查看>>
jquery 选择器
查看>>
Oracle表恢复(truncate)
查看>>
【转】Java 内存模型及GC原理
查看>>
Django之模板
查看>>
Linux配置Spark
查看>>
页面有特别多的多级联动怎么处理和优化
查看>>
php的function() use($args)用法
查看>>