前端JavaScript篇之对执行上下文的理解

目录

  • 对执行上下文的理解
    • 创建执行上下文


对执行上下文的理解

当我们在执行JavaScript代码时,JavaScript引擎会创建并维护一个执行上下文栈来管理执行上下文。执行上下文有三种类型:全局执行上下文、函数执行上下文和eval函数执行上下文。

在写代码的时候,我们首先会定义全局变量,这些变量会被放在全局执行上下文中。全局执行上下文在代码执行之前就已经存在,并且是整个程序的起点。在全局执行上下文中,JavaScript引擎会创建一个全局对象(通常是window对象)作为变量对象,同时将this指向该全局对象。举个例子:

var globalVariable = 'I am a global variable'function globalFunction() {console.log('I am a global function')
}console.log(globalVariable) // 输出:I am a global variable
globalFunction() // 输出:I am a global function

请添加图片描述

在这个例子中,变量globalVariable和函数globalFunction被定义在全局上下文中。我们可以在全局上下文中直接访问和使用它们。

当我们调用一个函数时,会创建一个新的函数执行上下文。函数执行上下文与全局执行上下文类似,但有一些差异。函数执行上下文除了包含变量对象和this指向,还包括函数的参数和内部声明的变量和函数。举个例子:

function outer() {var outerVariable = 'I am an outer variable'function inner() {var innerVariable = 'I am an inner variable'console.log(outerVariable) // 可以访问外部函数的变量console.log(innerVariable) // 可以访问自己的变量}inner()
}outer()

请添加图片描述

在这个例子中,outer函数内部定义了一个变量outerVariable,并声明了一个内部函数inner。当我们调用outer函数时,会创建outer函数的执行上下文。其中的变量outerVariable和函数inner都属于该执行上下文。在inner函数中,我们可以通过作用域链访问到它们。

需要注意的是,每个函数调用都会创建一个新的函数执行上下文,它们是独立的,拥有自己的变量和参数。当函数执行完毕后,它所在的函数执行上下文会从执行上下文栈中被弹出。

总结一下:

  • 执行上下文是用来管理和维护JavaScript代码执行时的环境。
  • 有三种类型的执行上下文:全局执行上下文、函数执行上下文和eval函数执行上下文(不常用)。
  • 执行上下文栈用来记录各个执行上下文的顺序和层级关系。
  • 在创建阶段,会创建和初始化执行上下文,并将变量对象、this值和作用域链等相关信息设置好。
  • 在执行阶段,会执行具体的代码,并处理变量赋值、函数调用等操作。

在编写代码时,了解执行上下文的概念可以帮助我们理解变量的作用域、函数的闭包以及代码的执行顺序。它是理解JavaScript代码执行原理的关键之一。

创建执行上下文

var x = 10function foo(y) {var z = 20console.log(x + y + z)
}foo(5)

请添加图片描述

让我们一步一步地创建执行上下文。

  1. 全局执行上下文的创建:

    • 在全局上下文中,JavaScript引擎会创建一个全局变量对象,这里我们将它称为Global_VO(Variable Object)。
    • 将全局上下文中的变量和函数声明添加到Global_VO。
    • 在这个例子中,我们声明了一个变量x,并将其值设为10。
    • 我们还声明了一个函数foo,它也会被添加到Global_VO中。
    • 最后,JavaScript引擎会将this关键字指向全局对象(通常是window对象)。
  2. 函数执行上下文的创建:

    • 当我们调用foo函数时,JavaScript引擎创建一个新的执行上下文,称为Function_Context。
    • 在Function_Context中,JavaScript引擎会创建一个空的变量对象,我们将它称为Function_VO。
    • 将函数的参数和内部声明的变量添加到Function_VO。
    • 在这个例子中,我们有一个参数y和一个变量z。
    • 参数y的值是通过函数调用传递的,这里是5。
    • 变量z被声明但还未被赋值,所以它的值是undefined。
  3. 执行阶段:

    • 在执行阶段,JavaScript引擎会为变量对象中的变量赋值。
    • 在全局上下文中,将变量x的值设为10。
    • 在函数执行上下文Function_Context中,将变量z的值设为20。

输出结果为35,这是因为在函数foo的执行上下文中,可以访问到全局上下文中的变量x,以及函数的参数y和内部变量z。将它们相加并输出结果。

需要注意的是,创建执行上下文的过程分为两个阶段:创建阶段和执行阶段。在创建阶段,会创建相应的变量对象,并进行变量声明和函数声明。在执行阶段,会对变量进行赋值和执行具体的代码逻辑。

总结:

  • 全局执行上下文是代码执行的起点,它包括全局变量和函数的声明,并且this指向全局对象(通常是window对象)。
  • 函数执行上下文是每次函数调用时创建的,它包括函数的参数、内部变量等,并且可以访问上层执行上下文中的变量。
  • 在执行阶段,实际的代码逻辑被执行,变量被赋值,并得到最终的结果。

在JavaScript中,每当函数被调用时,都会创建一个新的函数执行上下文。与全局执行上下文类似,函数执行上下文也有自己的变量定义和函数声明。但是与全局执行上下文不同,函数执行上下文会额外包含this、arguments和函数的参数

在理解执行上下文的过程中,对于创建阶段和执行阶段的区分是很关键的。这有助于我们理解变量的作用域、函数的闭包以及代码的执行顺序。

持续学习总结记录中,回顾一下上面的内容:
执行上下文是JavaScript中的一个概念,用于描述代码在运行时的环境和上下文信息。它可以理解为代码执行时的“现场”,包含了变量、函数、参数以及其他相关的执行信息。
在JavaScript中,我们有全局执行上下文和函数执行上下文。全局执行上下文是整个程序的起点,包含了全局变量和函数的声明。而函数执行上下文是每次函数调用时创建的,包含了函数内部的变量、函数声明以及特殊的关键字(如this、arguments)。
执行上下文的创建分为两个阶段:创建阶段和执行阶段。在创建阶段,JavaScript引擎会创建变量对象,存储变量和函数的声明,并设置上下文相关的信息。在执行阶段,代码会被逐行执行,变量被赋值和计算,函数被调用。
执行上下文的概念帮助我们理解JavaScript中的作用域、闭包和函数调用等机制。它决定了变量的可见性和生命周期,以及函数内部对外部变量的访问。
通过深入理解执行上下文,我们能够更好地理解和调试JavaScript代码,写出更清晰和可靠的程序。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(6)【Python/机器学习/深度学习】Machine-Learning模型与算法应用—使用Adaboost建模及工作环境下的数据分析整理

目录 一、为什么要使用Adaboost建模? 二、泰坦尼克号分析(工作环境) (插曲)Python可以引入任何图形及图形可视化工具 三、数据分析 四、模型建立 1、RandomForestRegressor预测年龄 2、LogisticRegression建模 引入GridSearchCV 引入RandomizedSearchCV 3、Deci…

第三百一十回

我们在上一章回中介绍了"再谈ListView中的分隔线",本章回中将介绍showMenu的用法.闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在第一百六十三回中介绍了showMenu相关的内容,它主要用来显示移动PopupMenu在页面中的位置…

C语言第二十一弹---指针(五)

✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 转移表 1、转移表 总结 1、转移表 函数指针数组的用途:转移表 举例:计算器的⼀般实现: 假设我们需要做一个能够进行加减…

CoreSight学习笔记

文章目录 1 Components1.1 ROM Table 2 使用场景2.1 Debug Monitor中断2.1.1 参考资料 2.2 Programming the cross halt2.2.1 编程实现2.2.2 参考资料 2.3 CTI中断2.3.1 编程实现2.3.1.1 准备工作2.3.1.2 触发中断2.3.1.3 中断响应 2.3.2 参考资料 1 Components 1.1 ROM Table…

rust语言tokio库底层原理解析

目录 1 rust版本及tokio版本说明1 tokio简介2 tokio::main2.1 tokio::main使用多线程模式2.2 tokio::main使用单线程模式 3 builder.build()函数3.1 build_threaded_runtime()函数新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图…

国产三维剖面仪—MPAS-100相控参量阵浅地层剖面仪

最近声学所东海站邹博士发来了他们最新的浅地层剖面仪—MPAS-100相控参量阵浅地层剖面仪的资料,市场型号GeoInsight,委托Ocean Physics Technology公司销售,地大李师兄的公司负责技术支持。 MPAS-100相控参量阵浅地层剖面仪就是俗称的三维浅…

git安装配置

1、下载安装 下载地址 2、配置git用户 git config --global user.name "yw" git config --global user.email "88888qq.com" 3、git init 初始化 4、生成ssh密钥 mkdir .ssh //创建文件夹cd .ssh //进入新建文件夹 ssh-keygen -t rsa // 输入密钥文…

Uniapp真机调试:手机端访问电脑端的后端接口解决

Uniapp真机调试:手机端访问电脑端的后端接口解决 1、前置操作 HBuilderX -> 运行 -> 运行到手机或模拟器 -> 运行到Android App基座 少了什么根据提示点击下载即可 使用数据线连接手机和电脑 手机端:打开开发者模式 -> USB调试打开手机端&…

使用 WMI 查询安全软件信息

在这篇文章中,我们将详细介绍如何使用 Windows Management Instrumentation (WMI) API 来查询当前计算机上安装的安全软件的基本信息。我们将分析代码的各个部分,并解释每个步骤所涉及的技术和原理。 一、什么是 WMI? WMI 是 Windows Manag…

Vue安装与配置

写入借鉴网址:好细的Vue安装与配置_vue配置-CSDN博客 下载Vue安装地址: Node.js — Download 查看是否安装成功: node -v npm -v 配置全局模式及缓存 结果通过: C:\Windows\system32>npm install vue -g added 20 packages …

大学生活的“三角平衡”与“合法”偷懒艺术

在那个被称为大学的神奇乐园里,我终于找到了自我,或者说,我找到了一种平衡。这种平衡被我称为“三角平衡”,它是由懒觉、兴趣爱好和学习这三者构成的。在这个平衡中,我像一名杂技演员一样,稳稳地站在三个顶…

jsp商场会员卡管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 商场会员卡管理系统是一套完善的java web信息管理系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql5.…

python中sort()函数的详细使用方法

目录 使用reverse指定排序顺序 使用key指定排序规则 使用匿名函数制定规则 定义比较函数制定规则 制定多规则 多复杂规则排序 sort()是python非常好用的排序函数,可以对一个列表进行排序,这个排序只是会修改原列表,不会创建新的列表 使…

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第6天

6.1 定位-相对和绝对和固定 6.2 相对和绝对和固定 6.3 堆叠顺序z-index 6.4 定位总结 6.5 CSS精灵 基本使用 6.6 案例 CSS精灵 京东服务 6.7 字体图标-下载和使用 6.8 字体图标-上传 6.9 垂直对齐方式vertical-align 6.10 过渡属性 6.11 修饰属性-透明度与光标类型 6.12 综合案…

2.8 数据类型与作用域练习

1、选择题 1.1、以下选项中,不能作为合法常量的是 ___B___ A)1.234e04 B)1.234e0.4 C)1.234e4 D)1.234e0 解析:在C语言中,合法的浮点常量形式通常遵循以下规则:1.可以有整数部分、小数部…

string容器

1. string基本概念 1.1 本质: string是C风格的字符串,而string本质上是一个类 string和char * 区别: char * 是一个指针 string是一个类,类内部封装了char*,管理这个字符串,是一个char*型的容器。 1.2 特点…

Unity类银河恶魔城学习记录5-1.5-2 P62-63 Creating Player Manager and Skill Manager源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释,可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili PlayerManager.cs using System.Collections; using System.Collections.G…

ClickHouse的优缺点和应用场景

当业务场景需要一个大批量、快速的、可支持聚合运算的数据库,那么可选择ClickHouse。 选择ClickHouse 的原因: 记录类型类似于LOG,读取、运算远远大于写入操作选取有限列,对近千万条数据,快算的运算出结果。数据批量…

内网穿透工具

1. nps-npc 1.1 简介 nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。目前支持tcp、udp流量转发,可支持任何tcp、udp上层协议(访问内网网站、本地支付接口调试、ssh访问、远程桌面,内网dns解析等等……)&#xff0c…

Golang数据库编程详解 | 深入浅出Go语言原生数据库编程

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站https://www.captainbed.cn/kitie。 Golang学习专栏:https://blog.csdn.net/qq_35716689/category_12575301.html 前言 对数据库…