JavaScript 深入之履上下文
2017/05/18 · JavaScript
·
尽上下文
初稿出处： 冴羽
早已离简书，原因参见
http://www.jianshu.com/p/0f12350a6b66。
前言
在《JavaScript深入之实施上下文栈》被说话到，当JavaScript代码执行一截可尽代码(executable
code)时，会创对应之实施上下文(execution context)。
于每个执行上下文，都发三个至关重要性质：
- 变量对象(Variable object，VO)
- 打算域链(Scope chain)
- this
然后分别在《JavaScript深入之变量对象》、《JavaScript深入之作用域链》、《JavaScript深入的从ECMAScript规范解读this》未遭教授了这三单特性。
读书本文前，如果对以上的定义不是格外懂得，希望先看这些章。
为，这等同篇，我们会成在独具内容，讲说执行上下文的切实可行处理过程。
就算人微言轻，但也要产生协调的神态。
思考题
在《JavaScript深入之词法作用域和动态作用域》饱受，提出如此一道思试题：
var scope = “global scope”; function checkscope(){ var scope = “local
scope”; function f(){ return scope; } return f(); } checkscope();
|
1
2
3
4
5
6
7
8
9
|
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()();
|
1
2
3
4
5
6
7
8
9
|
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
|
零星截代码都见面打印’local
scope’。虽然个别段落代码执行的结果一致，但是个别段子代码究竟发生安不同吧？
继而就于产一致篇《JavaScript深入的履上下文栈》遭遇，讲到了二者的别在于实施上下文栈的变通不均等，然而，如果是这般笼统的回，依然显示不敷详细，本篇就会见详细的剖析执行上下文栈和履行上下文的求实变化历程。
文章好在自我的 Github
https://github.com/mqyqingfeng/Blog
查看
切切实实执行分析
我们分析第一段落代码：
var scope = “global scope”; function checkscope(){ var scope = “local
scope”; function f(){ return scope; } return f(); } checkscope();
|
1
2
3
4
5
6
7
8
9
|
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f();
}
checkscope();
|
推行进程如下：
1.履行全局代码，创建全局执行上下文，全局上下文被压入执行上下文栈
ECStack = [ globalContext ];
|
1
2
3
|
ECStack = [
globalContext
];
|
2.全局上下文初始化
globalContext = { VO: [global, scope, checkscope], Scope:
[globalContext.VO], this: globalContext.VO }
|
1
2
3
4
5
|
globalContext = {
VO: [global, scope, checkscope],
Scope: [globalContext.VO],
this: globalContext.VO
}
|
2.初始化的而，checkscope
函数被创造，保存作用域链到函数的内属性[[scope]]
checkscope.[[scope]] = [ globalContext.VO ];
|
1
2
3
|
checkscope.[[scope]] = [
globalContext.VO
];
|
3.尽 checkscope 函数，创建 checkscope 函数执行上下文，checkscope
函数执行上下文被压入执行上下文栈
ECStack = [ checkscopeContext, globalContext ];
|
1
2
3
4
|
ECStack = [
checkscopeContext,
globalContext
];
|
4.checkscope 函数执行上下文初始化：
- 复制函数 [[scope]] 属性创建作用域链，
- 据此 arguments 创建活动目标，
- 初始化活动对象，即进入形参、函数声明、变量声明，
- 拿运动对象压入 checkscope 作用域链顶端。
同时 f 函数被创造，保存作用域链到 f 函数的内部属性[[scope]]
checkscopeContext = { AO: { arguments: { length: 0 }, scope: undefined,
f: reference to function f(){} }, Scope: [AO, globalContext.VO], this:
undefined }
|
1
2
3
4
5
6
7
8
9
10
11
|
checkscopeContext = {
AO: {
arguments: {
length: 0
},
scope: undefined,
f: reference to function f(){}
},
Scope: [AO, globalContext.VO],
this: undefined
}
|
5.实行 f 函数，创建 f 函数执行上下文，f 函数执行上下文被压入执行上下文栈
ECStack = [ fContext, checkscopeContext, globalContext ];
|
1
2
3
4
5
|
ECStack = [
fContext,
checkscopeContext,
globalContext
];
|
6.f 函数执行上下文初始化, 以下以及第 4 步相同：
- 复制函数 [[scope]] 属性创建作用域链
- 用 arguments 创建活动对象
- 初始化活动目标，即进入形参、函数声明、变量声明
- 拿移步目标压入 f 作用域链顶端
fContext = { AO: { arguments: { length: 0 } }, Scope: [AO,
checkscopeContext.AO, globalContext.VO], this: undefined }
|
1
2
3
4
5
6
7
8
9
|
fContext = {
AO: {
arguments: {
length: 0
}
},
Scope: [AO, checkscopeContext.AO, globalContext.VO],
this: undefined
}
|
7.f 函数实行，沿着作用域链查找 scope 值，返回 scope 值
8.f 函数履行完毕，f 函数上下文从执行上下文栈中弹出
ECStack = [ checkscopeContext, globalContext ];
|
1
2
3
4
|
ECStack = [
checkscopeContext,
globalContext
];
|
9.checkscope 函数执行了，checkscope 执行上下文从实行上下文栈中弹出
ECStack = [ globalContext ];
|
1
2
3
|
ECStack = [
globalContext
];
|
次段子代码就留给大家去品尝模拟它的尽进程。
var scope = “global scope”; function checkscope(){ var scope = “local
scope”; function f(){ return scope; } return f; } checkscope()();
|
1
2
3
4
5
6
7
8
9
|
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
|
可是，在生一致篇《JavaScript深入之闭包》中吗会见提及当下段代码的执行进程。
关键参照
《一道js面试题引发的思考》
本文写的最好好，给了自我许多启发。感激不尽！
深切系列
JavaScript深入系列目录地址：https://github.com/mqyqingfeng/Blog。
JavaScript深入系列预计写十五首左右，旨在救助大家捋顺JavaScript底层知识，重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难处概念。
若产生荒唐或未兢兢业业的地方，请务必与指正，十分谢谢。如果爱或有所启发，欢迎star，对作者也是一律种植鞭策。
本系列：
- JavaScirpt 深入的起原型到原型链
- JavaScript
深入之词法作用域和动态作用域 - JavaScript 深入的实践上下文栈
- JavaScript 深入之变量对象
- JavaScript 深入的作用域链
-
JavaScript 深入的起 ECMAScript 规范解读
this1 赞 收藏
评论
