前端JS基础第一篇:执行上下文与执行栈

news2025/7/14 16:07:08

目录

执行上下文与执行栈

引言

什么是执行上下文?

执行上下文生命周期

变量对象

执行上下文的类型

执行上下文的特点

执行栈

执行栈示例


执行上下文与执行栈

引言

对于我们前端开发者来说理解JS程序内部执行机制是必要的,其中一个关键概念就是Js的执行上下文和执行栈。
执行上下文是JS语言较为底层的知识,学习掌握有助于我们更深入的把握JS这门语言的本质,也有助于理解作用域、闭包、变量提升等相关知识。

什么是执行上下文?

代码执行前,浏览器的Js引擎先会创建代码执行的环境来处理此Js代码的转换和执行,代码的执行环境称为执行上下文。
执行上下文是一个抽象概念,包含当前正在运行的代码以及当前执行环境中的变量、函数声明,参数(arguments),作用域链,this等信息。

一句话概括:执行上下文就是javascript代码被解析和执行时所在环境的抽象概念。

执行上下文生命周期

(1)创建阶段
生成变量对象、建立作用域链、确定this的指向

(2)执行阶段
变量赋值、函数的引用、执行其他代码

变量对象

变量对象是与执行上下文相关的数据作用域,存储了上下文中定义的变量和函数声明 变量对象是一个抽象的概念,在全局执行上下文中,变量对象就是全局对象。 在顶层js代码中,this指向全局对象,全局变量会作为该对象的属性来被查询。在浏览器中,window就是全局对象

执行上下文的类型

在js中,执行上下文分为以下三种:

  • 全局执行上下文:只有一个,也就是浏览器对象(即window对象),this指向的就是这个全局对象。
  • 函数执行上下文:有无数个,只有在函数被调用时才会被创建,每次调用函数都会创建一个新的执行上下文。
  • Eval函数执行上下文:js的eval函数执行其内部的代码会创建属于自己的执行上下文, 很少用而且不建议使用。

对于每个执行上下文,都有三个重要属性:变量对象、作用域链(Scope chain)、this

执行上下文的特点

  1. 单线程,只在主线程上运行;
  2. 同步执行,从上向下按顺序执行;
  3. 全局上下文只有一个,也就是window对象;
  4. 函数执行上下文没有限制;
  5. 函数每调用一次就会产生一个新的执行上下文环境。

执行栈

是一种先进后出的数据结构,用来存储代码运行的所有执行上下文

  1. 当 JS 引擎第一次遇到js脚本时,会创建一个全局的执行上下文并且压入当前执行栈
  2. 每当JS 引擎遇到一个函数调用,它会为该函数创建一个新的执行上下文并压入栈的顶部
  3. 当该函数执行结束时,执行上下文从栈中弹出,控制流程到达当前栈中的下一个上下文
  4. 一旦所有代码执行完毕,JS 引擎从当前栈中移除全局执行上下文

执行栈示例

var a = 1; // 1. 全局上下文环境

function bar (x) {

console.log('bar')

var b = 2;

fn(x + b); // 3. fn上下文环境

}

function fn (c) {

console.log(c);

}

bar(3); // 2. bar上下文环境

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

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

相关文章

使用QEMU调试ARM64 Linux内核v6.0.9

环境准备 开发环境:Ubuntu 20.04.5 LTS,推荐修改阿里云的apt源,遇到编译依赖方便安装。 环境准备:在Windows上基于WSL2搭建Linux开发环境 本文用到的软件选用的是截至当前(2022-11-19)官网发布的最新的release版本,详…

JavaEE之HTTPS

文章目录HTTPS加密引入证书总结HTTPS 加密 HTTPS 就是在 HTTP 的基础上进行了 加密 , 进一步的来保证用户的信息安全~ 举个例子: 83 版 <<火烧圆明园>> , 有人要谋反干掉慈禧太后. 恭亲王奕䜣给慈禧递的折子. 折子内容只是扯一扯家常,但套上一张挖了洞的纸就能看…

ESP32的BLE使用学习

UUID生成网站&#xff1a; Online UUID Generator Tool 0.前言 什么是低功耗蓝牙&#xff1f; BLE之所以被称为低功耗蓝牙&#xff0c;就是需要通讯的时候才握手&#xff0c;数据传输完成后&#xff0c;就断开连接。在通讯过程中&#xff0c;主动方是客户端&#xff0c;由客…

中微SC8F5771模拟IIC通信——指令运行速度的探索(附编译软件与烧录软件)

文章目录一、中微单片机烧录与使用编译软件烧录软件下载地址烧录软件二、模拟IIC三、逻辑分析仪下的时序一、中微单片机烧录与使用 编译软件 中微所使用编译软件为SCMCU_IDE&#xff0c;不过个人不推荐使用这个软件写代码&#xff08;十分不好用&#xff0c;不能跳转&#xf…

Linux搜索查找命令【详细整理】

目录Linux下文件搜索、查找、查看命令findfind 【搜索范围】【选项】​ find /home -name ‘hello.txt’​ find /home -user root​ find / -size 100Mlocate特别说明&#xff1a;locate 文件名whichwhich lsgrep​ 基本语法&#xff1a;grep [选项] 查找内容 源文件grep -niL…

第六章 图论 8 AcWing 1624. 地铁地图

