一、前言

js的预编译，是js的基础内容，学好预编译，很多js开发问题都会迎刃而解。
js在浏览器环境中运行流程一般分为三步走：

语法分析（检查代码的语法错误）
预编译（初始化变量和函数）
代码执行

js在预编译会在代码执行前一刻执行，同时会创建对象“全局上下文GO”，遇到函数时会创建对象“函数上下文AO”。

二、暗示全局变量（imply global variable）

暗示全局变量是js预编译的特点，顾名思义，就是在js中，如果变量没有声明就赋值，该变量就会被默认成为全局变量。
代码：

function foo(){a = 1;var b = 2;
}
foo()
console.log(a);  //  1
console.log(b);  //   报错 b is not defined

解读：1、foo函数内部将a变量直接赋值，默认该变量为全局变量，所以在函数外部可以打印出a；
2、变量b为函数内部声明的变量，全局上下文无法访问到，所以会报错；

三、全局上下文对象 GO (global object)

js预编译开始时，会创建一个对象GO，等同于全局对象window，用来存放初始化全局对象和函数；
步骤：

创建GO
将var声明的变量名作为GO对象的属性名，值为undefinded；
将声明函数的函数明作为GO对象的属性名，值为函数体；

代码：

console.log(a);  // undefinded
var a = 1;
console.log(a); // 1
console.log(foo);  // ƒ foo(){}
function foo(){};

解读：根据预编译步骤可得
1、创建GO对象；
2、寻找var声明的变量，并赋值为undefinded
GO {
a:undefind,
}
3、寻找函数声明，并赋值为函数体
GO {
a:undefind,
foo:foo(){}
}
预编译结束，开始执行代码，
第一行 a输出为undefinded；
第二行 a赋值为1，更新GO{
a:undefinded---->1,
foo:foo(){}
}
第三行 a输出1；
第四行 foo输出 foo(){}；

四、函数上下文对象AO（activation object）

在函数执行前执行函数预编译，此时会产生一个AO对象，AO对象保存该函数的参数及内部变量。
步骤：
1、创建AO对象
2、将函数的参数以及函数里面声明的变量当做AO对象的属性名，值全部为undefined。
3、将实参的值赋值给形参。
4、在函数里面声明的函数，函数名作为AO对象的属性名，值赋值给函数体。（若参数名和函数名重叠，则函数体值会覆盖参数值）

代码：

console.log(a);  // undefinded
var a = 2;
foo(3);
function foo(b){console.log(b)  //  ƒ b(){}console.log(a);  //  undefindedvar a = 1;console.log(a)  // 1function b(){}
}
console.log(a)  // 2

解读：根据预编译步骤可得
1、创建GO对象；
2、寻找var声明的变量，并赋值为undefinded
GO{
a:undefinded
}
3、寻找函数声明，并赋值为函数体
GO{
a:undefinded
foo:foo(){}
}
开始执行代码
第一行全局变量a输出 undefinded
第二行全局变量a赋值为2
第三行执行前局部预编译生成AO

开始局部预编译
1、创建AO对象；
2、将函数的参数以及函数里面声明的变量当做AO对象的属性名，值全部为undefined
AO{
b:undefinded,
a:undefinded
}
3、将实参的值赋值给形参
AO{
b:undefinded —> 3,
a:undefinded
}
4、在函数里面声明的函数，函数名作为AO对象的属性名，值赋值给函数体。（若参数名和函数名重叠，则函数体值会覆盖参数值）
AO{
b:undefinded —>3 —>b(){},
a:undefinded
}
局部预编译结束，继续执行代码
第五行局部变量 b输出 b(){};
第六行局部变量 a输出 undefinded;
第七行局部变量 a 赋值1
AO{
b:undefinded —>3 —>b(){},
a:undefinded —>1
}
第八行输出局部变量a为1；
第十一行输出全局变量a为2；

结束。

js预编译 GO 和AO相关推荐

js 预编译 AO对象跟GO对象
注:GO对象会比AO对象先编译:预编译指在执行前会先预编译一次 GO对象用于存放全局变量也称为全局作用域 <script>var name = '为空'var obg = {name:' ...
AO是什么？GO是什么？深度解析JS预编译遇见AO和GO
写在前面三月结束了,四月开始了.希望这个世界早点好起来. 今天是个好日子,好呀嘛好日子.哈哈哈哈哈哈,省里发文件了,终于让我看到了开学的希望,心情格外的舒适. 好了好了,来说说今天都干嘛了吧.今天又 ...
js 预编译解释执行作用域链闭包
<script>var a,b = 1;function c(x){var aa = 2;function d(){var ab = 3;}}var d = function(){//.. ...
将js预编译熟稔于心
首先来看两个小例子: 第一个 test();function test(){console.log("能执行吗?") } 执行结果: 是不是感觉不应该打印出?why?就是因为有预编 ...
函数的作用域以及预编译
一.函数的作用域函数作用域有点像单面镜(外面看不到里面,里面可以看到外面) JS的特点:单线程.是解释性语言 (翻译一行,执行一行) 二.预解析 JS预解析三部曲:语法解析 ⇒ 预编译 ⇒ 解释执 ...
JS中的预编译（AO、GO详解）
文章目录一.由实例引发的思考二.全局上下文GO: 三.函数上下文AO: 四.全局上下文GO+函数上下文AO: 总结执行js文件的流程: ①通篇检查语法错误 ②预编译 ③解释一行执行一行一.由实 ...
JS数据类型及函数的预编译
1.JS总体上分为:原始值和引用值原始值分为:Number.Boolean.String.undefined.null;原始值不可改变的值,存储在栈[stack]的,先进后出! 引用值:array. ...
js中立即执行函数会预编译吗_JavaScript预编译过程
什么是预编译? 当js代码执行时有三个步骤: 1.语法分析,这个过程检查出基本的语法错误. 2,预编译,为对象分配空间. 3,解释执行,解释一行执行一行,一旦出错立即停止执行. 预编译发生在代码执行的 ...
AO对象与GO对象——预编译（1）
文章目录 JS引擎都做了什么? 函数声明提升 var关键字的声明提升,赋值不提升一个奇奇怪怪的例子暗示全局变量 AO对象 GO对象 AO和GO综合练习 JS引擎都做了什么? 1.检查通篇的语法错误 ...

js预编译 GO 和AO

一、前言

二、暗示全局变量（imply global variable）

三、全局上下文对象 GO (global object)

四、函数上下文对象AO（activation object）

js预编译 GO 和AO相关推荐

最新文章

热门文章