首页 > 编程语言 >(九)JavaScript的执行上下文

(九)JavaScript的执行上下文

时间:2024-03-27 17:33:52浏览次数:21  
标签:上下文 函数 对象 JavaScript 全局 执行 变量

一、理解

执行上下文,就是代码被解析和执行时所在环境的抽象概念。JavaScript 中运行任何代码都是在执行上下文中运行。
由js 引擎自动创建的对象,包含对应作用雨中的所有变量属性。

二、执行上下文的类型

  1. 全局执行上下文: 默认的最基础的执行上下文。不在任何函数中的代码都处于全局执行上下文中。主要完成:(1)创建一个全局对象,在浏览器中全局对象就死window对象。(2)将this指针指向这个全局对象。
  2. 函数执行上下文:函数调用时都会为函数创建一个新的执行上下文,只有在函数被调用时才会创建,每个函数都有自己的执行上下文。一个程序中可以有任意数量的函数执行上下文。
  3. Eval函数执行上下文:运行在 eval函数中的代码的自己的指向上下文。

三、执行上下文中重要的是三个部分

  • 变量对象(VO,Variable object),
  • 作用域链(Scope chain)
  • this指向

1、 变量对象:

变量对象是与执行上下文相关的数据作用域,存储了在上下文中定义的变量和函数声明。
全局上下文中的变量对象是全局对象。
(1)全局对象是预定义对象,是JS全局函数和全局属性的占位符。通过使用全局对象,可以访问所有预定义对的对象、属性和函数。(2)可以使用this关键字引用全局对象。全局对象作用与作用域链最低端,意味着所有非限定性的变量和函数的名字都可以为全局对象的属性查找。在浏览器中全局对象是window,在node中全局对象是global。(3)由于全局对象在作用域的最低端,所以顶层JS代码中声明的变量都将成为全局对象的属性。(4)全局对象是Object构造函数的实例,Object.prototype(原型)上预定的属性和方法,可以通过全局对象访问到。
函数上下文中的变量对象用活动对象(activation object,AO)表示。
活动对象在进入函数上下文时被创建的,具有函数的arguments属性作为初始化属性,arguments属性的值就是Arguments对象。
函数上下文的执行过程:(1)预编译(2)执行

function foo(a){
	var b = 2;
	function c(){}
	var d = function(){};
	b = 3;
}
foo(1);

(1)预编译:

  • 创建AO对象,寻找形参和变量声明
  • 把形参和变量名作为AO对象的属性名,值为undefind
  • 把实参赋值给形参,实参形参相统一
  • 寻找函数声明,值为函数体。
AO = {
	arguments:Arguments对象
	a:1,
	d:undefind,
	b:undefind.
	c:function c
}

(2)执行:
顺序执行代码,修改变量的值。

function foo(a){
	var b = 2;
	function c(){}
	var d = function(){};
	b = 3;
}
foo(1);

AO = {
	arguments:{
		0:1,
		length:1
	},
	a:1,
	b:3,
	c:reference to function c(){}
	d:reference to FunctionExpression "d"
}

总结:
1、全局上下文的变量对象初始化是全局对象
2、函数上下文文的变量对象初始化质保函Argunments对象
3、在进入执行上下文时会给变量对象添加形参、变量声明、函数声明等初始的属性值(预编译)
4、在变量执行阶段,会修改变量对象的属性值。

2、作用域链

在深入JS变量对象中,查找变量时,js引擎会从当前的上下文的变量对象中查找,如果没有找到,就会从父级执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象。这种多个执行上下文构成的链表就叫做作用域链。
函数的作用域在函数定义的时候就决定了,这是因为函数内部有一个[[scope]],当函数创建的时候,它会保存所有父变量对象到其中,可以理解为[[scope]]中就是所有父变量对象的作用域链,但是[[scope]]并不代表完整的作用域链。

function foo(){
function bar(){
}
}

