理解 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中的new的使用方法与注意事项
May 16 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
javascript实现密码强度显示
Mar 18 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
基于Vue插入视频的2种方法小结
Apr 02 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获取系统变量方法小结
2015/05/29 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
Python中import机制详解
2017/11/14 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python输入中文的实例方法
2020/09/14 Python
Python常用断言函数实例汇总
2020/11/30 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
自我鉴定四大框架
2014/01/17 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
助残日活动总结
2014/08/27 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
罚款通知怎么写
2015/04/22 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技