JS基础之变量对象

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~

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

redis-学习笔记(Jedis list简单命令)

lpush & lrange lpush 头插, 第二个参数为变长参数, 即可以一次往里面添加 N 个值 lrange 获取列表某一下标区间的内容, 注意返回值类型 代码演示 rpush & rpop & lpop rpush 在列表中尾插数据, 第二个参数仍是边长列表 lpop 头删 rpop 尾删 代码演示 blpop & …

SpringBoot核心功能-temp

yml&类配置 Configuration-processor

实验03:OSPF配置网络实验

1.实验目的: 本实验的主要目的是了解OSPF协议的基本概念、OSPF网络的配置及验证,通过实验来掌握OSPF协议的工作原理、配置方法、路由表的生成过程等。 2.实验内容: 设计一个拓扑结构,并在网络设备上进行配置;配置OS…

数字世界的基石:英特尔以太网800系列适配器技术指南

以太网的发展历史 1906年,一家以复印/打印为主要业务的公司施乐(Xerox),在美国康涅狄格州的费尔菲尔德县成立。如今,该公司股价在13.7美元左右,和当今的全球PC行业标准制定者英特尔的股价相差数倍,但是就是这个绝大多数人都未曾听说过的施乐公司,诞生了奠定未来的以太网技术。…

@SpringBootApplication自动配置原理剖析

SpringBootApplication自动配置原理剖析 自动配置: 根据我们添加的依赖,会自动将一些配置类的bean注册进ioc容器中,可以使用Autowired或者Resource等注解来使用它。 1.1 SpringBootApplication Spring Boot项目创建完成会默认生成一个Application的入口类(启动类),命名规则a…

亿欧网首届“元创·灵镜”科技艺术节精彩纷呈,实在智能AI Agent智能体展现硬核科技图景

12月4日-10日,持续一周的首届“元创灵镜”科技艺术节在海南陵水香水湾拉开帷幕,虚实交互创造出的“海岛之镜”开幕式呈现出既真实又虚幻的未来感,融入前沿科技元素的艺术装置作品在“虚实之镜&自然生长”科技艺术展诠释着浪漫想象&#x…

【Axure高保真原型】能增删改的树形表格

今天和大家分享能增删改的树形表格的原型模板,包括展开、折叠、增加、修改、删除表格内容,那这个原型模板是通过中继器制作的,所以使用简单,只需要填写中继器表格,即可自动生成对应的树形表格。这个模板最高支持6级树形…

【python】质数(素数)

质数(又称素数),是指在大于1的自然数中,除了1和它本身外,不能被其他自然数整除(除0以外)的数称之为质数(素数)。比1大但不是质数的数称为合数,1和0既非素数也非合数。 import math #调用math模块 1.判断某一个数是否为质数 import mathdef isPrime(n): #定义一个判断一个数是…

Improving IP Geolocation with Target-Centric IP Graph (Student Abstract)

ABSTRACT 准确的IP地理定位对于位置感知的应用程序是必不可少的。虽然基于以路由器为中心(router-centric )的IP图的最新进展被认为是前沿的,但一个挑战仍然存在:稀疏IP图的流行(14.24%,少于10个节点&…

DockerCompose部署RabbitMQ集群

DockerCompose部署RabbitMQ集群 最近小黄在工作中正好需要部署RabbitMQ集群,借此来记录一下,也希望可以帮助到大家 前置条件 简单介绍一下咱们公司现有的条件以及想要达成的效果 服务器3台,3台都是属于一个专有网络中,也就是说3…

100V耐压 内置MOS ESOP8 40V输入 转5V 2.1A恒压输出

100V耐压内置MOS ESOP8 40V输入转5V 2.1A恒压输出 芯片测试数据如下图:

SAHI强化YOLOv5在小目标上的表现

文章目录 环境前言安装sahiyolov5检测sahi添加新的检测模型 环境 ubuntu 18.04 64bitsahi 0.8.4yolov5 5.0pytorch 1.7.1cu101 前言 目标检测和实例分割是迄今为止计算机视觉中最重要的应用领域,各种目标检测网络层出不穷,然而,小目标的检…

用23种设计模式打造一个cocos creator的游戏框架----(十六)亨元模式

1、模式标准 模式名称:亨元模式 模式分类:结构型 模式意图:运用共享技术有效地支持大量细粒度的对象 结构图: 适用于: 1、一个应用程序使用了大量的对象. 2、完全由于使用大量的对象,造成很大的存储开…

人工智能改变医疗保健:人工智能如何革命医学

人工智能(Artificial Intelligence, 简称AI)的快速发展正逐渐改变着我们的生活方式和社会结构。在医疗保健领域,AI的应用不仅提供了更准确、高效的诊断和治疗手段,还为医生和患者之间的交流提供了新的途径。本文将探讨人工智能如何…

java springboot+jsoup写一段爬虫脚本 将指定地址的 图片链接 文本 超链接地址存入自己的属性类对象中

首先 还是最基本的 要在 pom.xml 引入依赖 <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.14.1</version> </dependency>然后 我们可以在项目中创建一个属性类 我这里就叫 WebContent了…

到底什么是DevOps

DevOps不是一组工具&#xff0c;也不是一个特定的岗位。在我看来DevOps更像是一种软件开发文化&#xff0c;一种实现快速交付能力的手段。 DevOps 强调的是高效组织团队之间如何通过自动化的工具协作和沟通来完成软件的生命周期管理&#xff0c;从而更快、更频繁地交付更稳定的…

微信这个地方,收费了

大家好&#xff0c;我是小悟 我们都知道&#xff0c;微信企业类型小程序需要认证&#xff0c;现在微信个人小程序也需要认证了&#xff0c;账号逾期未完成微信认证&#xff0c;将影响账号“被搜索”能力。 这一要求&#xff0c;在很多人看来可能是一项不必要的规定。然而&…

数据结构之---- 图

数据结构之---- 图 什么是图&#xff1f; 图是一种非线性数据结构&#xff0c;由顶点和边组成。我们可以将图 &#x1d43a; 抽象地表示为一组顶点 &#x1d449; 和一组边 &#x1d438; 的集合。 以下示例展示了一个包含 5 个顶点和 7 条边的图。 如果将顶点看作节点&…

【全面解读】洁净室验收及检测设备、方法全介绍

洁净室相关概念 洁净室又可称作无尘室&#xff08;Cleanroom&#xff09;&#xff0c;通常用作专业工业生产或科学研究的一部分&#xff0c;包括制造药品&#xff0c;集成电路&#xff0c;CRT&#xff0c;LCD&#xff0c;OLED和microLED显示器等。洁净室的设计是为了保持极低水…

数据结构之---- 堆、建堆操作、Top‑K 问题

数据结构之---- 堆、建堆操作、Top‑K 问题 什么是堆&#xff1f; 堆是一种满足特定条件的完全二叉树 主要可分为两种类型&#xff1a; 大顶堆&#xff1a;任意节点的值 ≥ 其子节点的值。小顶堆&#xff1a;任意节点的值 ≤ 其子节点的值。 堆作为完全二叉树的一个特例&am…