JS基础之变量对象

news2024/11/16 11:56:57

JS基础之变量对象

  • 变量对象
    • 基础
    • 变量对象
    • 全局上下文
    • 函数上下文
    • 执行过程
      • 进入执行上下文
      • 代码执行
      • 思考题

变量对象

基础

当JavaScript代码执行一段可执行代码(executable code)时,会创建对应的执行上下文(execution context)。
对于每个执行上下文,都有三个重要属性:

  • 变量对象(Variable object,VO);
  • 作用域链(Scope chain);
  • this;
    这里着重讲变量对象的内容

变量对象

变量对象是与执行上下文相关的数据作用域,存储在上下文中定义的变量和函数声明。
因为不同执行上下文下的变量对象稍有不同,所以我们来聊聊全局上下文下的变量对象和函数上下文下的变量对象。

全局上下文

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

简单点说:

  1. 可以通过this引用,在客户端JavaScript中,全局对象就是Windows对象,我们把全局上下文称之为VO
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中,全局对象有Windows属性指向自身
var a = 1;
console.log(window.a);
this.window.b = 2;
console.log(this.b);

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

函数上下文

在函数上下文中,我们用活动对象(activation objectAO)来表示变量对象。
活动对象和变量对象其实是一个东西,只是变量对象是规范上的或者说是引擎实现上的,不可在JavaScript环境中访问,只有到当进入一个执行上下文中,这个执行上下文的变量对象才被激活,所以才叫activation object,而只有被激活的变量对象,也就是活动对象上的各种属性才能被访问。
活动对象是进入函数上下文时刻被创建的,他通过函数的arguments属性初始化。
arguments属性值是arguments对象。

执行过程

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

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

进入执行上下文

当进入执行上下文时,这时候还没有执行代码。
变量对象包括:

  1. 函数的所有形参(如果是函数上下文)
    - 由名称和对应值组成的一个变量对象和属性被创建;
    - 没有实参,属性值设为undefined;
  2. 函数声明
    - 由名称和对应值(函数对象(function-object))组成一个变量对象的属性被创建;
    - 如果变量对象已经存在相同名称的属性,则完全替换这个属性;
  3. 变量声明
    - 由名称和对应值(undefined)组成一个变量对象的属性被创建;
    - 如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性;
    举个栗子:
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. 在代码执行阶段,会再次修改变量的属性值;

思考题

example1

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

第一段会报错:Uncaught ReferenceError:a is not defined。
第二段会打印:1。
这是因为函数中的"a"并没有通过var 关键字声明,所以不会被存放在AO中。
第一段执行console的时候,AO的值是:

AO = {
	arguments:{
		length:0
	}
}

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

example2

console.log(foo);
function foo(){
	console.log("foo");
}
var foo = 1;

会打印函数[Function: foo],而不是undefined。
这是因为在进行执行上下文时,首先会处理函数声明,其次会处理变量声明,如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。

好啦!友友们,变量对象就说到这里啦,有问题欢迎留言讨论ya~

在这里插入图片描述

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

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

相关文章

什么是SEO优化

什么是SEO,百度其实就有答案,只是回答的很基础,说的都是基础概念,没有具体的体现在里面,SEO除了基础概念,还要有相应的构架,不然怎么弄都是一场空而已。 关于什么是SEO的文章导读? 1…

伦敦金收盘线应用有技巧

伦敦金的收盘线的绘制方式相当简单,其实也就是MT4中折线图的画法,我们可以在走势图以金价为纵坐标,而以时间为横坐标,然后将每一日的收盘价位值沿着横坐标一一的连接起来,就形成了伦敦金价的收盘线图。 利用线条简单的…

深入浅出讲解半桥栅极驱动器IC FAN7382MX

FAN7382MX是单片高端栅极驱动器IC,可以驱动最高在 600V 下运行的 MOSFET 和 IGBT。安森美的高电压工艺和共模干扰抑制技术提供了高压侧驱动器在高 dv/dt 干扰情况下的稳定运行。先进的电平转换电路可针对 VBS 15V 允许最高 VS -9.8 V(典型值)的高压侧门…

【Python】部署Rabbitmq消息队列实现生产和消费

原文作者:我辈李想 版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。 文章目录 前言一、基础的生产者消费者二、ACK消息确认机制三、类的写法1.新建MyRabbitMQ.py文件2.基础RabiitMQ3.发布订阅4.多次执行RabiitMQ_生产 四、…

Cannot find cache named ‘‘ for Builder Redis

当引入 Redissson 时,springCache 缓存机制失效 原因:springCache 默认使用本地缓存 Redisson 使用redis 缓存 最后都转成redis了。。。 总感觉哪不对 两者居然不共存

SU渲染受到电脑性能影响大吗?如何提高渲染速度

一般3d设计师们在进行设计工作前都需要提供一台高配电脑,那么你这知道su渲染对电脑要求高吗?电脑带不动su怎么解决?su对电脑什么配件要求高?今天这篇文章就详细为大家带来电脑硬件对su建模渲染的影响,以及su渲染慢怎么…

学习深度强化学习---第3部分----RL蒙特卡罗相关算法

