JavaScript 预解析的原理及实现

开发 前端
JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢?

事实上或某种现象证明并不是这样的,通过《JavaScript权威指南》及网上相关资料了解到,JavaScript有“预解析”行为。理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在。为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript“预解析”,如果我的见解有误,还望指正。

JavaScript 预解析的原理及实现

(1) 如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先定义函数,然后才调用它。

  1. function showMsg { alert('This is message'); } showMsg; // This is message 

(2) 我们也知道函数可以定义在调用代码之后,如下代码也是能正常工作的。看起来调用showMsg的时候showMsg还是没有定义的,但能正常工作,则表明JavaScript是“预解析”的。

  1. showMsg; // This is message function showMsg { alert('This is message'); } 

(3) 上面是函数的例子,下面再来一个普通变量的例子。以下例子运行将会弹出undefined,表明***句的msg已经是定义了,只是没有初始化,它与var msg; alert(msg);是一样的。如果你把下面第二句注释掉,则会报“msg未定义”错误。这亦表明JavaScript是“预解析”的。

  1. alert(msg); //undefined var msg='This is message'; 

(4) 再来看一个例子,加深对JavaScript“预解析”印象。以下代码你将看到两次弹出的对话框都是显示This is message 2,为什么会这样呢?其实下面一前一后定义了两个同名函数,后面的showMsg覆盖了前面定义的(在JavaScript中,同名变量一样会存在覆盖问题),等于***个showMsg报废了。为什么第二次调用的showMsg不是调用它上面定义的那个message 1函数呢?这再次证明JavaScript有“预解析”行为。

  1. showMsg; // This is message 2 function showMsg { alert('This is message 1'); } showMsg; // This is message 2 function showMsg { alert('This is message 2'); } 

(5) JavaScript“预解析”是把变量或函数预解析到它们能调用的环境(变量运行时环境)中。如下代码看起来alert(msg)之前有看到msg的定义,但是程序运行还是报“msg未定义”错误,这是因为函数里定义的变量是函数的私有变量,外面不能直接调用,这表明JavaScript“预解析”并不是把所有定义的变量统一解析到一个全局对象中,比如window。

  1. function showMsg { var msg='This is message'; } alert(msg); // msg未定义 

(6) JavaScript“预解析”是分段进行的,准确说是分

以上就是JavaScript 预解析的原理及实现,希望对你有帮助。

责任编辑:王雪燕 来源: JavaScript/预解析/原理及实现
相关推荐

2019-12-06 10:59:20

JavaScript运行引擎

2022-03-17 08:55:43

本地线程变量共享全局变量

2018-08-07 16:17:35

JavaMySQL数据库

2020-07-10 09:04:55

HTTPS浏览器网络协议

2020-11-12 07:32:53

JavaScript

2020-01-13 10:45:35

JavaScript解析前端

2019-09-30 08:28:53

Delta LakeSpark数据原理

2012-06-29 13:54:11

Java内存原型

2012-09-21 09:45:59

2023-11-16 09:01:37

Hadoop数据库

2020-02-12 16:58:15

JavaScript前端技术

2016-10-21 11:04:07

JavaScript异步编程原理解析

2017-02-06 19:26:15

iOSCFArray开源

2017-03-02 10:49:37

推荐算法原理实现

2015-12-02 15:29:32

HTTP网络协议代理原理

2015-12-02 14:10:56

HTTP网络协议代理原理

2021-06-10 08:29:15

Rollup工具前端

2023-12-18 09:39:13

PreactHooks状态管理

2009-12-07 19:48:10

PHP单元素设计模式

2011-03-17 10:37:07

JavaScript
点赞
收藏

51CTO技术栈公众号