JS入门难点解析8-作用域,作用域链,执行上下文,执行上下文栈等分析

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 简介

JS入门难点系列到此,我们将进行一个阶段性的总结。将前面所学的有关作用域,LHS,RHS,执行上下文栈,执行上下文,变量对象,作用域链,this等知识点串联起来,使大家有一个更新清晰的认识。

2. 概念回顾

  1. 作用域:其实是一种规则与概念,我们并不能直接访问他,是用来帮我们区分变量是在哪里定义的。作用域有三种(ES6之前):全局作用域,局部(函数)作用域,eval作用域。ES6之后又多了一个块级作用域。比如,我们经常会这么说,在全局作用域定义了一个变量a,在当前函数作用域定义了一个变量a。虽然是a,但你可以分辨这其实是两个a,因为其所处的作用域不同。
  2. 作用域链:很容易与作用域弄混。作用域链其实是在进入执行上下文以后创建的。是由当前的活动对象和当前函数的[[scope]]属性拼接而成。如果在全局执行上下文,则当前作用域链仅有全局变量对象。要记住,全局变量对象始终在作用域链的顶端。而在代码执行时,对变量的查找,不管是LHS,还是RHS,都是从当前作用域开始,顺着作用域链向前查找。
  3. LHS,RHS:引擎的查询方式有两种,即LHS和RHS。代码中出现变量时,如果目的是要进行存储,也就是我们关心的是要找到变量的容器本身,来进行不同数据的存储赋值操作,而不关心现在这个容器里面存的是什么,就会用到LHS。而如果我们的目的只是拿这个变量来用,也就是只关心这个变量存储的内容是啥,而不需要关心这个变量存在哪个容器,那么就会用到RHS。
  4. 执行上下文:JavaScript 的可执行代码(executable code)有以下三类:全局代码、函数代码、eval代码。当JS引擎遇到这三类代码时,会开始做准备工作,创建一个“执行上下文(execution context)"。执行上下文的生命周期有两个阶段:准备阶段和代码执行阶段。在准备阶段,会做三件事,即用arguments创建当前执行上下文的活动对象,确定当前执行上下文的作用域链,和绑定当前执行上下文的this属性。
  5. 执行上下文栈:当JS执行到一个函数的时候,就会创建该函数的“执行上下文(execution context)"。JS代码中可能出现为数众多的函数,所以JavaScript 引擎创建了执行上下文栈(Execution context stack,ECS)来管理执行上下文。
  6. 变量对象:变量对象是与执行上下文相关的数据作用域,存储了在执行上下文中定义的变量和函数声明。全局上下文中的变量对象就是全局对象。在函数上下文中,我们用活动对象(activation object, AO)来表示变量对象。活动对象是在进入函数上下文时刻被创建的,它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。
  7. this:this 提供了一种更优雅的方式来隐式“传递”一个对象引用,因此可以将 API 设计得更加简洁并且易于复用。this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。

3.关键点划分

这么多的概念,在JS编译执行过程中,很容易让大家绕晕。但其实,只要把握住整个JS编译执行的关键点,一切困难都会迎刃而解。那么这个关键点是什么呢?其实就是函数执行

我们来看,只有在执行到一个函数时,才会创建函数执行上下文并压入函数执行上下文栈,不管在当前执行上下文的准备阶段或者是在执行该函数前做了哪些操作,我们只需要关心函数执行那一刻的快照,包括此时该函数的[[scope]]属性值,此时函数执行上下文栈,此时传入的arguments,此时函数的调用方式。然后进入该函数上下文,函数上下文会根据arguments来初始化活动对象AO,通过AO+[[scope]]来确定作用域链,并通过调用方式确定this绑定。然后进入函数执行上下文的代码执行阶段,直到遇见下一个函数执行,周而复始或者执行完毕还没有遇到下一个函数执行,执行完毕的函数上下文就会逐个出栈并销毁,直到程序关闭,全局执行环境销毁。

4. 流程分析

我们以下面这段代码为例来进行分析:

var scope = "global scope";

function checkscope() {
    var scope = "local scope";

    function f() {
        return scope;
    }

    return f();
}

checkscope();

现在我们尝试用之前所学走一遍代码的编译执行流程:

  1. 执行全局代码,创建全局执行上下文,全局上下文被压入执行上下文栈。
ECStack = [
    globalContext
];
  1. 全局上下文初始化。(初始化全局环境的VO,确定全局环境的Scope,绑定全局环境的this。)当然,在此阶段,完成了全局作用域的变量声明和函数声明,并且进行了全局作用域的变量提升和函数提升。
globalContext = {
    VO: {
        global: window,
        scope: undefined,
        checkscope: reference to function checkscope
    },
    Scope: [globalContext.VO],
    this: globalContext.VO
}
  1. checkScope函数执行前阶段。初始化的同时,checkscope 函数被创建,保存全局环境的作用域链到函数checkscope的内部属性[[scope]]。(checkScope在此处是使用函数声明,所以猜测其[[scope]]属性是在全局环境初始化阶段,但如果此时使用变量赋值“var checkscope = function (){...}”这种写法,那么此时checkScope属性的写入是在全局环境的执行阶段)。但是[[scope]]属性的创建和写入时机其实并不是重点,我们说了重点是对关键点的划分。就是checkscope函数执行那一刻,[[scope]]属性是一定已经创建并写入了全局执行环境的作用域链即可。并且执行了其他代码。
checkscope.[[scope]] = [
    globalContext.VO
];
globalContext = {
    VO: {
        global: window,
        scope: "global scope",
        checkscope: reference to function checkscope
    },
    Scope: [globalContext.VO],
    this: globalContext.VO
}
  1. 执行 checkscope 函数,创建 checkscope 函数执行上下文,checkscope 函数执行上下文被压入执行上下文栈.