文章目录 3.1节 蒙特卡罗法简介3.2节 蒙特卡罗策略评估3.3节 蒙特卡罗强化学习3.4节 异策略蒙特卡罗法 本部分视频所在地址:深度强化学习的理论与实践 3.1节 蒙特卡罗法简介 在其他学科中的蒙特卡罗法是一种抽样的方法。 如果状态转移概率是已知的,则是…

Axure的流程图/泳道图以及自定义元件库的使用

目录 1.ProcessOn的介绍 2.流程图以及泳道图的介绍 2.1流程图 2.2流程图的特点 2.3泳道图 2.4泳道图的特点 2.5流程图跟泳道图的优缺点 2.5.1优点: 2.5.2缺点: 2.6流程图的使用 2.7流程图的案列 2.8泳道图的使用 3.自定义元件库 4.门诊流程…

【Bug修复】秒杀服务器异常,轻松恢复网站访问--从防火墙到Docker服务的全面解析

(秒杀方案)服务器异常:connection is closed by foreign host… 月初部署了一个私人项目到服务器上,刚开始还能用,用了不到两天报了上面的错误:connection is closed by foreign host… 🌺问题描…

Echarts多图表动态更新示例

前端框架(html、echarts、jquery) <!DOCTYPE html> <html><head><meta charset"utf-8"><title>echarts多图表动态更新示例</title><script src"jquery.min.js"></script><script type"text/java…

java.lang.IllegalArgumentException: Could not resolve placeholder XXX‘ in value

问题描述 使用Springcloudalibaba的nacos作为配置中心&#xff0c;服务启动时报错&#xff1a; java.lang.IllegalArgumentException: Could not resolve placeholder XXX‘ in value java.lang.IllegalArgumentException: Param ‘serviceName’ is illegal, serviceName is …

差分进化算法DE

此算法是一种基于贪心的并行直接搜索算法。 1.过程 &#xff08;1&#xff09;初始化种群 NP个D维的参数向量(i1,2,...,NP)作为每一代G种群&#xff0c;种群规模必须>4 &#xff08;2&#xff09;变异 使用种群中两个不同向量来干扰一个现有向量&#xff0c;进行差分操…

生活是自己的,请尽情打扮,尽情可爱

端庄大气又尽显GAO级感 的明制汉服处处都是是惊喜 领口袖口拼接仿貂毛环保毛条 保暖又精致 袖子贴民族风珠片刺绣织带 门襟搭配金属子母扣 前胸欧根纱刺绣圆形布贴 每一处都是用心制作 红色喜庆&#xff0c;用来做拜年服来穿再合适不过啦

[C语言]大小端及整形输出问题

假设在一个32位little endian 的机器上运行下面的程序&#xff0c;结果是多少 ? 1.1先看以下三个程序 #include <stdio.h> int main() {long long a 1, b 2, c 3;printf("%lld %lld %lld\n", a, b, c); // 1 2 3printf("%d %d %d %d %d %d\n&quo…

AXB外呼系统怎样提高工作效率呼叫系统

AXB 外呼系统是一种帮助企业提高外呼效率的解决方案&#xff0c;它结合了自动拨号&#xff08;A&#xff09;和人工坐席&#xff08;X&#xff09;&#xff0c;使企业能够更快速、高效地与潜在客户进行沟通。以下是提高工作效率的一些方法&#xff1a; 预设任务和脚本&#xff…

【Linux】fork()函数详解

什么是fork&#xff1f; fork&#xff08;&#xff09;函数通过系统调用并创建 一个与原来进程几乎完全相同的进程 此进程叫做子进程&#xff0c;两个进程做一样的事 但初始参数或者传入的变量不同&#xff0c;两个 进程便可以做不同的事 fork的返回值 在父进程中&#xff0…

05进程间通信-学习笔记

进程间通信&#xff08;IPC&#xff09; 概念 进程信技术简称IPC,可以利用此技木让多个进程相传建消数据&#xff0c;有大量的进程间通信方案 pipe 匿名管道fifo 命名管简单理解&#xff0c;管道文件是一个指向内核管道缓冲区的指针&#xff0c;所有向管道文件读写的操作&am…

Mybatis 拦截器实现单数据源内多数据库切换

大家好&#xff0c;我是 方圆。物流的分拣业务在某些分拣场地只有一个数据源&#xff0c;因为数据量比较大&#xff0c;将所有数据存在一张表内查询速度慢&#xff0c;也为了做不同设备数据的分库管理&#xff0c;便在这个数据源内创建了多个不同库名但表完全相同的数据库&…

阿昌教你如何使用通义灵码

阿昌教你如何使用通义灵码 Hi&#xff0c;我是阿昌&#xff0c;今天教你如何使用通义灵码。 一、通义灵码是什么 在使用前&#xff0c;肯定要知道通义灵码是个啥东西&#xff1b; 通义灵码&#xff0c;是阿里云出品的一款基于通义大模型的智能编码辅助工具&#xff0c;提供…

三大维度解码剑南春“高质量发展”丨年度盘点

执笔 | 洪大大 编辑 | 扬 灵 2023年即将画上句点&#xff0c;当我们回首这一年为行业带来惊喜的品牌&#xff0c;剑南春是其中之一。 回顾剑南春今年一整年的动作&#xff0c;从新品频发到双节&#xff08;618、双11&#xff09;热销&#xff0c;从全国巡展到荣誉满载&…