第六章 图论 8 AcWing 1624. 地铁地图 原题链接 AcWing 1624. 地铁地图 算法标签 图论 单源最短路 dijkstra spfa 思路 若采用邻接矩阵存储 超出本题空间限制&#xff0c;因此无法采用邻接矩阵存储&#xff0c;可采用邻接表存储 若采用常规建图方式&#xff08;即相邻两…

微信小程序|基于小程序实现人脸融合

文章目录一、文章前言二、具体流程及准备三、开发步骤四、完整代码一、文章前言 此文主要通过小程序实现人脸图像融合&#xff0c;将检测到的两张人脸进行融合&#xff0c;输出一张融合后的人脸。 二、具体流程及准备 2.1、注册百度开放平台及微信公众平台账号。 2.2、下载及安…

概论_第2章随机变量及其概率分布__离散型随机变量之二项分布

二项分布是离散型随机变量的内容 一. 定义&#xff1a; 若随机变量X的可能取值为0, 1, ... ,n, 而X的分布值为 , k0,1,…n 其中&#xff0c;0<p<1, q 1-p, 称X服从参数为n, p的二项分布&#xff0c; 简记为 X ~ B(n, p) 1. 当n1时&#xff0c; X服从0-1分布, …

想进入游戏建模行业,这4点必须了解

“游戏行业不关心你的专业&#xff0c;只关心你的作品”&#xff0c;想要进入游戏行业就记住这句话&#x1f44d; 这一年可是越来越多人想要进入游戏行业啦&#xff5e;造成了汤多肉少的情况&#xff0c;咱们怎样才能在一群竞争者中脱颖而出呢❓有4⃣大点你要注意的&#xff1…

决策树算法在计算机视觉中的应用附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

利用SpringBoot和vue+elementui做一个简单的书本信息管理系统

目录 1.准备工作 1.1.数据库准备 1.2.前端准备工作 1.3.后端准备工作 2.后台代码的编写 2.1.修改配置文件 2.2. 编写service层 2.3.编写Controller层 3.前台代码的编写 3.1.在src里面的api里面的action.js 3.2.搜索栏&#xff0c;表单 3.3.表格 3.4.弹出新增的模态…

[附源码]SSM计算机毕业设计整形美容咨询网站JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

【考研复试】计算机专业考研复试英语常见问题二(研究方向/前沿技术/本科毕设篇)

相关链接&#xff1a; 【考研复试】计算机专业考研复试英语常见问题一&#xff08;家庭/家乡/学校篇&#xff09;【考研复试】计算机专业考研复试英语常见问题二&#xff08;研究方向/前沿技术/本科毕设篇&#xff09;【考研复试】计算机专业考研复试英语常见问题三&#xff0…

助老服务机器人结构设计

目 录 摘要 I Abstract II 第1章 绪论 1 1.1 课题背景 1 1.2 国外助老服务机器人的研究 1 1.2.1 爱尔兰PAM-AID 助老服务机器人 1 1.2.2 美国SmartCane 助老服务机器人 2 1.2.3 韩国WAR 助老服务机器人 3 1.2.4 日本助老服务机器人 4 1.2.5 可穿戴的外骨骼式助老服务机器人 4 …

(九)Spring之Bean的循环依赖问题

文章目录环境什么是Bean的循环依赖singleton下的set注入产生的循环依赖prototype下的set注入产生的循环依赖构造注入产生的循环依赖singleton下的构造注入prototype下的构造注入Spring解决循环依赖的机理&#xff08;底层实现&#xff09;上一篇&#xff1a;&#xff08;八&…

注释写的好,文档不潦草.

大家好&#xff0c;long time no see&#xff01;这次聊一聊「注释」。写「注释」的好处众所周知&#xff0c;但有时在实现一些「公共代码」后&#xff0c;需要编写「文档」&#xff0c;其中「注释」和「文档」的内容是大致相同的&#xff0c;比如param和returns等(相信有不少同…

Java_抽象类和接口(一)

作者&#xff1a;爱塔居的博客_CSDN博客-JavaSE领域博主 专栏&#xff1a;JavaSE 作者简介&#xff1a;大三学生&#xff0c;希望跟大家一起进步&#xff01; 文章目录 目录 文章目录 一、抽象类 1.1 抽象类概念 1.2 抽象类语句 1.3 抽象类特性 1.4 抽象类和普通类的区别 1.5 抽…

赞不绝口!仅靠阿里P9分享的 Redis 工作手册,拿到60W年薪Offer

昨晚有六七位小伙伴告诉我说&#xff1a;“大佬&#xff0c;有没有Redis的面试教程啊&#xff0c;最近面试被问到好多” 这就帮小伙伴们专门整理了一份资料&#xff08;不仅仅是面试题&#xff09;&#xff0c;从Redis核心原理到Redis设计与源码帮助大家梳理体系&#xff0c;快…

教你自己写Arcpy批处理程序

自己写Arcpy批处理栅格和矢量 先上代码&#xff0c;讲解各行代码的意思&#xff0c;从而达到自己写代码的目的 #....Edit by Longhao Wang.... import arcpy from arcpy import env from arcpy.sa import * import os import os.path import sys arcpy.env.workspace"D:…

Vue项目开发经验

文章目录前言网页组件echarts使用打包后显示包体积安装tensorflow和anaconda可能出现的错误![在这里插入图片描述](https://img-blog.csdnimg.cn/c1facd95a7f645c5af3e8dc1237913a3.png)总结前言 本博客仅做学习笔记&#xff0c;如有侵权&#xff0c;联系后即刻更改 科普&…