ECStack = [
    checkscopeContext,
    globalContext
];
  1. checkscope 函数执行环境初始化(用 arguments 创建活动对象checkscopeContext.AO,利用活动对象checkscopeContext.AO与checkscope.[[scope]]形成checkscope 函数执行环境的作用域链checkscopeContext.Scope。绑定this到undefined(非严格模式下会绑定到全局对象)。在此阶段,进行了加入形参、函数声明、变量声明,函数提升,变量提升等操作。
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope: undefined,
        f: reference to function f(){}
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}
  1. checkscope 函数执行环境初始化的同时,或者准确说,f函数执行之前,f函数的[[scope]]属性创建并写入。并且f函数执行前的的其他代码也会执行。
f.[[scope]] = [
    checkscopeContext.AO,
    globalContext.VO
];
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope: "local scope",
        f: reference to function f(){}
    },
    Scope: [AO, globalContext.VO],
    this: undefined
}
  1. 执行f函数,创建 f 函数执行上下文,f 函数执行上下文被压入执行上下文栈。
ECStack = [
    fContext,
    checkscopeContext,
    globalContext
];
  1. f 函数执行环境初始化(参考第5步)。
fContext = {
    AO: {
        arguments: {
            length: 0
        }
    },
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
    this: undefined
}
  1. f函数中代码执行。需要对scope进行RHS查找。查找从当前作用域开始沿着作用域链向上。(或者说从作用域链中的当前活动对象开始沿着作用域链向上查找)。记住,这里是两种说法,但是作用域与活动对象并不等同。
// 查找过程:
1. fContext.AO.scope 没有该变量声明(即该变量不在当前作用域,记住不是为undefined,因为该变量可能存在,但是值为undefined),继续
2. checkscopeContext.AO.scope 有该变量声明,获取其值为"local scope"
  1. f 函数执行完毕,返回"local scope"。f 函数上下文从执行上下文栈中弹出。
ECStack = [
    checkscopeContext,
    globalContext
];
  1. checkscope 函数在执行完f处获取f执行的返回值"local scope",函数继续向下执行。
  2. checkScope执行完毕,返回获取到的返回值"local scope"。checkScope 函数上下文从执行上下文栈中弹出。
ECStack = [
    globalContext
];
  1. 代码执行流回到全局执行环境中调用checoscope处,拿到checkScope返回值并继续向下执行。
  2. 直到程序终止,或者页面关闭。全局上下文出栈并销毁。

参考

JS入门难点解析3-作用域 JS入门难点解析4-执行上下文栈 JS入门难点解析5-变量对象 JS入门难点解析6-作用域链 JS入门难点解析7-this 一道js面试题引发的思考 JavaScript深入之执行上下文 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域 前端基础进阶(二):执行上下文详细图解 Javascript变量的作用域和作用域链详解 JavaScript关于作用域、作用域链和闭包的理解 理解js中的作用域,作用域链以及初探闭包

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏swag code

Java中的private、protected、public和default的区别(详解)

(1)对于public修饰符,它具有最大的访问权限,可以访问任何一个在CLASSPATH下的类、接口、异常等。它往往用于对外的情况,也就是对象或类对外的一种接口...

9030
来自专栏Redis源码学习系列

Redis源码学习之对象系统

在前面的文章中,我介绍了Redis的底层数据结构,但Redis对外提供的命令并没有直接使用它们,而是基于它们构建更高级的数据对象,总共包括5中对象类型,分别为【...

14830
来自专栏Java帮帮-微信公众号-技术文章全总结

Java面试系列2

六、&和&&的区别? &是位运算符,表示按位与运算,&&是逻辑运算符,表示逻辑与(and) 七、swtich是否能作用在byte上,是否能作用在long上,是否...

30060
来自专栏SDNLAB

Open vSwitch系列之数据结构解析深入分析Hmap

作为Open vSwitch系列的第一篇文章,选择分析哪个数据结构我思考很久,最后还是选择比较常见而且很基础的结构hmap。 在Open vSwitch世界中很...

37440
来自专栏向治洪

Android热补丁技术—dexposed原理简析(手机淘宝采用方案)

上篇文章《Android无线开发的几种常用技术》我们介绍了几种android移动应用开发中的常用技术,其中的热补丁正在被越来越多的开发团队所使用,它涉及到da...

28660
来自专栏Java面试通关手册

可能是把Java内存区域讲的最清楚的一篇文章

哈哈 皮一下!我自己开源的一个Java学习指南文档。一份涵盖大部分Java程序员所需要掌握的核心知识,正在一步一步慢慢完善,期待您的参与。Github地址:ht...

10520
来自专栏听Allen瞎扯淡

一起 Static 和 Synchronized 引发的血案

这两天在定位一个网上问题的时候发现一个很诡异的现象,系统夜间的汇总任务跑了很长一段时间才能结束,而且日志显示这些汇总任务的每个子任务都很快就结束了,但整体任务还...

70620
来自专栏游戏开发那些事

【游戏开发】小白学Lua——从Lua查找表元素的过程看元表、元方法

在上篇博客中,我们简单地学习了一下Lua的基本语法。其实在Lua中有一个还有一个叫元表的概念,不得不着重地探讨一下。元表在实际地开发中,也是会被极大程度地所使用...

18530
来自专栏高性能服务器开发

Redis应用总结

首先, 我带大家简单的了解一下Redis Redis常用数据类型(最为常用的数据类型主要有以下五种) ●String ●Hash ●List ●Set ●Sor...

35770
来自专栏我的博客

php使用elasticsearch

1.引入包 composer require elasticsearch/elasticsearch 2.DEMO参考 <?php require_once ...

45170

扫码关注云+社区

领取腾讯云代金券