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+num2
console.log(result);
-
在代码编译之前，会创建一个GlobalObject对象，这个对象包括一些全局的其他对象，并创建一个window属性指向这个对象本身。
-
在全局代码编译的时候，遇到普通变量会放入到GlobalObject这个对象中，赋值为undefined
-
全局代码执行时，会先创建一个Global Execution Stack 全局执行栈，里面包括两个部分
- Variable Object:在全局执行栈中，这个对象是指向的GlobalObject
- 执行代码
-
执行的代码，遇到变量要取值时，会先从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");
}
-
在编译代码之前，会创建一个全局GO对象，放入相关属性
-
在编译代码的时候，将name放入到GO对象中，设置其值为undefined。然后将foo放入到GO中，发现foo是一个函数，所以会在内存中开辟一片空间，来保存这个函数，这个内存空间包含两个部分，一个是父级作用域，一个是函数执行体。然后将GO.foo的值设置为这片空间的内存地址。
var GO={ name:undefined, foo:'0x001' } -
在执行全局代码的时候，会创建一个GES全局执行栈，然后将GES放入到ECS上下文执行栈中
- GES包括两个部分
- VO(Variable Object):此时它指向的是GO
- 执行代码
- GES包括两个部分
-
执行全局代码，执行第一行时，将VO.name的值设置 为"why"
-
执行第二行时，去取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 }
-
-
执行代码
-
-
在执行foo函数的时候,先输出m,从VO中查找，输出undefined，然后会将m、n变量设置为具体的值
var AO={ m:10, n:20 } -
执行完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:AO
- AO:arguments
- scope-chain:VO+ParentSope
- this:是在运行时进行绑定的
- VO:AO
- 第二部分
- 执行代码
- 第一部分
-
执行第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();
}
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找不到
-
执行全局代码前，会先创建一个GO对象，对代码进行编译的时候，会将声明的变量和声明的函数作为属性加入到GO中。
var GO={ foo:'0X001' } -
在执行全局代码时，会创建一个全局执行上下文栈VO指向GO，执行第4行的时候，执行foo函数。执行函数的时候会创建一个函数执行上下文(FECS)。FECS的VO执行AO会先编译foo函数，将foo函数中声明的变量和声明的函数添加到FECS的AO对象中
var AO={ m:undefined } -
执行FECS中代码时，将AO.m赋值为200.执行完foo函数完后，FECS也移除上下文执行栈，AO对象没有被引用也随之销毁
-
执行第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.总结
全局代码执行过程.png
网友评论