JavaScript基础6之执行上下文、作用域链、函数创建、函数激活、checkScope的执行过程、闭包、this

news2024/11/17 13:33:16

JavaScript基础

  • 执行上下文
    • 执行上下文中的属性
      • 变量对象
        • 全局上下文的变量对象
        • 函数上下文
          • 执行过程
            • 进入执行上下文
            • 代码执行
            • 思考题
      • 作用域链
      • 函数创建
      • 函数激活
      • checkScope的执行过程
      • 总结
  • 闭包
    • 分析闭包
  • this

执行上下文

执行上下文中的属性

每一个执行上下文都有三个核心属性

  1. 变量对象(Variable object，VO)
  2. 作用域链(Scope chain)
  3. this

变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

全局上下文的变量对象
  1. 全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。
  2. 在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。
  3. 例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。

简单来讲：

  1. 可以通过 this 引用，在客户端 JavaScript 中，全局对象就是 Window 对象。
console.log(this);
  1. 全局对象是由 Object 构造函数实例化的一个对象。
console.log(this instanceof Object);
  1. 预定义的属性是否可用
console.log(Math.random());
console.log(this.Math.random());
  1. 作为全局变量的宿主
var a = 1;
console.log(this.a);
  1. 客户端 JavaScript 中，全局对象有 window 属性指向自身
var a = 1;
console.log(window.a);

this.window.b = 2;
console.log(this.b);

综上，对JS而言，全局上下文中的变量对象就是全局对象。

函数上下文

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

活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在 JavaScript 环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫 activation object，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

执行过程

执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：

  1. 进入执行上下文；
  2. 代码执行；
进入执行上下文

当进入执行上下文时，这时候还没有执行代码，
变量对象会包括：

  1. 函数的所有形参 (如果是函数上下文)
    （1）由名称和对应值组成的一个变量对象的属性被创建；
    （2）没有实参，属性值设为 undefined；
  2. 函数声明
    （1）由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建；
    （2）如果变量对象已经存在相同名称的属性，则完全替换这个属性；
  3. 变量声明
    （1）由名称和对应值（undefined）组成一个变量对象的属性被创建；
    （2）如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性；
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,
    c: reference to function c(){},
    d: 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. 在代码执行阶段，会再次修改变量对象的属性值；
思考题
  • 示例一
function foo() {
    console.log(a);
    a = 1;
}

foo(); // ???

请添加图片描述

function bar() {
    a = 1;
    console.log(a);
}
bar(); // ???

请添加图片描述
这是因为函数中的 “a” 并没有通过 var 关键字声明，所以不会被存放在 AO 中。
第一段执行 console 的时候， AO 的值是：

AO = {
    arguments: {
        length: 0
    }
}

没有 a 的值，然后就会到全局去找，全局也没有，所以会报错。
当第二段执行 console 的时候，全局对象已经被赋予了 a 属性，这时候就可以从全局找到 a 的值，所以会打印 1。

  • 示例二
console.log(foo);

function foo(){
    console.log("foo");
}

var foo = 1;

请添加图片描述
会打印函数，而不是 undefined 。
这是因为在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。

作用域链

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

函数创建

上文的词法作用域与动态作用域中讲到，函数的作用域在函数定义的时候就决定了。

这是因为函数有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中，你可以理解 [[scope]] 就是所有父变量对象的层级链，但是注意：[[scope]] 并不代表完整的作用域链！

  • 举个例子：
 
function foo() {
    function bar() {
        ...
    }
}

函数创建时，各自的[[scope]]为：


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

bar.[[scope]] = [
    fooContext.AO,
    globalContext.VO
];

函数执行时的[[scope]]为：

foo.[[scope]] = [
  fooContext.AO,
  globalContext.VO
];

bar.[[scope]] = [
	barContext.AO,
    fooContext.AO,
    globalContext.VO
];
  • 示例二：
var scope = "global scope";
function checkscope(){
	var scope2 ='local scope';
	return scope2;
}
checkscope();

函数创建时候：

checkScope.[[scope]]=[
	globalContext.VO
]

函数执行时候：

checkScope.[[scope]]=[
	checkScope.AO,
	globalContext.VO
]

函数激活

当函数激活时，进入函数上下文，创建 VO/AO 后，就会将活动对象添加到作用链的前端。
这时候执行上下文的作用域链，我们命名为 Scope：

Scope = [AO].concat([[Scope]]);

至此，作用域链创建完毕。

checkScope的执行过程

