[JavaScript] JavaScript之预编译学习(内含多个面试题) #yyds干货盘点#

• 词法分析
  
• 语法分析：检查代码是否存在错误，若有错误，引擎会抛出语法错误。同时会构建一颗抽象语法树(AST)。
  
• 预编译
  
• 解释执行
  

JavaScript是解释性语言，也就是说，编译一行，执行一行，但js并非上来就进入编译环节，它在编译之前存在预编译过程。

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

ƒ a() {}
123
123
ƒ () {}

• 预编译开始，会建立AO(Activation Object)对象
  
• 找形参和变量声明，使其作为AO的属性名，值赋予undefined
  
• 实参和形参相统一(将实参值赋值给形参)
  
• 找函数声明，函数名作为AO属性名，值赋予函数体案例分析
  学习了函数的预编译过程，就可以回头细细的品味一下上面的案例：
  
• 先建立AO，并找形参和变量声明，值赋予undefined

  AO :{
    a: undefined,
    b: undefined
  }

• 形参实参相统一

  AO :{
    a: 1,
    b: undefined
  }

• 找函数声明，值赋予函数体

  AO :{
    a: function a() {},
    b: undefined,
    d: function d() {}
  }

• 预编译过程结束，挨着分析一下console的打印结果：

  第一个console.log(a); // 此时AO中a的值为function a() {} 
  执行赋值操作：
    a = 123 // AO中的a值修改为123
    第二个console.log(a) // 123
    第三个console.log(a) // 123
    b = function() {} // AO中的b值修改为function b(){}
    console.log(b) // function b(){}

• 生成GO(Global Object)
  
• 找变量声明，由于全局变量默认挂载在window之上，若window当前已存在当前属性，忽略当前操作，若没有，变量作为属性名，值赋予undefined。
  
• 找函数声明，函数与变量类似，先去window上查看，不存在，函数作为函数名，值为函数体案例分析
  将函数预编译案例稍微修改，如下：
  

// test部分的结果与函数部分相同，再次只分析全局部分
console.log(a);
var a = 1;
console.log(a);
function test(a) {
  console.log(a);
  var a = 123;
  console.log(a);
  function a() {}
  console.log(a);
  console.log(b);
  var b = function() {}
  console.log(b);
}
test(2);

• 生成GO，变量提升，函数提升，得到GO如下:

  GO/window: {
    a: undefined,
    test: function() {}
  }

• 因此第一个a的值为undefined，随后a赋值为1，所以第二个a的值为1
  

test中定义了变量a，因此打印的a为自身AO中的值。如果test中没有定义a，就会沿着作用域链，当GO中查找a。

function test() {
console.log(b);
if (a) {
  var b = 100;
}
console.log(b);
c = 234;
console.log(c);
}
var a;
test();
a = 10;
console.log(c);

• 生成GO

  GO: {
    a: undefined,
    test: function test() {},
    c: undefined
  }

  JavaScript中变量如果未经声明就赋值，会默认将变量挂载到window对象上，这也就是所谓的imply global。c就是imply global。
  

  
  
• test执行，生成test的AO

  // AO还会存储[[scope]]属性，存储AO的作用域链
  AO: {
    b: undefined,
    [[scope]]: [TestAO, GO]
  }

  有同学会问，if(a)为false，if内部不会执行，那test的AO中为什么还会有b啊？预编译并不是执行，它只不过把变量、函数等进行提升，只有在执行时，才会设计代码逻辑的判断。
  

  
  
• 分析test函数执行

  console.log(b) // AO中b为undefined
  if (a) // AO中无a，沿[[scope]]找到GO中的a，值为undefined
  b = 100; // 不执行
  console.log(b) // undefined
  c = 234; // AO中没有c属性，沿[[scope]]找到GO中的c修改为234
  console.log(c) // 打印的是GO中的c，234
  // test执行完毕，AO销毁

• 分析剩余代码：

  a = 10; // GO中的a修改为10
  console.log(c) // GO中c值为234，234

var foo = 1;
function bar() {
  console.log(foo);  
  if (!foo) {
    var foo = 10;
  }
  console.log(foo); 
}
bar();

undefined
10

var a = 1;
function b() {
  console.log(a);  
  a = 10;
  return;
  function a() { }
}
b();
console.log(a);

function a() { }
1

console.log(foo); 
var foo = "A";
console.log(foo)  
var foo = function () {
  console.log("B");
}
console.log(foo); 
foo(); 
function foo(){
  console.log("C");
}
console.log(foo)  
foo();

ƒ foo(){
  console.log("C");
}
A
ƒ () {
  console.log("B");
}
B
ƒ () {
  console.log("B");
}
B

var foo = 1;
function bar(a) {
  var a1 = a;
  var a = foo;
  function a() {
    console.log(a); 
  }
  a1();
}
bar(3);

• 函数声明，整体提升
  
• 变量声明，声明提升