实例分析浏览器中“JavaScript解析器”的工作原理


Posted in Javascript onDecember 12, 2016

浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作。

JavaScript解析器工作步骤:

1、“找一些东西”: var、 function、 参数;(也被称之为预解析)

备注:如果遇到重名分为以下两种情况:

  • 遇到变量和函数重名了,只留下函数
  • 遇到函数重名了,根据代码的上下文顺序,留下最后一个

2、逐行解读代码。

备注:表达式可以修改预解析的值

JS解析器在执行第一步预解析的时候,会从代码的开始搜索直到结尾,只去查找var、function和参数等内容。一般把第一步称之为“JavaScript的预解析”。而且,当找到这些内容时,所有的变量,在正式运行代码之前,都提前赋了一个值:未定义;所有的函数,在正式运行代码之前,都是整个函数块。

实例分析:

实例一:

<!DOCTYPE html>
 <html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 alert(a);
 </script>
</head>
 <body>
 </body>
</html>

这段代码运行后,浏览器会报错。

原因:由于,“JavaScript解析器”在解析JS代码时,未找到var、function、参数等其中的任何一个,所以,当逐行执行代码时,因为在“仓库”中找不到a,不认识a,就会报错。

实例二:

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 alert(a);
 var a = 1;
 </script>
 </head>
 <body>
 </body>
 </html>

这段代码运行后,浏览器会弹出”undefined”。

原因:由于,“JavaScript解析器”在解析JS代码时,找到var关键字,然后得知有一个变量a,所以会给a默认赋值一个undefined值,存入“仓库”中,所以,当逐行执行代码时,找到变量a,因为此时的a的值为undefined,所以弹出的值为undefined。

实例三:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 var a = 1;
 alert(a);
 </script>
</head>
<body>
</body>
</html>

这段代码运行后,浏览器会弹出数字“1”。

原因:由于,“JavaScript解析器”在解析JS代码时,找到var关键字,然后得知有一个变量a,所以会给a默认赋值一个undefined值,存入“仓库”中,在逐行执行代码时,先找到变量a,此时的a的值为undefined,当执行到var a= 1 这行代码时,a得到了一个新的赋值“1”所以弹出的值为数字“1”。

实例四:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 alert(a);
 var a = 1;
 alert(a);
 function a () {
 alert(2);
 }
 alert(a);
 var a = 3;
 alert(a);
 function a () {
 alert(4);
 }
 alert(a);
 </script>
</head>
<body>
</body>
</html>

这段代码运行后,弹出值的顺序依次为:function a () {alert(4);}、1、1、3、3

原因:由于,“JavaScript解析器”在逐行解析代码时,先找到var关键字,然后得知有一个变量a,所以会给a默认赋值一个undefined值,存入“仓库”中,然后,继续向下解析代码,当找到function a () {alert(2);}时,根据“函数和变量重名,保留函数”的规则,此时的a变为function () {alert(2);},再继续向下找,当找到变量a的时候,不变,仍继续向下找,当找到函数function () {alert(4);}时,根据“函数重名上下文”原则,替换为function () {alert(4);},最终a被赋值为function () {alert(4);},存到“仓库”中,当逐行执行代码时,执行到第一个alert(a)时,将会弹出“function () {alert(4);}”,接着向下执行,当执行到a=1时,由于表达式可以改变预解析的值,所以此时的a变为1,执行到第二个alert(a)时,弹出值为1,当执行到function a () {alert(2);}时,由于此时是一个函数声明,并不会修改a的值,所以执行到第三个alert(a)时,弹出的仍为数字“1”,依次类推,此后将会陆续弹出“3”、“3”。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
复制js对象方法(详解)
Jul 08 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
JS双击变input框批量修改内容
Dec 12 #Javascript
jQuery中animate的几种用法与注意事项
Dec 12 #Javascript
Websocket协议详解及简单实例代码
Dec 12 #Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 #Javascript
jQuery实现字符串全部替换的方法
Dec 12 #Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 #Javascript
简单实现jquery焦点图
Dec 12 #Javascript
You might like
php注销代码(session注销)
2012/05/31 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
2016/06/14 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
编辑求职信样本
2013/12/16 职场文书
法学专业自我鉴定
2014/02/05 职场文书
党员公开承诺书范文
2014/03/25 职场文书
企业安全生产责任书
2014/04/14 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
安阳殷墟导游词
2015/02/10 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技