引言:

  javascript是一种解释型的脚本语言,它不同于java或者c#这种编译语言,不需要编译成游览器可识别的语言,而是由游览器动态解析和执行的。(本身就是游览器可以直接识别,javascript的解释器被称为javascript引擎,是游览器默认的一部分)

   要理解javascript的解析过程,先了解几个概念。

1.代码块

  javascript中的代码块是指由<script>标签分割的代码段。

  <script type="text/javascript">
console.log("这是代码块一");
  </script>   <script type="text/javascript">
console.log("这是代码块二");
  </script>

  JS是按照代码块来进行编译和执行的,代码块间相互独立,但变量和方法共享。

<script type="text/javascript">
console.log(str);        //因为没有定义str,所以浏览器会出错,下面的不能运行
console.log("我是代码块一");   //没有运行到这里
var test = "我是代码块一变量";
</script> <script type="text/javascript">
console.log("我是代码块二"); //这里有运行到
console.log(test);      //输出undefined,因为第一个代码块执行第一行代码的时候游览器报错,代码块中第一行下面的所有代码都没有执行。故test的定义了,但没有赋值。(为什么test定义了却没有赋值,因为变量申明的提升)
</script>

  上面的代码中代码块一中运行报错,但不影响代码块二的执行,这就是代码块间的独立性,而代码块二中能调用到代码一中的变量,则是块间共享性

2.声明式函数与赋值式函数

<script type="text/javascript">
function Fn(){ //声明式函数
     console.log('我是声明式函数');
}
var Fn = function{ //赋值式函数
  console.log('我是赋值式函数');
}
</script>

  声明式函数与赋值式函数的区别在于:在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。

预编译期与执行期:

  事实上,JS的解析过程分为两个阶段:预编译期(预处理)与执行期。

  预编译期JS会对本代码块中的所有声明的变量和函数进行处理,但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。

  

<script type="text/javascript">
Fn(); //执行结果:"执行了函数2",同名函数后者会覆盖前者
function Fn(){   //函数1
console.log("执行了函数1");
}
function Fn(){     //函数2
console.log("执行了函数2");
}
</script>
<script type="text/javascript">
Fn(); //执行结果:"执行了声明式函数",在预编译期声明函数及被处理了,所以即使Fn()调用函数放在声明函数前也能执行。
function Fn(){ //声明式函数
      console.log("执行了声明式函数");
}
var Fn = function(){ //赋值式函数
      console.log("执行了赋值式函数");
    }
</script>
//代码块一
<script type="text/javascript">
console.log(str);//浏览器报错,但并没有输出信息
</script> //代码块二
<script type="text/javascript">
console.log(str);//控制台输出"undefined"
var str = "aaa";
</script> //js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值,所以导致代码块二中的变量是unfiened的,而代码一中的变量是完全不存在的,所以浏览器报错。

  我们来看看下面这个例子

<script type="text/javascript">
Fn(); //浏览器报错:"undefined"
</script> <script type="text/javascript">
function Fn(){ //函数1
console.log("执行了函数1");
}
</script>

  ????

  因为javascript的引擎是按照代码块来进行预处理和执行的,也就是说预处理的只是执行到的代码块的声明函数和变量,而对于还未加载的代码块,是没法进行预处理的,这也是边编译边处理的核心所在。

总结:

  step 1. 读入第一个代码块。

  step 2. 做语法分析,有错则报语法错误(比如括号不匹配等)并跳转到step5,没错跳转step3。

  step 3. 对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。

  step 4. 执行代码段,有错则报错(比如变量未定义)。

  step 5. 如果还有下一个代码段,则读入下一个代码段,重复step2。

  step 6. 结束。

  

  

javascript的解析过程的更多相关文章

  1. JavaScript(2)——网页解析过程

    JavaScript 网页解析过程 前端编程工具:Visual Studio Code 快捷语法:Emmett语法 正题: 当我们在浏览器输入网址的时候,从服务器下载网页:这个文字经过HTML解析器的 ...

  2. JavaScript预解析

    定义:JavaScript"预解析",可以理解为把变量或函数预先解析到它们被使用的环境中. 通俗点讲,即认为浏览器在正式运行JavaScript代码前, 第一步,会预先根据关键字v ...

  3. javascript预解析和作用域

    JavaScript解析过程分为两个阶段: 一是:编译阶段.就是JavaScrip预解析阶段,在这个阶段JavaScript解析器将完成把JavaScript脚本代码转换到字节码; 二是:执行阶段.在 ...

  4. Javascript预解析、作用域、作用域链

    最近在看js的一些资料,总结一下昨晚看到的js作用域方面的知识,不准确的地方希望留言指正! 先看片段js代码如下: < script type="text/javascript&quo ...

  5. JavaScript URL传值过程中遇到的问题及知识点总结

    JavaScript URL传值过程中遇到的问题及知识点总结 Web系统开发过程中经常用到URL进行传值,刚刚接触时不太会解析,会出现中文乱码问题等. 1.父子页面之间的传值(在一个页面中以加载ifr ...

  6. 分析Json/Xml的解析过程

    json和xml都是用来进行数据的传输和交换的,是目前用来传输数据用的最多的两种技术,下面我们分别来认识一下它们及其解析过程 一.json 1.json简介 JSON是一种基于文本的轻量级数据交换格式 ...

  7. javascript的解析顺序

    一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. 1 alert(a);2 var a = 1;如果执行顺序是从上到下的 ...

  8. Javascript的执行过程详细研究

    下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我 ...

  9. 游览器中javascript的执行过程

    在讲这个问题之前,先来补充几个知识点,如果对此已经比较了解可以直接跳过 大多数游览器的组件构成如图 在最底层的三个组件分别是网络,UI后端和js解释器.作用如下: (1)网络- 用来完成网络调用,例如 ...

随机推荐

  1. 以登录实例简单介绍Servlet使用

    1.简单介绍 Java Servlet 是执行在 Web server或应用server上的程序,使用 Servlet.您能够收集来自网页表单的用户输入.呈现来自数据库或者其它源的记录.还能够动态创建 ...

  2. vue的组件(先学习其他的ES6知识,之后再看这个) (未完)

    https://blog.csdn.net/qq20004604/article/details/56965703

  3. [position]返回顶部

    position:fixed;实现 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. (3)Smali系列学习之Smali语法详解

    数据类型 Dalvik字节码只有两种格式:基本类型和引用类型.对象和数组属于引用类型 语法 含义 V void,只用于返回值类型 Z boolean B byte S short C char I i ...

  5. zookeeper伪分布式安装

    本文介绍zookeeper伪分布式安装. 所谓 “伪分布式集群” 就是在1台PC中启动多个zookeeper的实例.“完全分布式集群” 是每1台PC启动1个ZooKeeper实例. 由于我的测试环境P ...

  6. 第三篇:python函数

    1.python函数 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你 ...

  7. [Tips]Javascrip计算文件行数

    function calcLineCount(filename, callback) { var fs = require('fs'); var fileStream = fs.createReadS ...

  8. [Buzz Today]2013.08.18

    # Go 语言实现memcached:groupcache memcached作者Brad Fitzpatrick用Go语言重新实现了memcached. groupcache继承了memcached ...

  9. 第二百零八节,jQuery EasyUI,SplitButton(分割按钮菜单)组件

    jQuery EasyUI,SplitButton(分割按钮)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SplitButton(分割按钮)组件的使用 ...

  10. 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...