认识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 可以帮 ...
随机推荐
- 夜· 启程
有写博客的念头,还是在去年的时候. 那天早上我非常兴奋,也非常忐忑.由于我立即要去JD面试.JD大家都知道的,对我这样的没见过世面的人来说.这就是个高高在上殿堂. 结果我的满腔热血.被一张面试题卷给浇 ...
- 50个Android开发技巧(12 为控件加入圆角边框)
控件的圆角边框能够使你的App看起来更美观,事实上实现起来也非常easy. (原文地址:http://blog.csdn.net/vector_yi/article/details/24463025) ...
- linux 挂载存储步骤(以emc 5300为例)
挂载存储有两种方式:光纤模式(hub卡)和iscsi (以太网).两者大体思路是一样的. 1.在应用服务器上安装hub卡,连接光纤到光纤交换机上: 2.在应用服务器安装hub卡驱动程序: 3.在存储上 ...
- Windows 10 10586 升级
- STM8S汇编代码分析
转载:http://blog.csdn.net/u010093140/article/details/50021897使用STVD建立完汇编工程项目之后(具本建立方法可以看我的另一篇博文http:// ...
- 微信小程序------开发测试
一.注册小程序 注:微信小程序注册的邮箱不能被其他微信公众平台注册,未被微信开放平台注册,未被给人微信号绑定的微信号. 二.注册完小程序后,下载开发者工具 开发者工具的使用: 1.打开开发者工具:用已 ...
- CSS3———linear-gradient() 线性渐变
线性渐变linear-gradient() 遇到了这样的css样式 body { height: 100%; background-color: #ffffff; background-image: ...
- 织梦DEDECMS系统中文章内容为空 用SQL语句如何删除?
织梦后台里提供了清空内容为空的文章,可是发现并不好用,有些空文章还是删除不了,而有些文章不是空的,只是采到了几个字,这些无法清除,于是就手动来清除这个文章.开始是一个一个文章找,一个一个来删除,后来觉 ...
- ajax同时提交表单且包含文件
说明一下:FormData对象是html5的一个对象,目前的一些主流的浏览器都已经兼容.ie8暂时不支持,不支持FormData的,可以使用方法二,下面会介绍.接着说FormData,它是一个html ...
- CodeForces-722C Destroying Array 并查集 离线操作
题目链接:https://cn.vjudge.net/problem/CodeForces-722C 题意 给个数组,每次删除一个元素,删除的元素作为一个隔断,问每次删除后该元素左右两边最大连续和 思 ...