本文详细解析JavaScript代码运行前的预编译过程，涵盖语法分析、预编译及解释执行三步流程。深入探讨全局对象GO与活动对象AO的创建机制，解析变量声明提升与函数声明提升的差异。重点分析ES6中let/const引入的块级作用域及暂时性死区，并澄清条件语句中函数声明在不同环境下的兼容性问题。
要理解 预编译 的工作机制，首先需要掌握 JavaScript 的基本运行流程。在代码正式执行之前，引擎会依次经历三个关键阶段。
- 首先是语法分析，引擎会扫描整个 JavaScript 文件，检查是否存在语法错误。
- 其次是预编译阶段，主要解决代码的执行顺序问题，为后续执行做准备。
- 最后是解释执行阶段，引擎逐行解释并执行代码。
function test() {
console.log('test');
}
test();
// 上面能执行
//
test1();
function test1() {
console.log('test1');
}
// 也能执行，因为有预编译的存在 发生了函数声明提升
var a = 123;
console.log(a); // 123
//
console.log(b); //undefiend
var b = 123;这里涉及一个概念叫“暗示全局变量”：如果变量未经声明直接赋值，该变量将自动成为全局对象（在浏览器环境中为 window）的属性。
全局对象的具体类型取决于运行环境：在浏览器中是 window，而在 Node.js 环境中则是 global。
// 要明白 声明 和 赋值
var a = 123 //这句话其实两步 声明变量 和 变量赋值
// 可以拆解成下面这样
var a;
a = 123
// 未经声明的变量就赋值 归全局对象
b = 10
// b=10 => window.b=10接下来详细解析函数执行时的预编译过程，主要包含四个步骤。
函数的预编译发生在函数实际执行的前一刻。
第一步是创建 AO 对象（Activation Object，即执行期上下文）。它的作用是理解作用域，并为函数产生一个独立的执行空间。
第二步是查找形参和变量声明，将变量名和形参名作为 AO 的属性名，并将值初始化为 undefined。这一过程体现了变量声明提升的特性。
此时 AO 对象的结构大致如下。
AO{ a : undefined, b : undefined }
第三步是将实参的值与形参统一，即将调用函数时传入的实参值赋给对应的形参。
第四步是在函数体内查找函数声明，并将函数体赋值给对应的属性名。这一过程会优先检查自身的 AO，若未找到再查找全局的 GO，体现了函数声明提升的特性。
//
function fn(a) {
console.log(a); //function a() {}
var a = 123;
console.log(a); //123
function a() {}
console.log(a); // 123
var b = function() {}
console.log(b); //function b() {}
function d() {}
}
fn(1);全局环境的预编译过程相对简单，主要包含三个步骤。
- 第一步是生成 GO 对象（Global Object，即全局对象）。在浏览器中，window 对象等同于 GO。任何未经声明直接赋值的变量都会归 window 所有，并在 GO 中进行预编译处理。
- 第二步是查找形参和变量声明，将变量名和形参名作为 GO 的属性名，并将值初始化为 undefined。
- 第三步是在代码中查找函数声明，并将函数体赋值给对应的属性名。
console.log(test); // function test(test){...}
function test(test) {
console.log(test); // fuction test () {}
var test = 234;
console.log(test);
234
function test() {}
}
test(1);
var test = 123;
// 下面是模拟的流程
// 经过 go 三部曲 变成下面这样
// 创建 GO ={
// test : function test(test){...}
// }
// test(1) 执行
// 经过函数预编译四步
// 创建 AO ={
// test:function test() {}
// }在预编译过程中，有几个关键点需要注意，特别是关于作用域的变化。
在 ES5 标准中，作用域仅包括全局作用域和函数作用域。
而在 ES6 标准中，新增了块级作用域，因此作用域分为全局作用域、函数作用域和块级作用域。
ES6 引入了 块级作用域 概念，并使用了 let 和 const 来声明变量。这些变量不存在变量声明提升的现象，ES6 中声明函数的行为也类似 let。
在块级作用域中，let 和 const 将变量的作用域限制在代码块内部，并且会引入“暂时性死区”的概念。
暂时性死区的本质是：一旦进入当前作用域，所使用的变量就已存在但不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
- 接下来讨论在条件语句中定义函数的情况（例如在 if 语句中定义函数）。
- 需要注意的是，直接定义函数与将函数赋值给变量是不同的。如果在条件语句中将函数赋值给变量，则不存在上述的兼容性问题。
- 函数可以被条件语句声明，这意味着函数声明可以嵌套在 if 语句中。然而，某些浏览器会将这种有条件的声明视为无条件声明，无论条件是 true 还是 false，浏览器都会创建该函数。因此，这种写法不应被使用。
- 虽然函数可以被条件语句声明，但这种声明方式在不同浏览器中可能产生不同的效果。因此，不建议在生产环境代码中使用这种声明方式，应使用函数表达式来代替。
- 此外，还需讨论在条件语句中定义变量的情况（例如在 if 语句中使用 var 定义变量）。
在 ES5 及更早版本中，条件语句中的函数声明和变量声明都会提升到当前作用域的顶部（全局作用域或函数作用域），这与常规的预编译过程没有区别，因为当时不存在块级作用域的概念。
在 ES6 及之后的版本中，条件语句中的函数声明和变量声明遵循以下规则：为了兼容以前的旧代码，尽管 ES5 规定函数只能在顶层作用域和函数作用域中声明，不能在块级作用域中声明。
// 根据 ES5 的规定都是非法的。 在现在es6的执行环境中 {}是块级作用域
// 这就矛盾了es5明确规定 函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。
// 情况一
if (true) {
function f() {}
}
// 情况二
try {
function f() {}
} catch (e) {
// ...
}然而，浏览器并未严格遵守这一规定。为了兼容以前的旧代码，浏览器仍然支持在块级作用域中声明函数，因此上述两种情况在实际运行中都不会报错。
因此，ES6 引入了块级作用域，明确允许在块级作用域中声明函数。ES6 规定，在块级作用域中，函数声明语句的行为类似于 let，在块级作用域之外不可引用。
// ES5 环境中运行
function f() {
console.log('I am outside!');
}
(function() {
if (false) { //不管这里是true还是false 结果一样的 发生预编译的时候不管执行条件
// 重复声明一次函数f
function f() {
console.log('I am inside!');
}
}
f(); //会得到“I am inside!”，
}());
// 浏览器的 ES6 环境
console.log(foo);
if (false) {
function foo() {
return 1;
}
}
// 在 Chrome 里：
// 'foo' 变量名被提升，但是 typeof foo 为 undefined
//
// 在 Firefox 里：
// 'foo' 变量名被提升。但是 typeof foo 为 undefined
//
// 在 Edge 里：
// 'foo' 变量名未被提升。而且 typeof foo 为 undefined
//
// 在 Safari 里：
// 'foo' 变量名被提升。而且 typeof foo 为 function
// 浏览器的 ES6 环境
// 根据下面 规则只对 ES6 的浏览器实现有效 分析
function f() {
console.log('I am outside!');
}
(function() {
// 函数作用域 AO { f = undefiend} 这里是if里面的函数提升上来的
if (false) { //false true都不影响提升
//es6 {} 这是一个块级作用域了 因为块级作用域内声明的函数类似于let
// 重复声明一次函数f
// 块作用域 预编译 AO{ f:function f() {...}}
function f() {
console.log('I am inside!');
}
}
// 这里为什么会报错 如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。
f(); //报错 Uncaught TypeError: f is not a function 当执行到这里的时候 由于if是flase 没有执行到f函数声明语句 不会吧 块里面的f 赋值到 函数作用域里面的 f 所以执行函数作用域f报错
}());下面的规则仅对 ES6 的浏览器实现有效。
- 允许在块级作用域内声明函数。
- 函数声明类似于 var，即会提升到全局作用域或函数作用域的头部（这里类似
var的行为，所以提升到全局作用域或函数作用域的头部，变量初始化为undefiend）。不同浏览器的具体表现也不一样，例如在Safari中，其表现是function。 - 同时，函数声明还会提升到所在的块级作用域的头部（这是函数声明提升的结果，所以该变量在块级作用域的头部，变量值为函数体）。
- 当执行到块内的
函数声明语句或者var声明时，会把当前块中这个函数声明变量或者var声明变量的值赋值给之前提升到（全局作用域、函数作用域）里面的变量。
// 例1
// GO={a:undefiend}
var a = 0;
// GO={a:0}
console.log("1 a:", a); //0
// GO:{a=1} 是if里面执行到 定义function a() {} 的时候更改的
if (true) {
// AO={a:function a() {}}
a = 1;
// AO={a:1}
function a() {} //当执行到这一步的时候 将当前块作用域的 a = 1 赋值给 全局作用域的 a
// AO={a:1}
// GO:{a=1}
a = 5;
// AO={a:5}
console.log("2 a:", a); //5
}
console.log("3 a:", a); //1
// 例2
var a = 0;
console.log("1 a:", a); //0
if (true) {
a = 1;
a = 5;
console.log("2 a:", a); //5
function a() {}
}
console.log("3 a:", a); //5
// 例3
var a = 0;
console.log("1 a:", a); //0
if (true) {
function a() {}
a = 1;
a = 5;
console.log("2 a:", a); //5
}
console.log("3 a:", a); //function a {}
// 例4
// GO={a:undefiend}
console.log("1 a:", a); //undefiend
// GO={a:function a() {} } 是if里面执行到 定义function a() {} 的时候更改的
if (true) {
// AO={a: function a() {} }
function a() {} //执行到这里 改变GO={a=AO.a=function a() {}}
a = 1;
// AO={a: 1 }
a = 5;
// AO={a: 5 }
console.log("2 a:", a); //5
}
console.log("3 a:", a); //function a {}
// 例5 - 里面是var声明不是函数
// GO={a:undefiend}
console.log("1 a:", a); //undefiend
// GO:{a=1} 是if里面执行到 var a; 的时候更改的
if (true) {
// AO={a:undefind}
a = 1;
// AO={a:1}
var a; //当执行到这一步的时候 将当前块作用域的 a = 1 赋值给 全局作用域的 a
// AO={a:1}
a = 5;
// AO={a:5}
console.log("2 a:", a); //5
}
console.log("3 a:", a); //1
// 例6 - 里面是var声明不是函数
// GO={a:undefiend}
console.log("1 a:", a); //undefiend
if (false) { //false 走不进来 只是预编译的时候将 var a 提升到块顶部和全局顶部
// AO={a:undefind}
a = 1;
var a;
a = 5;
console.log("2 a:", a); //5
}
console.log("3 a:", a); //undefiend到此这篇关于 JavaScript 预编译原理与流程的文章就介绍到这了，更多相关 JavaScript 预编译内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！