首先看一段代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <span>我是span</span>

        <script type="text/javascript">

           alert(cnt);

            var cnt=60;

            function huoqu(){

            }

        </script>

    </body>

</html>

代码的执行顺序是从上往下的，当代码执行到script标签时，也就开始执行js代码了。

执行js代码一般分两步：1.预解析代码。   2.逐行执行代码。

第一步：预解析代码

预解析代码呢，主要会把var , function , 参数等一些东西 存储进仓库里面(内存)。

1.var 一般用于声明变量，预解析代码的时候，等号后面的赋值过程不会执行，所以预解析时的var 变量 都是未定义的。

2,.function 函数呢，预解析的时候，值就是函数里面的内容。

当变量和函数重名时：就只留下函数的值，不管顺序谁前谁后。所以函数的优先级比变量高。注意：这只是预解析。

当函数和函数重名时：会留下后面那个，会遵循上下文机制。

第二步：逐行执行代码

当预解析完成之后，就开始逐行执行代码了，全部代码都会完整的执行。

实例：下面的alert分别会弹出什么值

 <script>

    alert(a);

    var a=1;

    function a(){alert(2);}

    alert(a);

    var a=3;

    alert(a);

    function a(){alert(4);}

    alert(a);

 </script>

第一步：预解析

上面说过，预解析时只会把var , function ,参数等存储起来，所以：

执行到第二行时，a 的值是未定义。

执行到第四行时，a 的值是函数本身，也就是function a(){alert(2);}。

执行到第六行时，a 的值还是第四行时的值，也就是function a(){alert(2);}，因为函数的优先级比变量高。

执行到第八行时，a 的值就变成了function a(){alert(4);} ,因为当两个函数重名时，遵循代码从上往下执行。

第二步：代码逐行执行

预解析完成之后，就是代码逐行执行了，

第二行：会弹出function a(){alert(4);} ，因为预解析完成之后，被存进内存的a 的值就是function a(){alert(4);}

第三行：第三行里有表达式，a 被赋了一个新的值1  表达式会改变变量的值。表达式可以改变预解析的值。

第四行：只是函数的声明，并没有用到表达式，而且也没有函数的调用，所以不会改变a 的值。

第五行：因为a 的值没有变化，所以还是1

第六行：使用了表达式，a 被赋了一个新的值3

第七行：会弹出3

第八行：函数的声明，不会改变a 的值。

第九行：a的值没有改变，所以还是3

最后结果为：

<script>

 2    alert(a);//弹出function a(){alert(4)}

 3    var a=1;

 4    function a(){alert(2);}

 5    alert(a);//弹出1

 6    var a=3;

 7    alert(a);//弹出3

 8    function a(){alert(4);}

 9    alert(a);//弹出3

10 </script>

js解析器的执行原理的更多相关文章

  1. node npm --save,不同JS解析器的内置全局变量，PROMISE,CONST---ES6

    npm  --save 当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件packa ...

  2. [Java多线程]-线程池的基本使用和部分源码解析(创建，执行原理)

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 多线 ...

  3. TypeScript 装饰器的执行原理

    装饰器本质上提供了对被装饰对象 Property​ Descriptor 的操作,在运行时被调用. 因为对于同一对象来说,可同时运用多个装饰器,然后装饰器中又可对被装饰对象进行任意的修改甚至是替换掉实 ...

  4. js解析器(重要!)

    JavaScript有"预解析"的特性,理解预解析是很重要的,不然在实际开发中可能会遇到很多无法解析的问题,甚至导致程序bug的存在. #js预解析执行过程: 预解析:(全局作用域 ...

  5. js解析器

    1>js的预解析 找var function 参数等 所有的变量,在正式运行代码前,都提前赋了一个值:未定义 所有的函数,在正式运行代码前,都是整个函数块. 遇到重名的:只留一个 如果变量与函数 ...

  6. JS循环嵌套的执行原理

    [逆战班] 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,外循环执行一次,内循环全部执行完,直到外循环执行完毕,整个循环结束. while.do.. while和for循环语句都可以进行嵌 ...

  7. javascript解析器原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤 1. “找一些东西”: v ...

  8. 浏览器中“JavaScript解析器”工作原理

    浏览器在读取HTML文件的时候,只有当遇到<script>标签的时候,才会唤醒所谓的“JavaScript解析器”开始工作. JavaScript解析器工作步骤: 1.“找一些东西”: v ...

  9. 深入浅出 Vue.js 第九章 解析器---学习笔记

    本文结合 Vue 源码进行学习 学习时,根据 github 上 Vue 项目的 package.json 文件,可知版本为 2.6.10 解析器 一.解析器的作用 解析器的作用就是将模版解析成 AST ...

随机推荐

  1. PHP命令注入笔记

    一.PHP命令注入介绍 在学习php相关的攻击时,遇到了Command Injection,即命令注入攻击,是指这样一种攻击手段,黑客通过把HTML代码输入一个输入机制(例如缺乏有效验证限制的表格域) ...

  2. angular-bootstrap ui-date组件问题总结

    使用angular框架的时候,之前用的时间控件是引入My97DatePicker组件实现的,但是因为 1.My97DatePicker样式不太好看以及偶尔会出现底部被遮盖的情况.点击不可编辑input ...

  3. mysql技能提升篇 - Sqlyog高级应用

    mysql作为绝大部分公司使用的数据库,自然是牛牛牛! 每个人都能设计数据库,都能从删库到跑路.但是,如何做到更好,更快,更准地建立你的mysql数据库,这是个值得关注的问题(尽管很多人已经去搞大数据 ...

  4. Minutes和TotalMinutes的区别

    今天测试提了一个BUG,说是消息提醒的时机不对,设置的提前2小时,还没到就提醒了. 看了下代码 (m.ExpectReceiveTime - DateTime.Now).Minutes < (p ...

  5. Android开发之基于监听的事件处理

    在Android 应用开发过程中,常用监听事件如下:(1) ListView事件监听setOn ItemSelectedListener:鼠标滚动时触发setOnItemClickListener: ...

  6. vue-chat项目之重构与体验优化

    前言 vue-chat 也就是我的几个月之前写的一个基于vue的实时聊天项目,到目前为止已经快满400star了,注册量也已经超过了1700+,消息量达2000+,由于一直在实习,没有时间对它频繁地更 ...

  7. Deep learning：一(基础知识_1)

    本文纯转载: 主要是想系统的跟tornadomeet的顺序走一遍deeplearning; 前言: 最近打算稍微系统的学习下deep learing的一些理论知识,打算采用Andrew Ng的网页教程 ...

  8. WordPress-基础设置之常规设置

    对于第一次使用Wordpress系统的朋友,请先别着急发布文章及进行其他操作,为了更加科学的使用及管理wordpress,应该需要对其进行相关设置,主要涉及3个部分,一.常规设置,二.阅读设置,三.固 ...

  9. JavaScript中错误正确处理方式，你用对了吗？

    JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化.如果将浏览器设想为JavaScript的事件驱动工具,那么当错误发生时,某个事件就会被抛出.理论上 ...

  10. JavaWeb（六）之MVC与三层架构设计

    前言 这段时间要学习hadoop,但是也希望把自己的web知识复习起来.所以花自己休息的时间把这些web的知识好好的巩固一下!没有什么可以阻挡我前进的脚步. 首先我们先了解一下: C/S:客户端 / ...