变量对象和执行环境的理解

everfly 发布于2019-08-20 16:12 / 1853人阅读

摘要：正文执行环境的理解执行环境或者执行上下文后面简称定义了变量或者函数有权访问的其他数据，决定了他们各自的行为。最后全局环境的变量对象总结活动对象和变量对象是执行环境在不同生命期的不同叫法。未进入执行阶段之前，变量对象中的属性都不能访问。

背景

夯实基础才是进步的根源，基础不牢地动山摇！！于是乎，结合《javascript高级程序设计》来点基础的学习和理解。本文主要会有两部分。rt！！

正文

1、执行环境的理解

执行环境（或者执行上下文）（execution context 后面简称ec）定义了变量或者函数有权访问的其他数据，决定了他们各自的行为。如果不好理解的话，接着看后面。

全局执行环境是最外围的一个执行环境，在web浏览器中，全局执行环境被默认为是指window对象。因此所有的全局变量和函数都是作为window对象的属性和方法创建的。全局执行环境直到应用程序推出才会被销毁（例如关闭网页或者浏览器的时候）。

每个函数都有自己的执行环境。当执行流进入一个函数的时候，函数的环境就会被推入一个环境栈中，而在函数执行之后，栈将其环境弹出。把控制权返回给之前的执行环境了。

执行环境一般分为全局执行环境和函数执行环境。

这个时候应该上代码了(高程上的代码)

var color = "blue";

