javascript 执行过程

1.语法检测(有没有基本的语法错误,例如中文,关键字错误...)
2.词法分析(预编译)

(1)创建全局GO(global object)对象

(2)对var声明的变量进行声明提升但不赋值,放入GO对象中

(3)对函数体整体进行提升,放入GO对象中

3.逐行执行

一.全局 直接是script标签中的代码,不包括函数执行

    <script type="text/javascript">
console.log(a); var a = 100;
console.log(a) var b = 200
var c = 300
function a(){ }
function fun(){ }
</script>

执行前:
1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析

GO = {
...//省略自带属性
}

2.分析变量声明,变量名为属性名,值为undefined

GO = {
a : undefined,
b : undefined,
c : undefined
}

3.分析<b>函数声明</b>,函数名为属性名,值为函数体,如果函数名和变量名相同,则将其覆盖

GO = {
a : function a(){ },
b : undefined,
c : undefined,
fun : function fun(){ }
}

此时,GO就是预编译完成的最终对象,词法分析结束

4.逐行执行,分析过变量声明,函数声明,这里就不用管了,只管赋值(变量赋值)
当执行到“var a = 100;”的时候,a赋了一次值,值改变为100

GO = {
a : 100,
b : undefined,
c : undefined,
fun : function fun(){ }
}

所以代码的执行结果是:

二.函数执行时

  

函数执行时

创建AO对象 activation object

找形参和变量声明,将变量和形参名作为AO属性名,值为undefined

将实参和形参统一

在函数体里面找到函数声明,值赋予函数体

            function test(){
console.log(b);
if(a){ //undefined转换成false
var b = 100;
}
c = 123;
console.log(c);
}
var a; test(); a = 20; test(); console.log(c);

执行过程:

生成GO

GO = {

}

变量声明

GO = {
a : undefined
}

函数声明

GO = {
a : undefined,
test : function
}

逐行执行;
test调用,生成test.AO ={}
参数 没有,跳过
变量声明

test.AO = {
b : undefined
}

函数声明 没有,跳过
得到结果

test.AO = {
b : undefined
}

逐行执行
改变GO

GO = {
a : undefined,
test : function,
c : 123
}

a值发生改变

GO = {
a : 20,
test : function,
c : 123
}

test调用 生成test.AO={}
参数 没有 跳过
变量声明

test.AO = {
b : undefined
}

函数声明 没有
结果

test.AO = {
b : undefined
}

逐行执行

test.AO = {
b : 100
}

执行结果:

js预编译和函数执行的更多相关文章

  1. JS预编译详解

    我们都知道javascript是解释型语言,执行的特点呢是编译一行,执行一行.按照这个思路有时候我们在运行代码时会有一些令人费解的现象出现.下面我们一起来执行下面三段代码. <script> ...

  2. 关于js预编译以及js文件执行顺序的几个问题。

    关于js的执行原理,除去html页面中直接添加的代码,js代码的放置可以分为两类. //情形a           <script type="text/javascript" ...

  3. js预编译

    先来做三个测试 eg1: var a; a = 1; function a() {}; console.log(a); eg2: var a; function a() {}; console.log ...

  4. Javascript - 预编译与函数词法作用域

    预编译与函数词法作用域(Precompiled & Scoped) 预编译 Javascript脚本的宿主在执行代码之前对脚本做了预编译处理,比如浏览器对Js进行了预编译,编译器会扫描所有的声 ...

  5. js预编译的四部曲

    众所周知javascript是解释性语言,主要特点为解释一行执行一行. 而在js运行时会进行三件事:1语法分析  2.预编译  3.解释执行 语法分析会在代码执行前对代码进行通篇检查,以排除一些低级错 ...

  6. js 预编译

    js 运行代码的时候分为几个步骤:语法分析 ==>预编译  ==>解释执行 语法解析:通篇扫描代码,查看语法是否出错 解释执行:读一行 - 解释一行 - 执行一行 预编译执行的操作: // ...

  7. Handlebars.js 预编译(转)

    Handlebars.js 官网上对预编译1是这样说的: 你需要安装 Node.js 你需要在全局环境中,通过 Npm 安装 handlebars 包 然后你就可以通过命令预编译你的 handleba ...

  8. 5.js与jQuery入口函数执行时机

    js与jQuery入口函数执行时机区别: JS入口函数是在所有资源加载完成后,才执行.(包括:页面.外部js文件.外部css文件.图片) jQuery入口函数,是在文档加载完成后就执行.文档加载完成指 ...

  9. js预编译环节 变量声明提升 函数声明整体提升

    预编译四部曲 1.创建AO对象 2.找形参和变量声明,将变量和形参名作为AO属性名,值为undefined 3.将实参和形参统一 4.在函数体里面找函数声明,值赋予函数体 function fn(a) ...

随机推荐

  1. (三)ng-app的使用困惑和angularJS框架的自己主动载入

    ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点.让框架会自己主动载入.也就是说,ng-ap ...

  2. 数学之路-python计算实战(6)-numpy-ndarray

    >>>> mya=np.zeros(shape=(2,2)) >>>> mya array([[ 0.,  0.], [ 0.,  0.]]) > ...

  3. CSS中的相关概念

    CSS的几个概念: 包括块:一个元素的"布局上下文".对于正常的HTML文本流中的一个元素,包括块由近期的块级祖先框.表单元格或行内块祖先框的内容边界(content edge)构 ...

  4. vim-YCM插件安装

    这两天开始使用vim来学习C++语言,中间少不了要进行编译.才刚刚写了两个小例子就开始发现,每次都要退出vim来进行编译,实在太麻烦了.这时候才想到之前有在一本关于vim的书籍上看到quickfix的 ...

  5. vim 插件之vim-trailing-whitespace

    vim-trailing-whitespace 这个插件是快速去掉文章行末的空格 地址 http://github.com/bronson/vim-trailing-whitespace 如果你想要使 ...

  6. nyoj--42--一笔画问题(并查集)

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下来. ...

  7. 5. MongoDB基本操作语句

    转自:http://blog.51cto.com/shanqiangwu/1653577 #MongoDB中有三元素:数据库,集合,文档,其中“集合”就是对应关系数据库中的“表”,“文档”对应“行”. ...

  8. Java类和对象9

    (1)创建一个叫做机动车的类:属性:车牌号(String),车速(int),载重量(double)功能:加速(车速自增).减速(车速自减).修改车牌号,查询车的载重量.编写两个构造方法:一个没有形参, ...

  9. 无滚动条GridView少量图片展示

    import android.content.Context; import android.util.AttributeSet; import android.util.Log; import an ...

  10. Ajax的几种形式 和使用情况

    Ajax的几种形式: 1       $.get( "Login.ashx", {Name:name,Pwd:pwd,action:x}, function(data){这里用da ...