[[scope]]父级作用域链的创建（对应着上述函数创建）->自己作用域链的执行（对应着上述函数执行）->变量对象（AO)的准备->变量对象(AO)执行完后

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

上述这段代码的情况：

第一：

checkScopeContext = {
    Scope: [
        globalContext.VO
    ]
}

第二：

checkScopeContext = {
    Scope: [
    	checkScope.AO,
        globalContext.VO
    ]
}

第三：

checkScopeContext = {
 	AO: {
        arguments: {
            length: 0
        },
        scope2: undefined,
    },
    Scope: [
    	checkScope.AO,
        globalContext.VO
    ]
}

第四：

checkScopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: local scope,
    },
    Scope: [
        checkScope.AO,
        globalContext.VO
    ]
}

总结

结合着之前讲的变量对象和执行上下文栈，我们来总结一下函数执行上下文中作用域链和变量对象的创建过程

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

执行过程如下：

  1. checkscope 函数被创建，保存作用域链到 内部属性[[scope]]
checkscope.[[scope]] = [
    globalContext.VO
];
  1. 执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈
ECStack = [
    checkscopeContext,
    globalContext
];
  1. checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数[[scope]]属性创建作用域链
checkscopeContext = {
    Scope: checkscope.[[scope]],
}
  1. 第二步：用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }，
    Scope: checkscope.[[scope]],
}
  1. 第三步：将活动对象压入 checkscope 作用域链顶端
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}
  1. 准备工作做完，开始执行函数，随着函数的执行，修改 AO 的属性值
checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}
  1. 查找到 scope2 的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出
ECStack = [
  globalContext
];

闭包

  1. 闭包是指那些能够访问自由变量的函数。
  2. 自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。
  3. 闭包由两部分组成，闭包 = 函数 + 函数能够访问的自由变量
var a = 1;

function foo() {
    console.log(a);
}

foo();

foo 函数可以访问变量 a，但是 a 既不是 foo 函数的局部变量，也不是 foo 函数的参数，所以 a 就是自由变量。
从技术的角度讲，所有的JavaScript函数都是闭包。
但是，这是理论上的闭包，其实还有一个实践角度上的闭包。

ECMAScript中，闭包指的是：

  1. 从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域；
  2. 从实践角度：以下函数才算是闭包：
  3. 即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）；
  4. 在代码中引用了自由变量；

分析闭包

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

var foo = checkscope();
foo();
  1. 进入全局代码，创建全局执行上下文，全局执行上下文压入执行上下文栈；
  2. 全局执行上下文初始化；
  3. 执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 执行上下文被压入执行上下文栈；
  4. checkscope 执行上下文初始化，创建变量对象、作用域链、this等；
  5. checkscope 函数执行完毕，checkscope 执行上下文从执行上下文栈中弹出；
  6. 执行 f 函数，创建 f 函数执行上下文，f 执行上下文被压入执行上下文栈；
  7. f 执行上下文初始化，创建变量对象、作用域链、this等；
  8. f 函数执行完毕，f 函数上下文从执行上下文栈中弹出；
globalContext = {
    VO: {
        scope: global scope,
        checkscope: reference to function checkscope,
        foo: 函数执行，
    },
    scope:[globalContext.VO]
}

checkScopeContext = {
    A0: {
        scope: local scope,
        f: reference to f,
    },
    scope: I[
        checkScopeContext.A0,
            globalContext.VO
        ]
}

fContext = {
    AO: {
        arguments:{
            length:0
        }
    },
    scope:[
        fContext.AO,
        checkScopeContext.A0,
        globalContext.VO
        ]
}

于是：
当 f 函数执行的时候，checkscope 函数上下文已经被销毁了啊(即从执行上下文栈中被弹出)，怎么还会读取到 checkscope 作用域下的 scope 值呢？
当我们了解了具体的执行过程后，我们知道 f 执行上下文维护了一个作用域链：

fContext = {
    Scope: [AO, checkscopeContext.AO, globalContext.VO],
}

因为这个作用域链，f 函数依然可以读取到 checkscopeContext.AO 的值，说明当 f 函数引用了 checkscopeContext.AO 中的值的时候，即使 checkscopeContext 被销毁了，但是 JavaScript 依然会让 checkscopeContext.AO 活在内存中，f 函数依然可以通过 f 函数的作用域链找到它，正是因为 JavaScript 做到了这一点，从而实现了闭包这个概念。

所以，让我们再看一遍实践角度上闭包的定义：

  1. 即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）；
  2. 在代码中引用了自由变量；

