JS执行上下文的两个阶段做了些啥

48次阅读

共计 4842 个字符,预计需要花费 13 分钟才能阅读完成。

作者:DEEPAK GUPTA
译者:前端小智
来源:overflowjs.com

点赞再看,养成习惯

本文 GitHub https://github.com/qq44924588… 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎 Star 和完善,大家面试可以参照考点复习,希望我们一起有点东西。

在咱们开始之前,有个问题大家可以一起讨论: JS 是解释语言还是编译语言?

(JS)是一种解释语言,有自己的编译器形式,运行在 JS 引擎中。

每个 web 浏览器都有自己的 JS 引擎形式,尽管目的一样。Chrome 有 v8, Mozilla 有 spider monkey 等,JS 引擎只是将 JS 源代码转换成编译器能够理解的语言,然后执行它。

执行上下文

JS 代码运行的环境构成了执行上下文,执行上下文决定哪段代码可以访问变量、函数、对象等。

1. 全局执行上下文

任何时候码第一次运行,或者当代码不在任何函数中时,它都会进入全局执行上下文。在整个代码执行过程中只有一个全局执行上下文。

对于浏览器全局执行上下文,它做两件事:

  1. 创建 window 对象。
  2. this 指向了 windw 对象 (非严格模式)

2. 函数执行上下文

当函数执行时,它就创建一个新的函数执行上下文,可以有任意数量的函数执行上下文。

执行堆栈 / 调用堆栈

浏览器中 JS 解器是单线程,同一时间只能干一件事。代码中有一个全局的执行上下文和无数个函数执行上下文,那么他们是按什么顺序执行的呢?

这里就需要一个 执行上下文栈 的概念了,JS 引擎是通过创建执行上下文栈来管理执行上下文的。 这里可以把执行上下文栈描述为一个存着函数调用的栈结构,执行顺序遵循先进后出的原则, 也就是说一个函数的执行上下文,在函数执行完毕之后,会被移除执行上下文栈。

每当脚本在浏览器中加载时,堆栈中的第一个元素就是全局执行上下文。然而,当一个函数执行时,将创建一个执行上下文,并将其虚拟的放置在全局执行上下文之上。函数一旦执行完毕,就会从执行堆栈中弹出并将控制权交给到它下面的上下文中。

咱们举个例子,来模拟上述的过程:

步骤 1 : 当上述代码加载到浏览器中时,JS 引擎创建一个 全局执行上下文 (global execution context) 并将其推入当前执行堆栈。

步骤 2 : 假设最后执行 func1() 调用,然后 JS 引擎为该函数创建一个 新的执行上下文(function execution context),并将其推到全局执行上下文的顶部。

步骤 3 : 在 func1() 中,咱们调用了 func2(),因此 JS 引擎为该函数创建一个新的执行上下文,并将其推到func1() 执行上下文的顶部。

步骤 4 : 当 func2() 函数结束时,它的执行上下文从当前堆栈中弹出,控制权交给它下面的执行上下文,即 func1() 函数的执行上下文。

步骤 5 : 当 func1() 函数结束时,它的执行堆栈将从堆栈中删除,控制权交给 全局执行上下文。执行完所有代码后,JS 引擎将从当前堆栈中删除全局执行上下文。

执行上下文阶段

执行上下文主要有两个阶段。

  1. 创建
  2. 执行

创建阶段

函数创建时做的三件事:

1. 首先,为用域链内的每个函数或变量构建到外部环境的连接。告诉执行上下文它应该包含什么,以及它应该在哪里查找解析函数引用和变量值的方法。

  • 对于全局环境,外部环境为 null。然而, 全局环境 内的所有环境都是以全局环境作为其外部环境的。
  • 例如: 如果函数 a 包含在函数 b 中,这意味着 a 有一个外部环境b

2. 接着,通过扫描作用链,创建一个环境记录,其中全局上下文的创建和引用(web 浏览器中的window)、变量、函数和函数参数都在内存中完成。

3. 最后,在第一步中创建的每个执行上下文中确定 this 的值 (对于全局执行上下文,this 指向的是window)。

因此,咱们可以将创建阶段表示为

创建阶段 = {
  scopeChain: {/* 作用域链解析 */},    
  variableObject: {/* arguments, 函数参数, 内部变量 等等 */},
  this: {},}

variableObject: 初始化函数的参数variableObject, 提升函数声明和变量声明。

scopeChain: 在执行上下文的创建阶段,作用域会在变量对象创建之后创建。作用域链本身包括变量对象。作用域负责解析变量,当被要求解析变量的时候,会从代码嵌套结构的最内层开始,如果在最内层没有找到对应变量,则依次向父级作用域中进行查找,直到寻找到最外层作用域。

this: 确定 this 的指向,这里需要注意的事 this 的值是在执行的时候确定的,在定义的时候并不会确定。

执行阶段

这是代码开始在创建阶段形成的执行上下文中运行的阶段,并逐行分配变量值。

在执行开始时,JS 引擎在其创建阶段对象中寻找执行函数的引用。如果不能在自己的作用域内找到它,它将继续向上查找,直到到达全局环境。

如果在全局环境中没有找到引用,它将返回一个错误。但是,如果找到了一个引用,并且函数执行正确,那么这个特定函数的执行上下文将从堆栈中弹出,JS 引擎将移动到下一个函数,在那里,它们的执行上下文将被添加到堆栈中并执行,依此类推。

咱们通过示例查看上面的两个阶段,以便更好地理解它。

在创建阶段,全局执行上下文类似于这样

globalExecutionObj = {
    outerEnvironmentConnection: null,
    variableObjectMapping: {
        name: uninitialized,
        title: undefined,
        date: uninitialized,
        func1: func,
    },
    this: window //Global Object
}

注意:上面,let (name)const (date) 定义的变量在创建阶段没有任何关联的值,但是 var (title) 定义的变量会被设置为undefined

这就是为什么咱们可以在声明 var 定义的变量之前访问它们 (虽然没有定义),但是在声明letconst变量之前访问它们时,会得到一个引用错误。

这就是咱们所说的 变量提升 ,即所有使用var 的变量声明都被提升它们的局部作用域 (在函数内部声明) 或者全局作用域的顶部(在函数外部声明的)。

在执行阶段,完成变量分配。所以全局执行上下文在执行阶段类似如下:

globalExectutionObj = {
    outerEnvironmentConnection: null,
    variableObjectMapping: {
        name: "overflowjs.com",
        title: "Execution context",
        date: "5 july 2019",
        func1: pointer to function func1,
    },
    this: window //Global Object
}

注意:在执行阶段,如果 JS 引擎在源代码中声明位置找不到 let 变量的值,那么它将为其赋值undefined

现在,当 func1 执行,就会生成一个新的函数执行上下文,其创建阶段类似如下:

func1ExecutionObj = {
    outerEnvironmentConnection: Global,
    variableObjectMapping: {
       arguments: {
            0: 10,
            length: 1
        },
        num: 10,

        author: undefined,
        val: uninitialized,
        func2: undefined
        fixed: uninitialized
        addFive: pointer to function addFive()},
    this: Global Object or undefined
}

在执行阶段类似如下:

func1ExecutionObj = {
    outerEnvironmentConnection: Global,
    variableObjectMapping: {
       arguments: {
            0: 10,
            length: 1
        },
        num: 10,

        author: "Deepak",
        val: 3,
        func2: pointer to function func2() 
        fixed: "Divine"
        addFive: pointer to function addFive()},
    this: Global Object or undefined
}

函数执行完成后,将更新全局环境。然后全局代码完成,程序结束。

作用域与作用域链

1. 作用域

JavaScript 中的作用域分为三种:

  1. 全局作用域
  2. 函数作用域
  3. 块级作用域(ES6)

作用域最大的作用就是隔离变量或函数,并控制他们的生命周期。作用域是在函数执行上下文创建的时候定义好的,不是在函数执行的时候定义的。

2. 什么是作用域链

当一个块或者函数嵌套在另一个块或函数中时,就发生了作用域的嵌套。在当前函数中如果 JS 引擎无法找到某个变量,就会往上级嵌套的作用域中去寻找,直到找到该变量或抵达全局作用域,这样的链式关系成为作用域链(Scope Chain)。

来个例子演示一下:

var scope = 'global';

function checkscope(s) {
    var scope = 'local scope';
    
    function f() {return scope;}
    
    return f();}

checkScope('scope');

首先在 checkscope 函数声明的时候,内部会绑定一个 [[scope]] 的内部属性:

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

接着在 checkScope 函数在执行之前,创建执行上下文checkscopeContext, 并推入执行上下文栈:

  • 赋值函数的 [[scope]] 属性初始化作用链
  • 创建变量对象
  • 将变量对象压入作用域链的顶端
// -> 初始化作用域链;checkscopeContext = {scope: [globalContext.VO],
}

// -> 创建变量对象
checkscopeContext = {scope: [globalContext.VO],
  VO = {
    arguments: {
      0: 'scope',
      length: 1,
    },
    s: 'scope', // 传入的参数
    f: function f(),
    scope: undefined, // 此时声明的变量为 undefined
  },
}

// -> 将变量对象压入作用域链的最顶端
checkscopeContext = {scope: [VO, globalContext.VO],
  VO = {
    arguments: {
      0: 'scope',
      length: 1,
    },
    s: 'scope', // 传入的参数
    f: function f(),
    scope: undefined, // 此时声明的变量为 undefined
  },
}

执行阶段,修改变量对象里面对应字段的值:

checkscopeContext = {scope: [VO, globalContext.VO],
  VO = {
    arguments: {
      0: 'scope',
      length: 1,
    },
    s: 'scope', // 传入的参数
    f: pointer to function f(),
    scope: 'local scope', // 变量赋值
  }
}

在代码执行阶段,会看到 f 函数的声明代码,给 f 函数绑定 [[scope]] 属性:

f.[[scope]] = [
  checkscopeContext.VO, // f 函数的作用域还包括 checkscope 的变量对象
  globalContext.VO
];

文本到这就结束了,希望对大伙有所帮助。

原文:https://overflowjs.com/posts/…

代码部署后可能存在的 BUG 没法实时知道,事后为了解决这些 BUG,花了大量的时间进行 log 调试,这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug。

交流

文章每周持续更新,可以微信搜索「大迁世界」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎 Star 和完善,大家面试可以参照考点复习,另外关注公众号,后台回复 福利,即可看到福利,你懂的。

正文完
 0