（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）
本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第二天。
本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划，点击查看前端进阶的破冰之旅
本期推荐文章
JavaScript深入之执行上下文栈和JavaScript深入之变量对象，由于微信不能访问外链，点击阅读原文就可以啦。
推荐理由
本期推荐了两篇文章，主要原因是两篇连在一起阅读理解会更加深一些，其中部分知识我在【进阶1-1期】已经介绍过了，但是本文从另一个角度介绍了执行上下文和变量对象，条理清晰，并配有代码解释，值得一读。
阅读笔记
JS是单线程的语言，执行顺序肯定是顺序执行，但是JS 引擎并不是一行一行地分析和执行程序，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。
翠花，上代码
例子一：变量提升
foo; // undefined
var foo = function () {
console.log('foo1');
}
foo(); // foo1，foo赋值
var foo = function () {
console.log('foo2');
}
foo(); // foo2，foo重新赋值
例子二：函数提升
foo(); // foo2
function foo() {
console.log('foo1');
}
foo(); // foo2
function foo() {
console.log('foo2');
}
foo(); // foo2
例子三：声明优先级，函数 > 变量
foo(); // foo2
var foo = function() {
console.log('foo1');
}
foo(); // foo1，foo重新赋值
function foo() {
console.log('foo2');
}
foo(); // foo1
上面三个例子中，第一个例子是变量提升，第二个例子是函数提升，第三个例子是函数声明优先级高于变量声明。
需要注意的是同一作用域下存在多个同名函数声明，后面的会替换前面的函数声明。
执行上下文
执行上下文总共有三种类型
-
全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，
this指向这个全局对象。 - 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。
-
Eval 函数执行上下文： 指的是运行在
eval函数中的代码，很少用而且不建议使用。
这部分内容在【进阶1-1期】中详细介绍了，点击查看【进阶1-1期】理解JavaScript 中的执行上下文和执行栈
执行上下文栈
因为JS引擎创建了很多的执行上下文，所以JS引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文。
当 JavaScript 初始化的时候会向执行上下文栈压入一个全局执行上下文，我们用 globalContext 表示它，并且只有当整个应用程序结束的时候，执行栈才会被清空，所以程序结束之前， 执行栈最底部永远有个 globalContext。
ECStack = [ // 使用数组模拟栈
globalContext
];
具体执行过程如下图所示，这部分内容在【进阶1-1期】中详细介绍了，点击查看【进阶1-1期】理解JavaScript 中的执行上下文和执行栈
[图片上传失败...(image-1cdb98-1543477535627)]
找不同
有如下两段代码，执行的结果是一样的，但是两段代码究竟有什么不同？
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f();
}
checkscope();
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
答案是 执行上下文栈的变化不一样。
第一段代码：
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext);
ECStack.pop();
ECStack.pop();
第二段代码：
ECStack.push(<checkscope> functionContext);
ECStack.pop();
ECStack.push(<f> functionContext);
ECStack.pop();
函数上下文
在函数上下文中，用活动对象(activation object, AO)来表示变量对象。
活动对象和变量对象的区别在于
- 1、变量对象（VO）是规范上或者是JS引擎上实现的，并不能在JS环境中直接访问。
- 2、当进入到一个执行上下文后，这个变量对象才会被激活，所以叫活动对象（AO），这时候活动对象上的各种属性才能被访问。
调用函数时，会为其创建一个Arguments对象，并自动初始化局部变量arguments，指代该Arguments对象。所有作为参数传入的值都会成为Arguments对象的数组元素。
执行过程
执行上下文的代码会分成两个阶段进行处理
-
1、进入执行上下文
-
2、代码执行
进入执行上下文
很明显，这个时候还没有执行代码
此时的变量对象会包括（如下顺序初始化）：
- 1、函数的所有形参 (only函数上下文)：没有实参，属性值设为undefined。
- 2、函数声明：如果变量对象已经存在相同名称的属性，则完全替换这个属性。
- 3、变量声明：如果变量名称跟已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性。
上代码就直观了
function foo(a) {
var b = 2;
function c() {}
var d = function() {};
b = 3;
}
foo(1);
对于上面的代码，这个时候的AO是
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: undefined,
c: reference to function c(){},
d: undefined
}
形参arguments这时候已经有赋值了，但是变量还是undefined，只是初始化的值
代码执行
这个阶段会顺序执行代码，修改变量对象的值，执行完成后AO如下
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: 3,
c: reference to function c(){},
d: reference to FunctionExpression "d"
}
总结如下：
-
1、全局上下文的变量对象初始化是全局对象
-
2、函数上下文的变量对象初始化只包括 Arguments 对象
-
3、在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
-
4、在代码执行阶段，会再次修改变量对象的属性值
参考
往期文章查看
- 【进阶1-1期】理解JavaScript 中的执行上下文和执行栈
- 【进阶1-2期】JavaScript深入之执行上下文栈和变量对象
- 【进阶1-3期】JavaScript深入之内存空间详细图解
- 【进阶1-4期】JavaScript深入之带你走进内存机制制
- 【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免
- 【进阶2-1期】深入浅出图解作用域链和闭包
每周计划安排
每周面试重难点计划如下，如有修改会通知大家。每周一期，为期半年，准备明年跳槽的小伙伴们可以把本公众号置顶了。
- 【进阶1期】 调用堆栈
- 【进阶2期】 作用域闭包
- 【进阶3期】 this全面解析
- 【进阶4期】 深浅拷贝原理
- 【进阶5期】 原型Prototype
- 【进阶6期】 高阶函数
- 【进阶7期】 事件机制
- 【进阶8期】 Event Loop原理
- 【进阶9期】 Promise原理
- 【进阶10期】Async/Await原理
- 【进阶11期】防抖/节流原理
- 【进阶12期】模块化详解
- 【进阶13期】ES6重难点
- 【进阶14期】计算机网络概述
- 【进阶15期】浏览器渲染原理
- 【进阶16期】webpack配置
- 【进阶17期】webpack原理
- 【进阶18期】前端监控
- 【进阶19期】跨域和安全
- 【进阶20期】性能优化
- 【进阶21期】VirtualDom原理
- 【进阶22期】Diff算法
- 【进阶23期】MVVM双向绑定
- 【进阶24期】Vuex原理
- 【进阶25期】Redux原理
- 【进阶26期】路由原理
- 【进阶27期】VueRouter源码解析
- 【进阶28期】ReactRouter源码解析
交流
本人Github链接如下，欢迎各位Star
http://github.com/yygmind/blog
我是木易杨，网易高级前端工程师，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！
如果你想加群讨论每期面试知识点，公众号回复[加群]即可
网友评论