理解 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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
JS动画效果代码3
Apr 03 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
实例讲解python函数式编程
2014/06/09 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
python实现图书借阅系统
2019/02/20 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
小学爱国卫生月活动总结
2014/06/30 职场文书
匿名检举信范文
2015/03/02 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers