实例分析浏览器中“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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
js实现登录与注册界面
Nov 01 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 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实现简单数字分页效果
2015/07/26 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
12步教你理解Python装饰器
2016/02/25 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
python 常见的反爬虫策略
2020/09/27 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
营业员演讲稿
2013/12/30 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
介绍信怎么写
2015/05/05 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS