原来 JS 函数提升 变量提升原来是这样

1.一些常见术语

• AO：函数执行前产生的一个对象

• GO:全局对象

• VO：变量对象，一般指向 AO 或 GO

• ECS:上下文执行栈

• GECS:全局上下文执行栈

• FECS：函数上下文执行栈

2.全局代码的执行过程

这是一段全局代码

var name="why";console.log(num1);var num1=20;var num2=30;var result=num1+num2console.log(result);https://www.523it.com/

1. 在代码编译之前，会创建一个 GlobalObject 对象，这个对象包括一些全局的其他对象，并创建一个 window 属性指向这个对象本身。

2. 在全局代码编译的时候，遇到普通变量会放入到 GlobalObject 这个对象中，赋值为 undefined

3. 全局代码执行时，会先创建一个 Global Execution Stack 全局执行栈，里面包括两个部分

   Variable Object:在全局执行栈中，这个对象是指向的 GlobalObject

   执行代码

4. 执行的代码，遇到变量要取值时，会先从 VO 找对应的值，从上往下依次执行

第二行输出时，要取 num1 的值，去 VO 找的时候，因为还没执行到后面，所以此时的值是 undefined

6.png

3. 全局代码的执行过程(函数)

函数和普通变量是不一样，如果在声明之前提前调用，还是会正常执行结果，而普通变量则是 undefined

var name="why";foo()function foo(){  console.log(m);  var m=10;  var n=20;  console.log("foo");}

1. 在编译代码之前，会创建一个全局 GO 对象，放入相关属性

2. 在编译代码的时候，将 name 放入到 GO 对象中，设置其值为 undefined。然后将 foo 放入到 GO 中，发现 foo 是一个函数，所以会在内存中开辟一片空间，来保存这个函数，这个内存空间包含两个部分，一个是父级作用域，一个是函数执行体。然后将 GO.foo 的值设置为这片空间的内存地址。

   var GO={ name:undefined, foo:'0x001' }
   

3. 在执行全局代码的时候，会创建一个 GES 全局执行栈，然后将 GES 放入到 ECS 上下文执行栈中

   GES 包括两个部分 VO(Variable Object):此时它指向的是 GO 执行代码

4. 执行全局代码，执行第一行时，将 VO.name 的值设置 为"why"

5. 执行第二行时，去取 foo 的值，然后从 VO 中找，返回一个内存地址。但是发现这个 foo 函数会执行。函数执行的时候会自动创建一个函数上下文执行栈 FES(Functional Execution Stack),FES 包括两个部分

   VO(Variable Object)：AO(Activation Object)

   AO:在函数编译前会创建一个 AO 对象，它在编译的时候，会将 m、n 放入到这个对象内部，然后设置其值为 undefined

   var AO={ m:undefined, n:undefined }
   

   执行代码

6. 在执行 foo 函数的时候,先输出 m,从 VO 中查找，输出 undefined，然后会将 m、n 变量设置为具体的值

   var AO={ m:10, n:20 }
   

7. 执行完 foo 函数后，这个函数上下文执行栈会移出上下文栈，然后销毁，如果 AO 对象没有任何引用的话，后面也会被销毁

4. 作用域链

var name="why";foo()function foo(){  console.log(m);  var m=10;  var n=20;  console.log(name);}

当我们查找变量时，是沿着作用域链进行查找的。所以输出的值是"why"

因为函数会存在嵌套，如果还是没找到，会继续往上一层进行查找，一层一层往上找，直到全局作用域中，如果还是没有找到，则会报错。

上面在 VO 查找的时候，发现没有 name，然后再往父级作用域中查找 GO，发现有 name，则返回对应 name 对应的值

其实函数执行栈包含的两部分

• 第一部分不仅仅包含 VO，还包含作用域链：这个作用域链是由当前的 VO 和 ParentScope 父级作用域其实在编译的时候就已经确定好的，所以 foo 父级作用域是 GO 所以作用域链是 VO+GO

5. 全局代码执行的过程（函数嵌套）

var name="why";foo()function foo(){  console.log(m);  var m=10;  var n=20;  function bar(){    console.log(name);  }  bar()}

