JavaScript基础教程之执行上下文
沉沙 2018-06-19 来源 : 阅读 932 评论 0

摘要:本篇JavaScript教程讲解了执行上下文的相关内容,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。


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()();

   

两段代码都会打印’local scope’。虽然两段代码执行的结果一样,但是两段代码究竟有哪些不同呢?

两者的区别在于执行上下文栈的变化不一样,然而,如果是这样笼统的回答,依然显得不够详细,本篇就会详细的解析执行上下文栈和执行上下文的具体变化过程。


具体执行分析

我们分析第一段代码:

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

   

执行过程如下:

1.执行全局代码,创建全局执行上下文,全局上下文被压入执行上下文栈


    ECStack = [
        globalContext
    ];

   

2.全局上下文初始化


    globalContext = {
        VO: [global, scope, checkscope],
        Scope: [globalContext.VO],
        this: globalContext.VO
    }

   

3.初始化的同时,checkscope 函数被创建,保存作用域链到函数的内部属性[[scope]]


    checkscope.[[scope]] = [
      globalContext.VO
    ];

   

4.执行 checkscope 函数,创建 checkscope 函数执行上下文,checkscope 函数执行上下文被压入执行上下文栈


    ECStack = [
        checkscopeContext,
        globalContext
    ];

   

5.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
    }

   

6.执行 f 函数,创建 f 函数执行上下文,f 函数执行上下文被压入执行上下文栈


    ECStack = [
        fContext,
        checkscopeContext,
        globalContext
    ];

   

7.f 函数执行上下文初始化, 以下跟第 4 步相同:

1). 复制函数 [[scope]] 属性创建作用域链

2). 用 arguments 创建活动对象

3). 初始化活动对象,即加入形参、函数声明、变量声明

4). 将活动对象压入 f 作用域链顶端

    fContext = {
        AO: {
            arguments: {
                length: 0
            }
        },
        Scope: [AO, checkscopeContext.AO, globalContext.VO],
        this: undefined
    }

   

8.f 函数执行,沿着作用域链查找 scope 值,返回 scope 值

9.f 函数执行完毕,f 函数上下文从执行上下文栈中弹出

  
    ECStack = [
        checkscopeContext,
        globalContext
    ];

   

10.checkscope 函数执行完毕,checkscope 执行上下文从执行上下文栈中弹出


    ECStack = [
        globalContext
    ];

   

第二段代码就留给大家去尝试模拟它的执行过程。


var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程