JavaScript之预编译

JavaScript执行步骤

1.检查通篇的语法错误
2.预编译过程
3.解释一行，执行一行

  (a)
  test()
  function test() {
    console.log(1) // 1
  }

  (b)
  console.log(a); // undefined
  var a ;

  函数申明整体提升，变量只有申明提升，赋值不提升

  (c)
  console.log(a) // function a(a){}
  function a(a){}
  var a = 1

  (d)
  var a = 1
  b = 2
  console.log(window.b) // a = window.a
                        // b = window.b

暗示全局变量 imply global variable

  (a)
  function test(){
    var a = b = 1
    // 1.先声明 var a
    // 2.1赋值给b
    // 3.b的值赋值给a
  }
  console.log(a) // error
  console.log(window.a) // undefined
  console.log(b) // 1
  console.log(window.b) // 1

  (b)
  function test(a) {
   console.log(a) // function a() {}
   var a = 1
   console.log(a) // 1
   function a() {}
   console.log(a) // 1
   var b = function () {}
   console.log(b) // function(){}
   function d() {}
  }
  test(2)

函数预编译：AO activation object (活跃对象，函数上下文)

 function test(a) {
   console.log(a) // function a() {}
   var a = 1
   console.log(a) // 1
   function a() {}
   console.log(a) // 1
   var b = function () {}
   console.log(b) // function(){}
   function d() {}
  }
  test(2)
    
 执行过程

 AO = {

  }

  <-预编译过程->

  第一步：寻找形参和变量申明
  AO = {
    a: undefined,
    b: undefined
  }

  第二步：实参赋值给形参
  AO = {
    a: undefined -> 2,
    b: undefined
  }

  第三步：寻找函数体的申明，并赋值
  AO = {
    a: undefined -> 2 -> function a() {},
    b: undefined,
    d: function d() {}
  }

  <-代码执行过程->
 第四步：执行函数体第一句
 // console.log(a)：function a(){}

 第五步：执行函数体第二局
 //a = 1
  AO = {
    a: undefined -> 2 -> function a() {} -> 1,
    b: undefined,
    d: function d() {}
  }

  ....

 全局预编译：GO global object 全局上下文

1. 找变量
2. 找函数申明
3. 执行

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

  GO = {
    a: undefined -> function a(){} -> 1
  }

  其实GO就是window，即GO === window

  (b)
  console.log(a, b) // function a(){} undefined
  function a() {}
  var b = function () {}

  GO = {
    b: undefined
    a: function a(){}
  }

练习

练习

  （1）
   function test() {
      var a = b = 1;
      console.log(b); // 1
   }
   test();
   步骤：
   <-预编译过程->
   1.
   GO = {

   }

   2.
   GO = {

   }

   AO = {
      a: undefined
   }
   <-执行过程->
   3.
   GO = {
      b: 1
   }

   AO = {
      a: undefined
   }

   4.
   GO = {
      b: 1
   }

   AO = {
      a: undefined -> 1
   }

   (2)
   var b = 3;
   console.log(a); // function a(a){...}
   function a(a){
      console.log(a) // function a(){}
      var a = 2;
      console.log(a); // 2
      function a(){}
      var b = 5;
      console.log(b) // 5
   }
   a(1);

   步骤：

   <-编译过程->

   GO = {
      b: undefined,
      a: function a(){...}
   }

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

  <-执行过程->

   GO = {
      b: undefined -> 3,
      a: function a(){...}
   }

   AO = {
      a: undefined -> 1 -> function a(){} -> 2
      b: undefined -> 5
   }


  (3)
  a = 1;
  function test(){
    console.log(a); // undefined
    a = 2;
    console.log(a); // 2
    var a = 3;
    console.log(a) // 3
  }
  test()

  (4)
  function test(){
    console.log(b); // undefined
    if (a) {
      var b = 2;
    }

    c = 3;
    console.log(c) // 3
  }

  var a;
  test();
  a = 1;
  console.log(a); // 1

  (5)
  function test(){
    return a;
    a = 1;
    function a(){}
    var a = 2;
  }
  console.log(test()); // function a(){}


  (6)
  function test(){
    a = 1;
    functin a(){}
    var a = 2;
    return a;
  }
  console.log(test()); // 2

  (7)
  a = 1;
  function test(e){
    function e(){}
    arguments[0] = 2;
    console.log(e); // 2
    if(a){
      var b = 3;
    }
    var c;
    a = 4;
    var a;
    console.log(b); // undefined
    f = 5;
    console.log(c); // undefined
    console.log(a); // 4
  }
  var a;
  test(1);