菜单

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地图