this

this在没有外力干预的情况下，始终指向调用他的地方

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1506864.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

03-安装配置jenkins

03-安装配置jenkins

一、安装部署jenkins 1，上传软件包 为了方便学习，本次给大家准备了百度云盘的安装包 链接：https://pan.baidu.com/s/1_MKFVBdbdFaCsOTpU27f7g?pwdq3lx 提取码：q3lx [rootjenkins ~]# rz -E [rootjenkins ~]# yum -y localinst…
阅读更多...
Linux学习：权限

Linux学习：权限

目录 1. shell命令的工作原理与存在意义1.1 shell命令解释器存在的意义1.2 shell解释器的工作原理 2. Linux操作系统：用户2.1 什么是用户2.2 用户的切换操作2.3 用户权限划分的意义 3. Linux中权限的种类和意义3.1 什么是权限3.2 sudo指令与短暂提权 4. 文件类型与文…
阅读更多...
03-快速上手RabbitMQ的5种消息模型

03-快速上手RabbitMQ的5种消息模型

RabbitMQ RabbitMQ是基于Erlang语言开发的开源消息通信中间件,有几个常见概念 connections(连接): 将来publisher(消息的发送者)或者consumer(消息的接收者)都需要先与MQ建立连接 channel(通道): 建立连接后需要创建通道,生产者和消费者就是基于通道完成消息的发送和接收 ex…
阅读更多...
网络安全：OpenEuler 部署 jumpserver 堡垒机

网络安全：OpenEuler 部署 jumpserver 堡垒机

目录 一、实验 1.环境 2.OpenEuler 部署 jumpserver 堡垒机 3.OpenEuler 使用 jumpserver 堡垒机（管理Linux） 4.OpenEuler 使用 jumpserver 堡垒机（管理Windows） 二、问题 1.jumpserver 安装报错 一、实验 1.环境 &#x…
阅读更多...
linux paddle For C++环境搭建

linux paddle For C++环境搭建

paddle介绍 Paddle是类似tesseract的文字识别ocr。因为tesseract-ocr的中文识别效果不好。因此才准备安装Paddle。Paddle最方便的安装方式的使用Python的包管理安装。pip3 install paddlepaddle。但我使用了一下感觉还是用C更加方便，QT OpenCV Paddle应当还不错。…
阅读更多...
[Spark SQL]Spark SQL读取Kudu，写入Hive

[Spark SQL]Spark SQL读取Kudu，写入Hive

