细聊JavaScript的预编译机制

前言

在上篇文章中我们了解到了JavaScript的作用域链，本文将继续深入探讨JavaScript的预编译机制

概念

预编译： 代码在执行前需要进行编译操作，用于确定代码之间的各种关联

简单来说，开始写程序的时候，预编译器已经帮我们做好了很多事情，让程序写起来更快，也更容易理解。就像我们在做手工之前，先准备好所有的材料和工具一样。

如何执行？

变量声明

代码在执行前是一定会被编译的，不编译引擎就不会识别出来，会出现诸多问题比如变量提升

我们来看个例子：

console.log(a); 
var a = 1

变量 在编译过后会声明提升，代码在引擎眼中是这样的：

var a
console.log(a);  //输出undefined
a = 1

函数声明

我们来举个函数的例子

test()
function test() {
    var a = 123
    console.log(a);
}

同样，函数声明 也会整体提升：

function test() {
    var a = 123
    console.log(a);
}
test()//会输出123，不会报错

例子

好的，理解了这两个概念之后我们来看下面这行代码：

var a = 1;
function fn(a) {
    var a = 2
    function a() { }
    console.log(a);
}
fn(3)

咱先分析一下：

• 预编译发生在全局 ：

  1. 创建全局GO对象
  2. 找变量声明，将变量名作为GO的属性名，值为undefined
  3. 在全局找函数声明，将函数作为GO的属性名，值为函数体

• 预编译发生在函数体 内：

  1. 创建一个AO对象

  2. 找形参和变量声明，将形参和变量名作为AO的属性名，值为undefined

  3. 形参和实参统一

  4. 在函数体内找函数声明，将函数名作为AO的属性名，值为该函数体

  好，接下来我们进行编译，在原代码的基础上解释：

//全局作用域
GO:{
a:undefined-->1
fn:function(){}
}
var a = 1;
function fn(a) {
    var a = 2
    function a() { }
    console.log(a);
}
//函数调用
AO:{
    a:undefined-->3-->function(){}   
}
fn(3)//输出为2

再来分析一段：

  function fn(a) {
  console.log(a);
  var a = 4399
  console.log(a);
  function a() { }
  console.log(a);
  var b = function () { }
  console.log(b);
  function c() { }
  var c = a
  console.log(c);
}

步骤一：全局预编译

GO:{
   fn:function(){}//全局就只有一个fn
  }

步骤二：全局代码执行，遇到了函数调用，进行函数编译

AO: {
  a: undefined-- > 1-- > function a() { }
  b: undefined
  c: undefined-- > function c() { }
}

步骤三：函数编译完了之后再执行

AO: {
  a: undefined-- > 1-- > function()-->4399
  b: undefined -->function () { }
  c: undefined-- > function c() { }-->4399
}

输出结果为

这个输出结果符合我们的预期

结语

好滴，以上就是本文全部内容啦，本文我们深入理解了JavaScript预编译机制，包括变量提升和函数声明提升等概念。希望这些知识能帮助大家写出更高效的代码。感谢阅读，期待未来更多精彩分享~