菜单






JavaScript深入的实践上下文

2018年11月15日 - JavaScript

JavaScript 深入之履上下文

2017/05/18 · JavaScript
·
尽上下文

初稿出处： 冴羽   

早已离简书，原因参见
http://www.jianshu.com/p/0f12350a6b66。

前言

在《JavaScript深入之实施上下文栈》被说话到，当JavaScript代码执行一截可尽代码(executable
code)时，会创对应之实施上下文(execution context)。

于每个执行上下文，都发三个至关重要性质：

然后分别在《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 函数执行上下文初始化：

  1. 复制函数 [[scope]] 属性创建作用域链，
  2. 据此 arguments 创建活动目标，
  3. 初始化活动对象，即进入形参、函数声明、变量声明，
  4. 拿运动对象压入 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 步相同：

  1. 复制函数 [[scope]] 属性创建作用域链
  2. 用 arguments 创建活动对象
  3. 初始化活动目标，即进入形参、函数声明、变量声明
  4. 拿移步目标压入 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，对作者也是一律种植鞭策。

本系列：

  1. JavaScirpt 深入的起原型到原型链
  2. JavaScript
    深入之词法作用域和动态作用域
  3. JavaScript 深入的实践上下文栈
  4. JavaScript 深入之变量对象
  5. JavaScript 深入的作用域链

  6. JavaScript 深入的起 ECMAScript 规范解读
    this

    1 赞 收藏
    评论

图片 1

相关文章

标签：, , , , , ,

发表评论

电子邮件地址不会被公开。 必填项已用*标注







网站地图xml地图