1. 首页
  2. BAT面试题

【进阶2期】JavaScript深入之执行上下文栈和变量对象

JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。

翠花,上代码

例子一:变量提升

foo;  // undefined
var foo = function () {
    console.log('foo1');
}

foo();  // foo1,foo赋值

var foo = function () {
    console.log('foo2',"JS中文网 – 前端进阶资源分享 www.javascriptc.com");
}

foo(); // foo2,foo重新赋值

例子二:函数提升

foo();  // foo2
function foo() {
    console.log('foo1');
}

foo();  // foo2

function foo() {
    console.log('foo2');
}

foo(); // foo2

例子三:声明优先级,函数 变量

foo();  // foo2
var foo = function() {
    console.log('foo1');
}

foo();  // foo1,foo重新赋值

function foo() {
    console.log('foo2');
}

foo(); // foo1,JS中文网 – 前端进阶资源分享 www.javascriptc.com

上面三个例子中,第一个例子是变量提升,第二个例子是函数提升,第三个例子是函数声明优先级高于变量声明。

需要注意的是同一作用域下存在多个同名函数声明,后面的会替换前面的函数声明。

执行上下文

执行上下文总共有三种类型

  • 全局执行上下文:只有一个,浏览器中的全局对象就是 window 对象,this 指向这个全局对象。
  • 函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。
  • Eval 函数执行上下文: 指的是运行在 eval 函数中的代码,很少用而且不建议使用。

这部分内容在【进阶1-1期】中详细介绍了,点击查看【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

执行上下文栈

因为JS引擎创建了很多的执行上下文,所以JS引擎创建了执行上下文(Execution context stack,ECS)来管理执行上下文。

当 JavaScript 初始化的时候会向执行上下文栈压入一个全局执行上下文,我们用 globalContext 表示它,并且只有当整个应用程序结束的时候,执行栈才会被清空,所以程序结束之前, 执行栈最底部永远有个 globalContext。

ECStack = [       // 使用数组模拟栈
    globalContext
];

具体执行过程如下图所示,这部分内容在【进阶1-1期】中详细介绍了,点击查看【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

【进阶2期】JavaScript深入之执行上下文栈和变量对象

找不同

有如下两段代码,执行的结果是一样的,但是两段代码究竟有什么不同?

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
    //JS中文网 – 前端进阶资源分享 www.javascriptc.com
}
checkscope();
var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

答案是 执行上下文栈的变化不一样。

第一段代码:

ECStack.push(<checkscopefunctionContext);
ECStack.push(<ffunctionContext);
ECStack.pop();
ECStack.pop();//JS中文网 – 前端进阶资源分享 www.javascriptc.com

第二段代码:

ECStack.push(<checkscopefunctionContext);
ECStack.pop();
ECStack.push(<ffunctionContext);
ECStack.pop();

函数上下文

在函数上下文中,用活动对象(activation object, AO)来表示变量对象。

活动对象和变量对象的区别在于

  • 1、变量对象(VO)是规范上或者是JS引擎上实现的,并不能在JS环境中直接访问。
  • 2、当进入到一个执行上下文后,这个变量对象才会被激活,所以叫活动对象(AO),这时候活动对象上的各种属性才能被访问。

调用函数时,会为其创建一个Arguments对象,并自动初始化局部变量arguments,指代该Arguments对象。所有作为参数传入的值都会成为Arguments对象的数组元素。

执行过程

执行上下文的代码会分成两个阶段进行处理

  • 1、进入执行上下文
  • 2、代码执行
进入执行上下文

很明显,这个时候还没有执行代码

此时的变量对象会包括(如下顺序初始化):

  • 1、函数的所有形参 (only函数上下文):没有实参,属性值设为undefined。
  • 2、函数声明:如果变量对象已经存在相同名称的属性,则完全替换这个属性。
  • 3、变量声明:如果变量名称跟已经声明的形参或函数相同,则变量声明不会干扰已经存在的这类属性。

上代码就直观了

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;
}

foo(1);

对于上面的代码,这个时候的AO是

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,//JS中文网 – 前端进阶资源分享 www.javascriptc.com
    c: reference to function c(){},
    d: undefined
}

形参arguments这时候已经有赋值了,但是变量还是undefined,只是初始化的值

代码执行

这个阶段会顺序执行代码,修改变量对象的值,执行完成后AO如下

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

总结如下:

  • 1、全局上下文的变量对象初始化是全局对象
  • 2、函数上下文的变量对象初始化只包括 Arguments 对象
  • 3、在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
  • 4、在代码执行阶段,会再次修改变量对象的属性值

参考

JavaScript深入之执行上下文栈
JavaScript深入之变量对象

往期目录:

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:【进阶2期】JavaScript深入之执行上下文栈和变量对象

链接:https://www.javascriptc.com/427.html

原文链接:https://github.com/yygmind/blog/issues/13

« 【进阶4期】JavaScript深入之带你走进内存机制
【进阶3期】JavaScript深入之内存空间详细图解»
Flutter 中文教程资源

相关推荐

QR code