理解 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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
vue中的event bus非父子组件通信解析
Oct 27 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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基本语法实例总结
2016/09/09 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
brook javascript框架介绍
2011/10/10 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
详解vue路由
2020/08/05 Javascript
python调用百度语音REST API
2018/08/30 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
Django REST framework内置路由用法
2019/07/26 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
django跳转页面传参的实现
2020/09/17 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
初中优秀班集体申报材料
2014/05/01 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
老乡聚会通知
2015/04/23 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
Java设计模式之代理模式
2022/04/22 Java/Android