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

浏览器在读取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
解析器
浏览器解析javascript、uc浏览器javascript、谷歌浏览器javascript、浏览器启用javascript、浏览器禁用javascript,以便于您获取更多的相关知识。

时间: 2024-07-30 14:38:46

实例分析浏览器中“JavaScript解析器”的工作原理_javascript技巧的相关文章

Javascript解析URL方法详解_javascript技巧

URL : 统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成: scheme://host:port/path?query#fragment scheme  = 通信协议 (常用的http,ftp,maito等) host = 主机 (域名或IP) port = 端口号 path = 路径 query = 查询 可选,用于给动态网页(如使用CGI.ISAPI.PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数

实例讲解使用原生JavaScript处理AJAX请求的方法_javascript技巧

Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制.它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面.另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载. 下面是对一个基本的 Ajax 请求进行剖析: var xhr = new XMLHttpRequest(); xhr.open('GET', 'send-ajax-data.php'); xhr.send(null); 在这里, 我们创建了一个能向服务

javascript解析xml字符串的函数_javascript技巧

但是是XML字符串,则在两种浏览器下就会有所不同,IE下可以直接使用LoadXML方法解析XML字符串,而在FF下则要使用DOMParser 对象的parseFromString() 方法即 var oParser=new DOMParser(); xmlDoc=oParser.parseFromString(xmlStr,"text/xml"); 为了在两种浏览器中能通用,我想到了javascritp的发生异常的处理方式,就是try...catch... 复制代码 代码如下: fun

JavaScript中Object.prototype.toString方法的原理_javascript技巧

在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法. var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]" 本文要讲的就是,toString方法是如何做到这一点的,原理是什么. ECMAScript 3 在ES3中,Object.prototype.toString方法的规范如下: 15.2.

js中 javascript:void(0) 用法详解_javascript技巧

javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a>  这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here<

javascript 框架小结 个人工作经验_javascript技巧

/**************************************************************************************** 作者:萧 枫 QQ:77182997 MSN:xiaofengnet@hotmail.com Email:xiaofengnet@163.com 网址:http://www.d369.net 请保留版权 谢谢合作 版本:V 1.6.1 /*****************************************

javascript引用类型指针的工作方式_javascript技巧

先看个例子: <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined console.log(b.x);// --> [object Object] </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?"."b.x不是应该跟a.

JS操作XML实例总结(加载与解析XML文件、字符串)_javascript技巧

本文实例讲述了JS操作XML的方法.分享给大家供大家参考,具体如下: 我的xml文件Login.xml如下. <?xml version="1.0" encoding="utf-8" ?> <Login> <Character> <C Text="热血" Value="0"></C> <C Text="弱气" Value="1&qu

一道优雅面试题分析js中fn()和return fn()的区别_javascript技巧

在js中,经常会遇到在函数里调用其它函数的情况,这时候会有 fn() 这种调用方式,还有一种是 return fn() 这种调用方式,一些初学者经常会被这两种方式给绕晕了.这里用一个优雅的面试题来分析一下两种方式的不同之处.  var i = 0; function fn(){ i++; if(i < 10){ fn(); }else{ return i; } } var result = fn(); console.log(result); 这是一道隐藏了坑的面试题,看似很简单,大部分人可能想