理解 JavaScript 预解析


Posted in Javascript onOctober 25, 2009

事实上或某种现象证明并不是这样的,通过《JavaScript权威指南》及网上相关资料了解到,JavaScript有“预解析”行为。理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在。为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript“预解析”,如果我的见解有误,还望指正。
(1)如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先定义函数,然后才调用它。

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

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

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

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

(6)JavaScript“预解析”是分段进行的,准确说是分<script>块进行的。以下代码出现在同一个页面的两个脚本块中,同时定义了三个同名函数。程序运行结果表明第二个脚本块的showMsg()没有覆盖前面两个showMsg(),而第一个脚本块的第二个showMsg()则覆盖了第一个showMsg()。
<body> 
<script type="text/javascript"> 
showMsg(); //This is message 2 
function showMsg() 
{ 
alert('This is message 1'); 
} 
function showMsg() 
{ 
alert('This is message 2'); 
} 
</script> 
<script type="text/javascript"> 
function showMsg() 
{ 
alert('This is message 3'); 
} 
</script> 
</body>

作者:WebFlash
出处:http://webflash.cnblogs.com
Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 #Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 #Javascript
javascript window对象属性整理
Oct 24 #Javascript
Javascript 模式实例 观察者模式
Oct 24 #Javascript
Jquery 弹出层插件实现代码
Oct 24 #Javascript
js 操作符实例代码
Oct 24 #Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 #Javascript
You might like
PHP 替换模板变量实现步骤
2009/08/24 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
超级退弹代码
2008/07/07 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
JS中表单的使用小结
2014/01/11 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
基于Django框架利用Ajax实现点赞功能实例代码
2018/08/19 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python占位符输入方式实例
2019/05/27 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
12岁生日演讲稿
2014/05/14 职场文书
就业协议书
2014/09/12 职场文书
房屋租赁协议书
2014/10/18 职场文书
被委托人身份证明
2015/08/07 职场文书
2016年十一促销广告语
2016/01/28 职场文书
能让Python提速超40倍的神器Cython详解
2021/06/24 Python