SparkUnit Function：用于获取Spark Session package com.example.unitlimport org.apache.spark.sql.SparkSessionobject SparkUnit {def getLocal(appName: String): SparkSession {SparkSession.builder().appName(appName).master("local[*]").getO…
阅读更多...
1.下载安装ESP32开发环境ESP-IDE

1.下载安装ESP32开发环境ESP-IDE

ESP32简介 ESP32介绍 说到ESP32，首先ESP32不是一个芯片，ESP32是一个系列芯片， 是乐鑫自主研发的一系列芯片微控制器。它主要的功能就是支持WiFi和蓝牙， ESP32指的是ESP32裸芯片。但是，“ESP32”一词通常指ESP32系列芯…
阅读更多...
python基础练习 特殊回文数

python基础练习 特殊回文数

资源限制 内存限制：512.0MB C/C时间限制：1.0s Java时间限制：3.0s Python时间限制：5.0s 问题描述 123321是一个非常特殊的数，它从左边读和从右边读是一样的。 　　输入一个正整数n， 编程求所有这样的…
阅读更多...
RocketMQ、Kafka、RabbitMQ 消费原理，顺序消费问题【图文理解】

RocketMQ、Kafka、RabbitMQ 消费原理，顺序消费问题【图文理解】

B站视频地址 文章目录 一、开始二、结果1、RocketMQ 消费关系图1-1、queue和consumer的关系1-2、consumer 和线程的关系 2、Kafka 消费关系图1-1、partitions和consumer的关系1-2、consumer 和线程的关系 3、RabbitMQ 消费关系图1-1、queue和consumer的关系1-2、consumer 和线程…
阅读更多...
Python+Django+Html网页前后端指纹信息识别

Python+Django+Html网页前后端指纹信息识别

程序示例精选 PythonDjangoHtml网页前后端指纹信息识别 如需安装运行环境或远程调试，见文章底部个人QQ名片，由专业技术人员远程协助！ 前言 这篇博客针对《PythonDjangoHtml网页前后端指纹信息识别》编写代码，代码整洁&#xff0…
阅读更多...
深入理解Java多线程与线程池：提升程序性能的利器

深入理解Java多线程与线程池：提升程序性能的利器

✨✨谢谢大家捧场，祝屏幕前的小伙伴们每天都有好运相伴左右，一定要天天开心哦！✨✨ 🎈🎈作者主页： 喔的嘛呀🎈🎈 目录 引言 一、实现多线程 1.1. 继承Thread类 1.2. 实现Runnab…
阅读更多...
WPF（1）的MVVM的数据驱动学习示例

WPF（1）的MVVM的数据驱动学习示例

MVVM Model:数据模型、View 界面、ViewModel 业务逻辑处理 项目结构 界面数据绑定 <Window x:Class"WpfApp1.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/x…
阅读更多...
opencv人脸识别实战3：多线程和GUI界面设计（PyCharm实现）

opencv人脸识别实战3：多线程和GUI界面设计（PyCharm实现）

一、多线程设计 1、在一个新线程中调用了 scan_face() 函数来进行人脸识别操作。根据识别结果&#xff0c;更新界面显示结果&#xff0c;最后释放资源。 def f_scan_face_thread():var.set(刷脸)ans scan_face()if ans 0:print("最终结果&#xff1a;无法识别")va…
阅读更多...
C++ 中的头文件和源文件

C++ 中的头文件和源文件

#include<>一般用于包含系统头文件&#xff0c;诸如stdlib.h、stdio.h、iostream等&#xff1b; 类库目录下查找失败&#xff0c;编译器会终止查找&#xff0c;直接报错&#xff1a;No such file or directory. #include""一般用于包含自定义头文件&#xff…
阅读更多...
NLP 算法实战项目：使用 BERT 进行模型微调，进行文本情感分析

NLP 算法实战项目：使用 BERT 进行模型微调，进行文本情感分析

本篇我们使用公开的微博数据集(weibo_senti_100k)进行训练&#xff0c;此数据集已经进行标注&#xff0c;0: 负面情绪&#xff0c;1:正面情绪。数据集共计82718条(包含标题)。如下图&#xff1a; 下面我们使用bert-base-chinese预训练模型进行微调并进行测试。 技术交流&#x…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Gauge）

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Gauge）

数据量规图表组件&#xff0c;用于将数据展示为环形图表。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含单个子组件。 说明&#xff1a; 建议使用文本组件构建当前数值文本和辅…
阅读更多...
信息系统项目管理师005：工业互联网（1信息化发展—1.2现代化基础设施—1.2.2工业互联网）

信息系统项目管理师005：工业互联网（1信息化发展—1.2现代化基础设施—1.2.2工业互联网）

文章目录 1.2.2 工业互联网1.内涵和外延2.平台体系3.融合应用 记忆要点总结 1.2.2 工业互联网 工业互联网(Industrial Internet)是新一代信息通信技术与工业经济深度融合的新型基础设施、应用模式和工业生态&#xff0c;通过对人、机、物、系统等的全面连接&#xff0c;构建起覆…
阅读更多...
【EDK II】作为UEFI的实现，EDK II 的架构是什么样的

【EDK II】作为UEFI的实现，EDK II 的架构是什么样的

目录 前言 EDK II 架构 配置文件 结语 前言 基本输入输出系统 (Basic Input Output System, BIOS) 最早由 IBM&#xff08;International Business Machines Corporation) 公司于1981年提出并开发&#xff0c;后来成为个人计算机(PC)的标准固件接口。但受限于传统BIOS (Le…
阅读更多...
Git分支管理（IDEA）

Git分支管理（IDEA）

文章目录 Git分支管理&#xff08;IDEA&#xff09;1.Git分支管理&#xff08;IDEA&#xff09;1.基本介绍1.分支理解2.示意图 2.搭建分支和合并的环境1.创建Gitee仓库2.创建普通maven项目3.克隆Gitee项目到E:\GiteeRepository4.复制erp文件夹下的内容到IDEA项目下5.IDEA项目中…
阅读更多...
Kafka的分区机制

Kafka的分区机制

Kafka的分区机制是其核心功能之一&#xff0c;旨在提高可扩展性和并行处理能力。下面概述了Kafka分区的基本概念和工作原理&#xff1a; Kafka分区基本概念 分区&#xff08;Partition&#xff09;&#xff1a;Kafka中的主题&#xff08;Topic&#xff09;可以细分为多个分区…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023