javascript预编译的过程
预编译的两种情况
全局:
1.全局 直接是script标签中的代码,不包括函数执行
执行前:
1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析
2.分析变量声明,变量名为属性名,值为undefined
3.分析函数声明,函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖
函数内部(局部):
1. 函数调用,也是会生成自己的作用域(AO:active object),AO活动对象. 函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO
a. 函数执行前的一瞬间,生成AO活动对象
b. 分析参数,形参作为对象的属性名,实参作为对象的属性值
c. 分析变量声明,变量名为属性名,值为undefined,如果遇到AO对象上属性同名,不去做任何改变
d. 1.4 分析<b>函数声明</b>,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则无情覆盖
2. 逐行执行。
代码分析如下:
<script type="text/javascript">
console.log(a);
console.log(b)
var a = 100;
console.log(a)
var b = 200
var c = 300
function a(){
}
function fun(){
}
console.log(a);
</script>
全局 直接是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.逐行执行,分析过(变量声明,函数声明)不用管了,只管赋值(变量赋值)
11行的时候,a赋了一次值,值改变为100
GO = {
a : 100,
b : undefined,
c : undefined,
fun : function fun(){}
}
局部
<script type="text/javascript">
var num = 100;
function fun(num){
console.log(num)
}
fun(5)
fun(10)
</script>
1.预编译的时候
GO = {
num : undefined,
fun : function
}
2.执行过程
走到9行
GO = {
num : 100,
fun : function
}
走到14行,函数的调用
3.函数调用,也是会生成自己的作用域(AO:active object),AO活动对象. 函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO
3.1 函数执行前的一瞬间,生成AO活动对象
fun.AO = {
}
3.2 分析参数,形参作为对象的属性名,实参作为对象的属性值
fun.AO = {
num : 5
}
3.3 分析变量声明,变量名为属性名,值为undefined,如果遇到AO对象上属性同名,不去做任何改变
fun.AO = {
num : 5
}
3.4 分析函数声明,函数名为属性名,值为函数体,如果遇到AO对象上属性同名,则无情覆盖
4.逐行执行
综合分析:
<script type="text/javascript">
console.log(test);
function test(test){
console.log(test);
var test = 123;
console.log(test);
function test(){
}
console.log(test);
var test = function(){}
console.log(test);
}
test(10);
var test = 456
console.log(test);
</script>
预编译开始,先生成一个GO{
}
1.看变量GO{
test:underfined
}
2.看函数声明GO{
test:function test(test){
console.log(test);
var test = 123;
console.log(test);
function test(){
}
console.log(test);
var test = function(){}
console.log(test);
}
}
把整个函数体给test
预编译完成,开始执行代码,第二行的结果是test函数的函数体
3到13行都是函数声明,不用管
第14行函数执行,传入参数10
函数执行的时候产生AO{
}
1.看参数AO{
test:10
}
2.看变量,变量同名,不用管变量AO{
test:10
}
3.看函数,函数和参数同名,函数把参数覆盖AO{
test:function test(){}
}
4.逐行执行
第三行打印名字为test的函数体,
第四行给test赋值123,第五行打印123
7到9行函数体声明不用管
第十行打印123
第十一行把一个匿名函数(没有函数名的函数)赋值给test
第十二行函数执行完毕
第十四行回到全局,把456赋值给test
第十五行打印456
javascript预编译的过程的更多相关文章
- JavaScript 预编译与作用域
JavaScript 预编译与作用域 JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念 预编译 JavaScript ...
- javaScript 预编译过程浅尝
javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...
- 关于JavaScript预编译和执行顺序以及函数引用类型的思考
昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script > ...
- 重温JavaScript预编译的四个步骤
JS是解释型语言,运行过程分三步: 一.语法分析(检查代码是否存在语法错误): 二.预编译(代码执行之前,在内存中开辟空间,存放变量与函数): 三.解释执行(执行JS代码): 理解预编译的过程,对于理 ...
- javascript预编译和执行过程总结
javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块 ...
- JavaScript预编译过程理解
1-JavaScript运行三部曲 语法分析 预编译 解释执行 语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误: 解释执行顾名思义便是执行代码了: 预编译简单理解就是在内存中开辟一些空间 ...
- JavaScript预编译详解
一.js运行三部曲: 1.语法分析(通篇扫描看有没有语法错误) 2.预编译 3.解释执行 二.预编译前奏 1.imply global 暗示全局变量:任何变量如果未经声明就赋值,此变量为全局对象所有 ...
- Javascript - 预编译与函数词法作用域
预编译与函数词法作用域(Precompiled & Scoped) 预编译 Javascript脚本的宿主在执行代码之前对脚本做了预编译处理,比如浏览器对Js进行了预编译,编译器会扫描所有的声 ...
- JavaScript 预编译(变量提升和函数提升的原理)
本文部分内容转自https://www.cnblogs.com/CBDoctor/p/3745246.html 1.变量提升 console.log(global); // undefined var ...
随机推荐
- golang 闭包求斐波那契数列
题目是Go指南中的闭包求斐波那契数列 package main import "fmt" // 返回一个"返回int的函数" func fibonacci() ...
- 文件压缩小项目haffman压缩
文件压缩的原理: 文件压缩总体可以分为有损压缩和无损压缩两类,有损压缩是指对mp3等格式的文件,忽略一些无关紧要的信息,只保留一些关键的信息,但并不因此影响用户对于这些mp3格式文件的体验度,无损压缩 ...
- WebDriver高级应用实例(5)
5.1对象库(UI Map) 目的:能够使用配置文件存储被测试页面上的元素的定位方式和定位表达式,做到定位数据和程序的分离.方便不具备编码能力的测试人员进行修改和配置. 被测网页的网址: http:/ ...
- POJ 2845
#include <iostream> #include <string> #include <algorithm> #define MAXN 350 using ...
- CentOS6.8 安装 Oracle11.2.0.4
1. 安装操作系统 安装的时候选择中文+英文支持 注意分区: swap sda盘做系统盘 sdb盘做数据盘 配置完成后的服务器分区路径信息: [root@dbserver ~]# df -h File ...
- 一个对眼睛很好的vim 颜色主题
地址:https://github.com/altercation/vim-colors-solarized 安装: $ cd vim-colors-solarized/colors $ mv sol ...
- 兼容IE9以下和非IE浏览器的原生js事件绑定函数
事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...
- Anaconda 科学计算环境与包的管理
相信大多数 python 的初学者们都曾为开发环境问题折腾了很久,包管理和 python 不同版本的问题,特别是 window 环境安装个 scrapy 各种报错 ,使用 Anaconda 可以很好的 ...
- 自制“低奢内”CSS3注册表单,包含JS验证哦。请别嫌弃,好吗?。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- 配置Codis-FE(管理界面)
codis所有的配置项可以有两种方式进行管理:通过图形界面进行配置,另外一种通过命令配置. 1.通过配置文件生成codis-fe的启动文件a.通过codis的管理工具完成:/usr/local/cod ...