实例分析浏览器中“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 相关文章推荐
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
JavaScript中的闭包
Feb 24 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
Element MessageBox弹框的具体使用
Jul 27 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作的文本留言本的例子(六)
2006/10/09 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
Javascript刷新页面的实例
2017/09/23 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
浅谈用VSCode写python的正确姿势
2017/12/16 Python
详解python运行三种方式
2019/05/13 Python
Python 实现交换矩阵的行示例
2019/06/26 Python
详解python中index()、find()方法
2019/08/29 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
Python中如何定义一个函数
2016/09/06 面试题
三年级音乐教学反思
2014/01/28 职场文书
2014年情人节活动方案
2014/02/16 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
刑事案件上诉状
2015/05/23 职场文书
地道战观后感500字
2015/06/04 职场文书
收入证明申请书
2015/06/12 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
k-means & DBSCAN 总结
2021/04/27 Python