function changeColor() {
    var anotherColor = "red";

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

来看看流程吧：

全局环境入栈

全局环境入栈之后，其中的可执行代码开始执行，直到遇到了changeColor()，这一句激活函数changeColor创建它自己的执行上下文，因此第二步就是changeColor的执行上下文入栈。

changeColor的环境入栈之后，js执行引擎开始执行其中的可执行代码，遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。

在swapColors的可执行代码中，再没有遇到其他能生成执行环境的情况，所以在swapColors顺利执行完毕后，swapColors的环境从栈中弹出

swapColors环境弹出后继续changeColor的执行，发现没有可以执行的了。然后就弹出。

最后只剩下全局环境了。这个是要只有关闭当前网页或者浏览器就能销毁该环境。

总结

所有变量都存在于一个执行环境中。

全局环境只能访问全局环境中的变量和函数，不能访问局部环境中的任何数据。

执行环境有全局执行环境和函数执行环境之分。

js单线程，是同步执行的，只有栈顶的环境处于执行中，其他环境需要等待。

2、变量对象的理解

上面我们讲到了执行环境，环境中的变量和函数都是保存在什么地方的呢？

好了，不卖关子了。每个执行环境都有一个与该环境相关联的变量对象（variable object）。环境中定义的所有变量和函数都是保存在这个对象中的。虽然我们编写的代码没有办法直接访问这个对象，但是js解析器在处理数据的时候会使用它。

执行环境的生命周期：

变量对象的创建

上面就是变量对象的一个创建过程，这个过程的解释：

建立arguments对象。检查当前上下文中的参数，建立该对象下的属性与属性值。

检查当前上下文的函数声明，也就是使用function关键字声明的函数。在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。

检查当前上下文中的变量声明，每找到一个变量声明，就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。

上面的代码解释：

function test(c, d) {
    console.log(d);
    console.log(a);
    console.log(bar());
    console.log(c);
    
    var a = 1;
    function bar() {
        return 2;
    }
}

test(3,4);


//创建过程  EC = execution context
testEC = {
    // 变量对象
    VO: {},
    // 作用于链
    scopeChain: {},
    // 确定this指向
    this: {}
}

// VO = Variable Object，即变量对象
VO = {
    arguments: {
        c: undefined,
        d: undefined
    },  //注：在浏览器的展示中，函数的参数可能并不是放在arguments对象中，这里为了方便理解，我做了这样的处理
    bar:   // 表示foo的地址引用
    a: undefined
}

// 执行阶段
VO ->  AO   // Active Object
AO = {
    arguments: {
        c: 3,
        d: 4
    },
    bar: ,
    a: 1
}


// 实际执行
function test(c, d) {
    // arguments = { c : 3, d : 4 }; // 这样理解方便点，理解arguments对象
    function foo() {
        return 2;
    }
    var a;
    console.log(a);
    console.log(foo());
    a = 1;
}

test(3, 4);

就是在执行环境在创建阶段的时候所有的变量是不能被访问的，只有在执行阶段的时候才能被访问，因为此时的变量对象被转换成了活动对象。

// 执行阶段
VO ->  AO   // Active Object
AO = {
    arguments: {...},
    foo: ,
    a: 1
}

说到底变量对象和活动对象本质上是一样的，只是处于执行环境的不同生命期。

最后全局环境的变量对象

windowEC = {
    VO: window,
    scopeChain: {},
    this: window
}

总结：

活动对象和变量对象是执行环境在不同生命期的不同叫法。

function声明会比var声明优先级更高一点。

未进入执行阶段之前，变量对象中的属性都不能访问。

感谢

《javascript高级程序设计》
知乎上面的答案
波同学变量对象详解

海外云主机服务器托管环境变量的配置云计算和大数据的理解控制php的环境变量服务器需要的环境变量

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82789.html

还是不明白JavaScript - 执行环境、作用域、作用域链、闭包吗？

摘要：所以，全局执行环境的变量对象始终都是作用域链中的最后一个对象。讲到这里，可能你已经对执行环境执行环境对象变量对象作用域作用域链的理解已经他们之间的关系有了一个较清晰的认识。 JavaScript中的执行环境、作用域、作用域链、闭包一直是一个非常有意思的话题，很多博主和大神都分享过相关的文章。这些知识点不仅比较抽象，不易理解，更重要的是与这些知识点相关的问题在面试中高频出现。之前我也看过...

jlanglang 2019-08-23 16:32 评论0 收藏0
javascript引擎执行的过程的理解--语法分析和预编译阶段

摘要：所以觉得把这个执行的详细过程整理一下，帮助更好的理解。类似的语法报错的如下图所示三预编译阶段代码块通过语法分析阶段之后，语法都正确的下回进入预编译阶段。另开出新文章详细分析，主要介绍执行阶段中的同步任务执行和异步任务执行机制事件循环。一、概述 js是一种非常灵活的语言，理解js引擎的执行过程对于我们学习js是非常有必要的。看了很多这方便文章，大多数是讲的是事件循环（event loo...

molyzzx 2019-08-23 14:35 评论0 收藏0
javascript系列--javascript引擎执行的过程的理解--语法分析和预编译阶段

摘要：所以觉得把这个执行的详细过程整理一下，帮助更好的理解。类似的语法报错的如下图所示三预编译阶段代码块通过语法分析阶段之后，语法都正确的下回进入预编译阶段。另开出新文章详细分析，主要介绍执行阶段中的同步任务执行和异步任务执行机制事件循环。一、概述 js是一种非常灵活的语言，理解js引擎的执行过程对于我们学习js是非常有必要的。看了很多这方便文章，大多数是讲的是事件循环（event loo...

malakashi 2019-08-26 13:52 评论0 收藏0
形象化模拟作用域链，深入理解js作用域、闭包

摘要：至此作用域链创建完毕。好了，通过深入理解作用域链，我们能跟好的理解的运行机制和闭包的原理。前言理解javascript中的作用域和作用域链对我们理解js这们语言。这次想深入的聊下关于js执行的内部机制，主要讨论下，作用域，作用域链，闭包的概念。为了更好的理解这些东西，我模拟了当一个函数执行时，js引擎做了哪些事情--那些我们看不见的动作。关键词：执行环境作用域作用域链变...

txgcwm 2019-08-21 17:48 评论0 收藏0
javascript中执行环境及作用域的理解

摘要：作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。这样，一直延续到全局执行环境全局执行环境的变量对象始终都是作用域链中的最后一个对象。标识符解析是沿着作用域链一级一级地搜索标识符的过程。执行环境（execution context,为简单起见，有时也成为环境）是javascript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自...

BearyChat 2019-08-21 10:18 评论0 收藏0