理解 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 相关文章推荐
浅谈JavaScript之事件绑定
Jul 08 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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数组无限分级数据的层级化处理代码
2012/12/29 PHP
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python实现word2Vec model过程解析
2019/12/16 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
员工自我鉴定
2013/10/09 职场文书
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
专科文秘应届生求职信
2013/11/18 职场文书
公司新年寄语
2014/04/04 职场文书
纠纷协议书
2014/04/16 职场文书
课外活动总结范文
2014/07/09 职场文书
神秘岛读书笔记
2015/07/01 职场文书
旅行社计调工作总结
2015/08/12 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android