这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要对 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"。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0515/329655.html