认识javascript的引擎之--1
前言:
一:每一款浏览器里面都能执行js脚本,那是因为制造商在浏览器里面加入了js引擎。也就是说js引擎在浏览器里面占有一席之地。
1.开始的时候js处于沉睡状态,直到运行页面遇到 <script> 这个标签的时候就被浏览器叫醒了:浏览器说,js引擎有个叫<script> 的叫你
2.然后js引擎就出去招待客人 <script>。到这个时候js引擎就开始工作了。
二:浅谈js引擎的工作
1.预解析
js引擎工作的时候回预先往自己的一个仓库里面存数据,然后在进行读代码的工作。
js引擎会读取 var function 参数... 在遇见这个声明的时候,js引擎就会把这些存储在自己的仓库里面。
遇到所有的变量,在正式运行代码之前,都提前赋了一个值:未定义 a = ..... //undefined 未定义
所有的函数,在正式运行代码之前,都是整个函数块:fn1 = function fn1(){ alert(2); }
遇到重名的:只留一个
        1.变量和函数重名了,就只留下函数。  因为变量为未定义( undefine)函数有值,所以保留有值的。
        2.函数与函数,后出现的函数会覆盖前出现的函数。
2.读代码(逐行读取从上到下)
当预解析完毕就开始读取代码:读取代码的时候遇到变量的 表达式:= + - * / % ++ -- ! 参数…… 表达式可以修改预解析的值! 就会到自己的仓库里面查看是否有这个变量,并修改其仓库里面的变量值。
三点:面试题问答
 alert(a);                    // function a (){ alert(4); }
 var a = 1;
 alert(a);                    //
 function a (){ alert(2); }
 alert(a);                    //
 var a = 3;
 alert(a);                    //
 function a (){ alert(4); }
 alert(a);                    //
 js引擎如何执行呢?
       1.预解析:解析 变量,function 参数等   放入自己的仓库存起来
           解析到第2行: a =...
           解析到第4行: a = function(){alert(2)}   这时候遇到同名的只保留一个,保留函数
           解析到第6行: 仓库里面依旧是   a = function(){alert(2)}
           解析到第8行: 仓库里面  a = function(){alert(4)}    他会覆盖第5行的a
           解析完毕:仓库里面剩下  a = function(){alert(4)}
     2.读取操作(读取的时候逐行读取)
         读取到第1行:先查看仓库里面有什么,仓库里面只剩下 function(){alert(4)}   输出: function(){alert(4)}
         读取到第2行:这是一行表达式,表达式会修改仓库里面的值  仓库里面 a = 1
         读取到第3行:输出  1
         读取到第4行: 只是一个函数的声明,不是表达式所以仓库里面还是 a = 1
         读取到第5行:输出1
         读取到第6行:仓库里面 a=3
         读取到第7行:输出 3
         读取到第8行:只是一个函数的声明,不是表达式所以仓库里面还是 a = 3
         读取到第9行:输出 3
认识javascript的引擎之--1的更多相关文章
- 推荐13款javascript模板引擎
		
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
 - 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
		
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
 - JavaScript模板引擎artTemplate.js——为什么使用模板引擎?
		
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
 - 最简单的JavaScript模板引擎
		
在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...
 - 简单JavaScript模版引擎优化
		
在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...
 - JavaScript模板引擎实例应用
		
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
 - JavaScript 模板引擎实现原理解析
		
1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...
 - Javascript模板引擎mustache.js详解
		
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
 - Popmotion – 小巧,灵活的 JavaScript 运动引擎
		
Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...
 - 20个免费的 JavaScript 游戏引擎分享给开发者
		
这篇文章收集了20个免费的 JavaScript 游戏引擎分享给开发者.这些游戏引擎能够帮助游戏开发人员更快速高效的开发出各种好玩的游戏. 使用 HTML5.CSS3 和 Javascript 可以帮 ...
 
随机推荐
- Thrift源代码分析(七)-- TServerserver分析
			
Thrift採用了TServer来作为server的抽象,提供了多种类型的server实现.用TServerTransport作为server的Acceptor抽象,来监听端口.创建clientSoc ...
 - HDU 1051: Wooden Sticks(贪心)
			
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
 - 微软版UnityVs横空出世,究竟是谁成就了谁?
			
在移动互联网浪潮持续发力下,手游行业也异常火热.在现在的手游行业,Unity3d无疑是最耀眼的哪颗星.一直觉得Unity面向设计师是友好的,对程序猿这边并非非常友好. 2012年用Unity时开发工具 ...
 - bzoj3275: Number(最小割)
			
3275: Number 题目:传送门 题解: 双倍经验@bzoj3158 代码: #include<cstdio> #include<cstring> #include< ...
 - zzuoj--10401--物资调度(dfs)
			
A.物资调度 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 93 Solved: 52 [Submit][Status][Web Board] De ...
 - HDU 1754 I Hate It【线段树  单点更新】
			
题意:给出n个数,每次操作修改它的第s个数,询问给定区间的数的最大值 把前面两道题结合起来就可以了 自己还是敲不出来------------- #include<iostream> #in ...
 - 关于exsi的虚拟网络
			
相关术语: VM Network 默认的网络 VSwitch (默认)标准交换机 (exsi的内核中) Port groups (用来定义各个不同vlan) DVSwitch分布式交换机(exs ...
 - ActiveMQ学习笔记(14)----Destination高级特性(二)
			
1. Visual Destinations 1.1 概述 虚拟Destination用来创建逻辑Destinations,客户端可以通过它来产生和消费消息,它会把消息映射到物理Destination ...
 - Webpack的作用(一个基础的打包编译工具在做什么?)
			
结论: 转换ES6语法成ES5 处理模块加载依赖 生成一个可以在浏览器加载执行的 js 文件 第一个问题,转换语法,其实我们可以通过babel来做.核心步骤也就是: 通过babylon生成AST 通过 ...
 - ES6学习笔记(二十二)ArrayBuffer
			
ArrayBuffer ArrayBuffer对象.TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口.它们都是以数组的语法处理二进制数据,所以统称为二进 ...