如果一个函数嵌套另外一个函数，另外一个函数刚开始是不需要被执行的时候，是不会被编译的，只会被预编译，

• 例如 bar 函数执行时，也会自动创建函数上下文执行栈 FES，里面包含两个部分：

  第一部分 VO:AOAO:argumentsscope-chain:VO+ParentSopethis:是在运行时进行绑定的

  第二部分执行代码

• 执行第 8 行代码的时候,输出 name 的值，会先从当前的 VO 中查找 name，发现不存在，去父级作用域(foo)的 VO 中查找，发现还是不存在，就是去父级作用域(foo)的父级作用域(GO)中去查找,发现有 name 的值，是"why"，所以将其输出"why"。

8.png

6. 函数调用函数的执行过程

var message="hello Global";function foo(){  console.log(message);}function bar(){  var message="hello bar";  foo(www.523it.com);}bar();

打印的结果是 hello Global

• 函数的作用域是在编译的时候就已经确定了

• 函数的作用域跟它定义的位置有关系，跟调用的位置是没有关系的。

9.png

7. 变量环境（Variable Enviroment）和环境记录（Environment Record）

其实上面的讲解是基于早期 ECMA 的版本规范：

• VO、GO、AO 这是 ECMAScript5 以前的规范每个执行上下文（GEC、FEC）会被关联到一个变量对象中（Variable Object），在源代码中声明的变量和声明的函数都会作为属性放入到 VO 中。对于函数来说，参数也会放入到 VO 中。

在最新的 ECMASCript 规范中，对于一些词汇作了一些修改：

• 变量环境(VE)和环境记录(ER)(不一定用对象实现，也可以用 map 实现)每个执行上下文都会被关联到一个变量环境中，在执行代码中，声明的变量和声明的函数都会作为环境记录添加到变量环境中对于函数而言，参数也会作为环境记录加入到变量环境中。

通过上面的变化，我们可以知道，VO 变为变量环境(VE)

8.作用域提升面试题

8.1 面试题 1

var n=100;function foo(){  n=200;}foo()console.log(n);//200

8.2 面试题 2

function foo(){  console.log(n);//undefined  var n=200;  console.log(n); //200}var n=100;foo()

输出 undefined 200

8.3 面试题 3

var n=100;function foo1(){  console.log(n);}
function foo2(){  var n=200;  console.log(n);  foo1()}
foo2();console.log(n);

  输出 200 100 100                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

8.4 面试题 4

var a=100;function foo(){  console.log(a);  return   var a=100;}foo()

输出 undefined

8.5 面试题 5

function foo(){  var m=200;}foo()console.log(m);

会报错，报 m 找不到

1. 执行全局代码前，会先创建一个 GO 对象，对代码进行编译的时候，会将声明的变量和声明的函数作为属性加入到 GO 中。

   var GO={ foo:'0X001' }
   

2. 在执行全局代码时，会创建一个全局执行上下文栈 VO 指向 GO，执行第 4 行的时候，执行 foo 函数。执行函数的时候会创建一个函数执行上下文(FECS)。FECS 的 VO 执行 AO 会先编译 foo 函数，将 foo 函数中声明的变量和声明的函数添加到 FECS 的 AO 对象中

   var AO={ m:undefined }
   

3. 执行 FECS 中代码时，将 AO.m 赋值为 200.执行完 foo 函数完后，FECS 也移除上下文执行栈，AO 对象没有被引用也随之销毁

4. 执行第 5 行时，会去 GO 中查找 m 发现没有，则会报一个错误 m is not defined

8.6 面试题 6(特殊语法)

function foo(){   m=200;}foo()console.log(m);

• 严格模式下，会报错

• 非严格模式下，输出 200

如果在函数中没有声明 某个变量，但是却去赋值了。它这个变量会先被定义到全局对象中，然后再去执行赋值操作

8.7 面试题 7

function foo(){  var a=b=100;}foo()console.log(a);console.log(b);

输出 a 的时候会报错，因为 a 未在 GO 中声明

输出 b 的时候不会报错，输出的是 100

10.png

9.总结

作者：咸鱼不咸_123

链接：https://www.jianshu.com/p/e52c40870203

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。