JS预编译过程
GO和AO
变量的预编译
实例1
console.log(a);
var a=1;
console.log(a);
实际编译过程:
将a存入预编译对象中,赋值为undefined;
真正的赋值语句当程序运行到时才会执行。
实例1等价:
var a=undefined;
console.log(a);//undefined
a=1;
console.log(a);//1
GO(Global Object)
预编译过程
先创建GO对象(Global Object),再创建AO对象(Activation Object)。
GO:先不看函数内部的代码
- 创建GO对象;
- 找 变量声明,将 变量 作为GO属性名,值为undefined;
- 再找 函数声明,值赋予函数体;
GO对象创建完成,开始读代码,直到读到全局调用test函数时,函数预编译,开始创建AO对象(预编译发生在函数执行的前一刻)
实例2
console.log(test); //function
function test(test) {
console.log(test);
var test = 234;
console.log(test);
function test() {}
}
test(1);
var test = 123;//test=123 覆盖属性test:function
console.log(test);//123
创建GO对象;
GO { }
找 变量声明,将 变量 作为GO属性名,值为undefined;
GO {
test : undefined
}
再找 函数声明,值赋予函数体;
GO {
test : function test(test) {
// … 整个函数体 }
}
GO对象创建完成,开始读代码,直到读到全局调用test函数时,函数预编译,开始创建AO对象(预编译发生在函数执行的前一刻)
AO(activation object )
全称:活跃对象/执行期上下文,在函数执行前执行函数预编译,此时会产生一个AO对象,AO对象保存该函数的参数变量。
函数预编译步骤:
- 产生AO对象
- 将函数的形参和函数内声明的变量当作AO对象的属性名,值全为undefined。变量的赋值在原先的位置
- 将实参赋值给形参属性
- 在函数内声明的函数,函数名作为OA的属性名,函数体赋值给值。(若函数名和变量重名,函数体会覆盖原先的变量值)
实例3
function test(a) {
console.log(a);
var a = 2;
console.log(a);
function a () {}
console.log(a);
var b = function () {};
console.log(b);
function d(){}
}
test(1);
1. 创建AO对象
AO{
//此时AO对象为空
}
2. 确定AO对象的属性名
AO{
a:undefined; //函数参数
b:undefined; //函数里面声明的变量
}
3. 将实参值赋值给形参
AO{
a:1; //函数参数
b:undefined; //函数里面声明的变量
}
4. 处理函数里面的声明函数
var b=function( ){ };时不会把函数体给到b属性的。b仍然是undefined.
function a( ){ }; 才会覆盖a属性。
AO{
a:function a () {} //变量名一样,值覆盖
b:undefined, //函数里面声明的变量
d:function d () {}
}
function test(a) {
console.log(a);//function a;
var a = 2;//a=2; 覆盖AO中的属性值
console.log(a); //2;
function a () {} //预编译时已经处理过了,直接跳过
console.log(a); //2
console.log(b); //undefined; bs变量 尚未赋值
var b = function () {};//b=function(){}; 覆盖
console.log(b);//function (){};
function d(){}
}
test(1);
JS预编译过程的更多相关文章
- js预编译
先来做三个测试 eg1: var a; a = 1; function a() {}; console.log(a); eg2: var a; function a() {}; console.log ...
- JS预编译详解
我们都知道javascript是解释型语言,执行的特点呢是编译一行,执行一行.按照这个思路有时候我们在运行代码时会有一些令人费解的现象出现.下面我们一起来执行下面三段代码. <script> ...
- js 预编译
js 运行代码的时候分为几个步骤:语法分析 ==>预编译 ==>解释执行 语法解析:通篇扫描代码,查看语法是否出错 解释执行:读一行 - 解释一行 - 执行一行 预编译执行的操作: // ...
- Handlebars.js 预编译(转)
Handlebars.js 官网上对预编译1是这样说的: 你需要安装 Node.js 你需要在全局环境中,通过 Npm 安装 handlebars 包 然后你就可以通过命令预编译你的 handleba ...
- javaScript 预编译过程浅尝
javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...
- 关于js预编译以及js文件执行顺序的几个问题。
关于js的执行原理,除去html页面中直接添加的代码,js代码的放置可以分为两类. //情形a <script type="text/javascript" ...
- js预编译和函数执行
javascript 执行过程 1.语法检测(有没有基本的语法错误,例如中文,关键字错误...)2.词法分析(预编译) (1)创建全局GO(global object)对象 (2)对var声明的变量进 ...
- C语言的预编译,程序员必须懂的知识!【预编译指令】【预编译过程】
由“源代码”到“可执行文件”的过程包括四个步骤:预编译.编译.汇编.链接.所以,首先就应该清楚的首要问题就是:预编译只是对程序的文本起作用,换句话说就是,预编译阶段仅仅对源代码的单词进行变换,而不是对 ...
- js预编译的四部曲
众所周知javascript是解释性语言,主要特点为解释一行执行一行. 而在js运行时会进行三件事:1语法分析 2.预编译 3.解释执行 语法分析会在代码执行前对代码进行通篇检查,以排除一些低级错 ...
随机推荐
- BBPlayerView
GitHub 仓库地址 一个高度封装的视频播放器视图,基于 AVPlayer.AVPlayerLayer.AVPlayerItem. 继承自 UIView,可以当做一般视图使用,适用于 Swift 和 ...
- 四、C#简单操作MinIO
MinIO的官方网站非常详细,以下只是本人学习过程的整理 一.MinIO的基本概念 二.Windows安装与简单使用MinIO 三.Linux部署MinIO分布式集群 四.C#简单操作MinIO He ...
- Alibaba-技术专区-Dubbo3总体技术体系介绍及技术指南(序章)
Dubbo的背景介绍 Apache Dubbo 是一款微服务开发框架(是一款高性能.轻量级的开源 Java 服务框架),它提供了 RPC通信 与 微服务治理 两大关键能力.这意味着,使用 Dubbo ...
- dubbo学习实践(3)之Dubbo整合Consul及Dubbo配置方式
前言:上一篇中,已经写到了使用zookeeper为注册中心的配置,下面写下配置Consul为注册中心 1. Consul注册中心验证 修改provider和consumer的服务配置文件 Provid ...
- 位(bit)、字节(Byte)、字(Word)、双字(Dword)之间的关系
位(bit): bit(简写:b),是计算机数据存储最小的单位,二进制中,0或者1就是一个位(比特位)bit. 字节: Byte(简写:B),是计算机信息技术用于计量存储容量的一种计量单位,通常情况下 ...
- SwiftUI图片处理(缩放、拼图)
采用SwiftUI Core Graphics技术,与C#的GDI+绘图类似,具体概念不多说,毕竟我也是新手,本文主要展示效果图及代码,本文示例代码需要请拉到文末自取. 1.图片缩放 完全填充,变形压 ...
- 算法入门 - 基于动态数组的栈和队列(Java版本)
之前我们学习了动态数组的实现,接下来我们用它来实现两种数据结构--栈和队列.首先,我们先来看一下栈. 什么是栈? 栈是计算机的一种数据结构,它可以临时存储数据.那么它跟数组有何区别呢? 我们知道,在数 ...
- vue+cesium初探(一) 加载cesium
参考文章1:https://www.cnblogs.com/laixiangran/p/4984522.html 参考文章2:https://blog.csdn.net/weixin_41940497 ...
- 利用maven构建一个spring mvc的helloworld实例
刚开始学习maven和spring mvc,学的云里雾里的 这里提供一个hello world实例,记录自己的学习之路 首先看maven官网的介绍 Apache Maven is a software ...
- jsoup的Element类
一.简介 该类是Node的直接子类,同样实现了可克隆接口.类声明:public class Element extends Node 它表示由一个标签名,多个属性和子节点组成的html元素.从这个元素 ...