暗示全局变量

什么是暗示全局变量（imply global variable）呢？
在JavaScript中所有的变量都归window对象所有。如下：

  1. var a = 1;
  2. b = 2;
  4. // 可以理解成这样
  5. // window = {
  6. //  a: 1,
  7. //  b: 2
  8. // }

在JavaScript中，如果不使用var关键字进行变量声明，那么这个变量就是「全局变量」。

  1. function test() {
  2.   var a = b = 1;
  3.   c = 2;
  4. }
  5. test()
  6. console.log(b); // 1
  7. console.log(c); // 2
  8. console.log(a); // error，a 不是全局变量

预编译

因为JavaScript是解释型开发语言，所以它的执行步骤是：

  1. 检查通篇的语法错误
  2. 预编译
  3. 解释一行执行一行
    1. console.log(a); // error，检查语法错误

在「预编译」的过程中，函数声明会被整体提升，所以你在函数声明前调用函数还是函数声明后调用函数是一样的

  1. test();  // 1
  3. function test() {
  4.   console.log(1);
  5. }
  7. test(); // 1
  10. console.log(a); // function()
  11. function a(){}

在声明变量的时候只有变量的提升的，赋值是不会提升的。

  1. console.log(a); // undefind
  3. var a = 1;
  5. var b = 3; // 变量声明且赋值
  7. console.log(c); // Error，预编译的过程中发现 c 没有定义
  10. // 以上代码在预编译的过程中其实值这样的
  11. // 在预编译时我们不看赋值，只把变量的声明提升，因此若在赋值前打印会提示 undefined
  13. var a;
  14. var b;
  15. a = 1;
  16. b = 3;

那么到底什么是预编译？？？
预编译就是全局代码和函数执行之前执行的步骤。

预编译的执行过程可以分为三步：

  1. 寻找函数的形参和变量声明，赋值为undefind
  2. 将实参的值赋值给形参
  3. 找函数声明且赋值函数体

    我更愿意把预编译理解成五步：

    1. 执行函数
    2. 变量赋值

我们先来看函数执行上下文。
Activation Object 活跃对象，简称AO，或者「函数上下文」。

  1. function test(a) {
  2.   console.log(a); // funtion
  3.   var a = 1;
  4.   console.log(a);  // 1
  5.   function a() {}
  6.   console.log(a)  // 1
  7.   var b = function () {};
  8.   console.log(b);  // function
  9.   function d() {}
  10. }
  11. test(2);
  1. // 以上函数执行的预编译过程是
  3. // 0、创建 AO 对象
  5. // 1、寻找函数形参和变量声明，所以我们能找到形参 a 和变量声明 b
  6. AO = {
  7.   a: undefind,
  8.   b: undefind
  9. }
  11. // 2、实参数据赋值给形参
  12. AO = {
  13.   a: undefind => 2,
  14.   b: undefind
  15. }
  17. // 3、寻找函数声明且赋值函数体，我们能看到 a 和 d 都是函数声明
  18. AO = {
  19.   a: undefind => 2 => function(),
  20.   b: undefind,
  21.   d: function()
  22. }
  24. // 4、执行函数
  26. // 5、变量赋值
  27. // 第 2 行执行的时候，a 是 function() ，所以打印 function
  28. // 第 3 行，a 被赋值为 1
  29. // 第 4 行，打印 a 为 1
  30. // 第 5 行，a 在预编译阶段已经赋值为 function 所以这行忽略
  31. // 第 6 行，a 无变化，所以打印 1
  32. // 第 7 行，b 赋值为 function()
  33. // 第 8 行，打印 b 为 function()
  34. // 第 9 行，d 在预编译阶段赋值为 function

以上就是一个函数执行上下文的一个全过程。

Global Object全局上下文，简称GO，和AO执行过程是一样的，只不过GO不存在函数实参对应过程。

  1. var a = 1;
  2. function a() {}
  3. console.log(a);
  1. // 以上代码的执行过程
  3. // 0、创建 GO 对象
  5. // 1、寻找变量声明
  6. GO = {
  7.  a: undedfind
  8. }
  10. // 2、寻找函数声明
  11. GO = {
  12.  a: undedfind => function()
  13. }
  15. // 3、执行代码
  17. // 4、变量赋值
  18. // 第 1 行，把 a 赋值为 1
  19. // 第 2 行，预编译阶段已经执行所以忽略
  20. // 第 3 行，打印 a 为 1

下面再看几个例子：

  1. function test() {
  2. var a = b = 1;
  3. console.log(a); // 
  4. }
  6. // 自己不存在的会去GO对象中寻找
  7. GO = {
  8.   b: undefind => 1
  9. }
  10. AO = {
  11.   a: undefind => GO.b => 1
  12. }
  1. var b = 3;
  2. console.log(a); // function
  3. function a(a) {
  4.   console.log(a); // function
  5.   var a = 2;
  6.   console.log(a); // 2
  7.   function a() {}
  8.   var b = 5;
  9.   console.log(b); // 5
  10. }
  11. a(1);
  13. // 执行过程
  14. GO = {
  15.   b: undefind => 3
  16.   a: function
  17. }
  18. AO = {
  19.   a: undefind => 1 => function => 2
  20.   b: undefind => 5
  21. }
  1. function test() {
  2.   console.log(b);  // undefind
  3.   if (a) { // if 语句执行的时候才会判断，这里看的是预编译
  4.     var b = 2;
  5.   }
  6.   c = 3;
  7.   console.log(c); // 3
  8. }
  9. var a;
  10. test();
  11. a = 1;
  12. console.log(a); // 1
  14. // 执行过程
  15. GO = {
  16.   a: undenfind => 1
  17.   test: function
  18.   c: undefind => 3
  19. }
  20. AO = {
  21.   b: undefind
  22. }