浏览器是怎么解析JS的代码

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

JavaScript解析器工作步骤：

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

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

遇到变量和函数重名了，只留下函数

遇到函数重名了，根据代码的上下文顺序，留下最后一个

2、逐行解读代码。

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

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

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

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”。

转载于:https://www.cnblogs.com/leoshuaige/p/7077638.html

浏览器是怎么解析JS的代码相关推荐

解决360等等浏览器兼容模式解析不兼容代码
之前写的代码不是很规范 , 在今天测试下发现360浏览器等等的浏览器使用兼容模式会有很多不兼容 , 网上了解过一下 , 说是很多浏览器的兼容模式可能就是为了兼容IE7之前的网站代码 , 而非我们字面理 ...
对ie浏览器版本识别的js代码
对ie浏览器版本识别的js代码 // 判断是pc端还是还是手机 var theUA = window.navigator.userAgent.toLowerCase(); // 识别ie的 var t ...
【行情采集】解析JS 1秒获取5000支股票瞬时行情（送代码，含筛选方法）
提示:采集行情仅用于个人量化分析,不做为交易依据解析JS 1秒获取5000支股票瞬时行情(送代码,含筛选方法) 前言一.JS采集? 二.代码如下总结前言量化分析,行情先行. 一.JS采集? ...
vscode+node.js 调试js程序/edge浏览器调试javaScript/edge浏览器独立调试编辑并保存代码/浏览器内开发者工具element/console布局(focus Mode)
文章目录 declaration vscode 对于javascript的支持环境使用node.js调试纯js代码使用浏览器调试试验代码 Note! edge浏览器独立调试编辑并保存代码窗格 ...
【行情采集】解析JS 0.5秒获取版块（可分行业、概念、地域）今日、5日内、10日内资金流向（送代码）
提示:采集行情仅用于个人量化分析,不做为交易依据解析JS 0.5秒获取版块(可分行业.概念.地域)今日.5日内.10日内资金流向(送代码) 前言一.为什么要观察资金流? 1.资金流定义 2.资金流 ...
java解析js代码----笔记
笔记直接贴代码了 package top.demo.js;import javax.script.Invocable; import javax.script.ScriptEngine; import ...
js经典代码200句
200多个js技巧代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文 ...
浏览器是先执行js还是先加载HTML,在HTML中使用JavaScript（浏览器对js的加载机制分析）...
前言: 向HTML页面中插入JavaScrip的主要方法,就是使用要点: 1.script标签用外链的src引入文件时,内嵌的js代码无效. 2.只要不存在defer和async属性,浏览器都会按照 ...
python动态页面元素爬取_Python开发爬虫之动态网页抓取篇：爬取博客评论数据——通过浏览器审查元素解析真实网页地址...
由于主流网站都使用JavaScript展示网页内容,和前面简单抓取静态网页不同的是,在使用JavaScript时,很多内容并不会出现在HTML源代码中,而是在HTML源码位置放上一段JavaScrip ...
Python开发爬虫之动态网页抓取篇：爬取博客评论数据——通过浏览器审查元素解析真实网页地址...
由于主流网站都使用JavaScript展示网页内容,和前面简单抓取静态网页不同的是,在使用JavaScript时,很多内容并不会出现在HTML源代码中,而是在HTML源码位置放上一段JavaScrip ...

浏览器是怎么解析JS的代码

浏览器是怎么解析JS的代码相关推荐

最新文章

热门文章