当前位置: 首页>前端>正文

javascript got JavaScript goto


预编译

  • 一、概念
  • 1、什么是预编译
  • 2、全局对象GO
  • 3、活动对象AO
  • 二、全局预编译
  • 1、流程
  • 2、看一个例子
  • 三、函数预编译
  • 1、流程
  • 2、示例
  • 示例一
  • 示例二
  • 示例三


一、概念

1、什么是预编译

我们知道 JavaScript 是解释型语言。
解释型语言:代码逐行解析,逐行执行。也就是说,从上到下,解析一行执行一行。

那么什么是预编译呢?

在JavaScript真正被解析之前,js引擎会首先把整个文件进行预处理,以消除一些歧义,这个预处理的过程就被称为预编译

我们先看一段奇怪的代码:

console.log(a);  // function a() {console.log(a);}
var a = 123;
console.log(a);  // 123
function a() {
	console.log(a);
}
a();  // 报错  VM219:7 Uncaught TypeError: a is not a function

2、全局对象GO

全局对象(Global Object)

  • 在浏览器环境中,js引擎会整合<script>标签中的内容,产生window对象,这个window对象就是全局对象。浏览器中,window对象就是GO
  • 在node环境中,会产生global对象

全局变量:在script标签中定义的变量作为window对象的属性存在
全局函数:在script标签中定义的函数作为window对象的方法存在

思考:如果我们声明了一个变量a,又声明了一个函数a,这个时候应该怎么办呢,就像我们上述那段奇怪的代码,这就是我们需要预处理要做的事情。

3、活动对象AO

活动对象(Activation Object),也叫激活对象

  • 函数被调用时产生,用来保存当前函数内部的执行环境(Execution Context),也叫执行期上下文
  • 在函数调用结束时销毁

局部变量: 在函数内部声明的变量叫做局部变量,局部变量作为AO的属性存在

function a() {
	var i = 0;
	console.log(i);
}
a()

javascript got JavaScript goto,javascript got JavaScript goto_js,第1张

在函数a的外部是不能访问变量 i 的,变量 i 只在函数a的范围内才能使用。其实,这也是作用域的由来。

  • 如果不执行函数 a,就不会产生AO对象,就不会存在 i 属性
  • 如果执行函数a,产生一个AO对象,并将变量 i 作为AO对象的属性
  • 函数执行完以后,AO对象被销毁,也就意味着不能使用 i 属性

局部函数:在函数内部声明的函数叫局部函数,局部函数作为AO对象的方法存在


二、全局预编译

1、流程

(1)查找变量声明,作为GO对象的属性名,值为undefined
(2)查找函数声明,作为GO对象的属性名,值为function

这也是为什么函数提升优先级比变量提升优先级高的原因,因为先找变量声明,再找函数声明,函数声明会把同名的变量替换掉

console.log(a);  // ƒ a() {}
function a() {}
var a = 2;

变量声明:通过var关键字声明变量

var a; // 变量声明
var a = 111; // 变量声明+变量赋值

函数声明:通过function关键字声明函数

function a() {} // 函数声明
vat a = function() {}   // 函数表达式,不是函数声明


2、看一个例子

console.log(a);
var a = 100;
console.log(a);
function a() {
	console.log(111);
}
console.log(a);
a();

结果:

javascript got JavaScript goto,javascript got JavaScript goto_预编译_02,第2张

分析结果原因:

预编译的过程:
1、第一步:产生window对象
2、第二步:先查找变量的声明,把a作为window对象的属性名,属性的值为undefined
3、第三步:再查找函数的声明,把函数名a作为window对象的属性名,属性值是function

全局预编译结束后,代码从上到下依次执行。所以在第一行打印a会打印出一个function。
在第二行会执行一个对a的赋值为100,所以第三行打印a为100。4、5、6行在预编译的时候已经走过了,所以不再执行,所以在第七行打印的a仍然是100。在第8行调用a的时候,这时候a是100,不是函数,所以会报错。

三、函数预编译

1、流程

(1)在函数被调用时,为当前函数产生AO对象。每一个函数在每一次执行的时候都会产生一个AO对象,这个AO对象是独立的。
(2)查找形参和变量声明作为AO对象的属性名,值为undefined
(3)使用实参的值去改变形参的值
(4)查找函数声明,函数名作为AO对象的属性名,值为function

2、示例

示例一

function a(test) {
	var i = 0;
	function b() {
		console.log(222);
	}
	b()
}
a(1);

流程:先完成全局预编译,再完成函数预编译

1、全局预编译,产生一个window对象GO:

  1. 查找变量的声明,无变量声明
  2. 查找函数的声明,将函数a作为window对象的属性名,值为function。

2、全局预编译结束,执行代码,1-7行为函数声明,会被略过,直接执行第8行,调用函数a,产生函数a的AO对象

3、函数a的AO环境:

  1. 查找形参test,局部变量i作为AO对象的属性名,值为undefined
  2. 查找实参覆盖形参,实参1赋值给test,test值为1,i的值仍为undefined
  3. 查找局部函数b,b作为AO对象的属性名,值为function

4、函数的预编译结束,执行函数

  1. 执行以后 i 的值为0(第二行);
  2. 3-5行执行时被略过(因为这是函数声明),执行第6行,执行函数b(会产生函数b的AO对象,暂时先不深究),打印出222

示例二

function a(i) {
	var i;
	console.log(i);  // 1 而不是undefined
}
a(1);

function a(i) {
	var i = 2;
	console.log(i);  // 2
}
a(1);

示例三

function a(test) {
	console.log(b);
	var b = 0;
	console.log(b);
	function b() {
		console.log(222);
	}
}
a(1);

结果:

javascript got JavaScript goto,javascript got JavaScript goto_window对象_03,第3张



https://www.xamrdz.com/web/2p21960060.html

相关文章: