菜单

JavaScript深入之推行上下文

2018年11月16日 - 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地图