foo.[[scope]]=[
globalContext.V0
];
bar.[[scope]]=[
fooContext.A0 
globalfontext.Vo

3、this指向

在全局执行上下文中,this 的值指向全局对象,在浏览器中,this 的值指向 window 对象。
在函数执行上下文中,this 的值取决于函数的调用方式。如果它被一个对象引用调用,那么 this 的值被设置为该对象,否则 this 的值被设置为全局对象或 undefined(严格模式下)

四、执行栈

执行栈,在其他编程语言中也被叫做调用栈,具有 LIFO(后进先出)结构,用于存储在代码执行期间创建的所有执行上下文。
当 JavaScript 引擎首次读取你的脚本时,它会创建一个全局执行上下文并将其推入当前的执行栈。
每当发生一个函数调用,引擎都会为该函数创建一个新的执行上下文并将其推到当前执行栈的顶端。
引擎会运行执行上下文在执行栈顶端的函数,当此函数运行完成后,其对应的执行上下文将会从执行栈中弹出,
上下文控制权将移到当前执行栈的下一个执行上下文。

五、声明周期

执行上下文的生命周期包括三个阶段:创建阶段→执行阶段→回收阶段

全局 : 准备执行全局代码前产生, 当页面刷新/关闭页面时死亡
函数 : 调用函数时产生, 函数执行完时死亡

六、与作用域的区别

JavaScript 属于解释型语言,JavaScript 的执行分为:解释和执行两个阶段,这两个阶段所做的事并不一样:解释阶段:词法分析,语法分析,作用域规则确定。执行阶段:创建执行上下文,执行函数代码,垃圾回收。
他们最大的区别是:
作用域在解释阶段确定的,并且不会改变;
执行上下文在运行阶段确定的,随时可能改变。

参考:
https://blog.csdn.net/kelly0721/article/details/127026923
https://blog.csdn.net/ksjdbdh/article/details/120111962
https://juejin.cn/post/6844903704466833421

标签:上下文,函数,对象,JavaScript,全局,执行,变量
From: https://blog.csdn.net/qq_43498878/article/details/137050259

相关文章

  • 电子招标采购系统源码之从供应商管理到采购招投标、采购合同、采购执行的全过程数字化
    随着市场竞争的加剧和企业规模的扩大,招采管理逐渐成为企业核心竞争力的重要组成部分。为了提高招采工作的效率和质量,我们提出了一种基于电子化平台的解决方案。该方案旨在通过电子化招投标,使得招标采购的质量更高、速度更快,同时节约招标成本,提升企业的资金节约率。 项目说明......
  • JavaScript混淆工具选择与使用指南
    摘要本文介绍了什么是js混淆工具,以及为什么需要使用js混淆工具。详细解释了js混淆工具的实现原理和作用,探讨了如何选择合适的js混淆工具,列举了几款常用的js混淆工具,并对它们的特点和适用场景进行了分析。最后总结了js混淆工具的重要性和使用建议。在Web开发中,JavaScript代码是一......
  • 03-JavaScript数组
    1.通过直接量创建数组vararr=[1,2,3,'abc','true'];console.log(arr);2.通过构造函数来创建数组vararr2=newArray("张三","李四");console.log(arr2);vararr3=newArray(5);//数组长度console.lo......
  • 【华为OD】2024年机试C卷真题集:最新的真题集题库 C/C++/Java/python/JavaScript
    【华为OD】2024年C卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客2024年C卷真题题集题库,有2种分数的题目列表,分别是100分的列表、200分的列表需要订阅请看链接:C卷100分真题集质量分:94价格:39.9元C卷200分真题集质量分:94价格:99.9元从2023年11月开始,华为OD......
  • JavaScript数组常用方法
    数组的常用方法有push(),unshift(),pop(),shift(),reverse(),sort(),splice(),concat(),join(),slice(),.....在工作中常用到的有增删改查,前增unshift,后增push(),前删shift(),后删pop(),修改指定元素splice(),查找indexOf(),lastindexof(),和ES6新增的数组方法forEach()、map()、filter()、r......
  • JavaScript
    目录JavaScript简介JavaScript介绍为什么学习JavaScriptJavaScript与ECMAScript的关系JavaScript版本JavaScript语句、标识符语句标识符JavaScript保留关键字变量变量的重新赋值变量提升JavaScript引入到文件嵌入到HTML文件中引入本地独立JS文件引入网络来源文件JavaScript注释与......
  • dbvisualizer和dbeaver工具中执行prepare的语句的方法
    dbvisualizer:用?填充原本是具体值的位置,在弹出的对话框中填入实际的参数即可。SELECTgenderFROMmysql.joe.person_info_all2dbv01wherenumber<?;dbeaver中方法一:用任意字符或字符串填充原本是具体值的位置,在弹出的对话框中填入实际的参数即可。select*frommysql.j......
  • 浏览器工作原理与实践--渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的
    在上篇文章中,我们介绍了渲染流水线中的DOM生成、样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段。这里还是先简单回顾下上节前三个阶段的主要内容:在HTML页面内容被提交给渲染引擎之后,渲染引擎首先将HTML解析为浏览器可以理解的DOM;然后根据CSS样式表,计算出DOM......
  • 浏览器工作原理与实践--渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的
    在上一篇文章中我们介绍了导航相关的流程,那导航被提交后又会怎么样呢?就进入了渲染阶段。这个阶段很重要,了解其相关流程能让你“看透”页面是如何工作的,有了这些知识,你可以解决一系列相关的问题,比如能熟练使用开发者工具,因为能够理解开发者工具里面大部分项目的含义,能优化页面卡......
  • javascript基础代码练习
    一、输入新增病例数,累计确诊病例数,14天内聚集性疫情发生天数。新增或者累计确诊病例为0则该地区为低风险地区。新增大于0且累计确诊<50或者累计大于50且14天内聚集性疫情发生天数为0的地区为中风险地区。其他情况为高风险地区。<!DOCTYPEhtml><html><head>  <metachar......