JavaScript 原始值和引用值在变量复制时的异同

相比于其他语言,JavaScript 中的变量可谓独树一帜。正如 ECMA-262 所规定的,JavaScript 变量是松散类型的,而且变量不过就是特定时间点一个特定值的名称而已。由于没有规则定义变量必须包含什么数据类型,变量的值和数据类型在脚本生命期内可以改变。这样的变量很有意思,很强大,当然也有不少问题。

​ JavaScript 变量可以保存两种类型的值:原始值和引用值。

​ 原始值可能是以下 6 种原始数据类型之 一:Undefined、Null、Boolean、Number、String 和 Symbol。

​ 原始值和引用值有以下特点。

  • 原始值
    • 大小固定,因此保存在栈内存上。
    • 从一个变量到另一个变量复制原始值会创建该值的第二个副本。
    • typeof 操作符可以确定值的原始类型。
  • 引用值
    • 是对象,存储在堆内存上。
    • 包含引用值的变量实际上只包含指向相应对象的一个指针,而不是对象本身。
    • 从一个变量到另一个变量复制引用值只会复制指针,因此结果是两个变量都指向同一个对象。
    • 而 instanceof 操作符用于确保值的引用类型。

原始值与引用值

​ ECMAScript 变量可以包含两种不同类型的数据:原始值和引用值。原始值(primitive value)就是最简单的数据,引用值(reference value)则是由多个值构成的对象。

​ 在把一个值赋给变量时,JavaScript 引擎必须确定这个值是原始值还是引用值。

​ 有6 种 原始值:Undefined、Null、Boolean、Number、String 和 Symbol。保存原始值的变量是按值(by value)访问的,因为我们操作的就是存储在变量中的实际值。

​ 引用值是保存在内存中的对象。与其他语言不同,JavaScript 不允许直接访问内存位置,因此也就不能直接操作对象所在的内存空间。在操作对象时,实际上操作的是对该对象的引用(reference)而非实际的对象本身。为此,保存引用值的变量是按引用(by reference)访问的。

动态属性

​ 原始值和引用值的定义方式很类似,都是创建一个变量,然后给它赋一个值。不过,在变量保存了这个值之后,可以对这个值做什么,则大有不同。

​ 对于引用值而言,可以随时添加、修改和删除其属性和方法。比如,看下面的例子:

let person = new Object(); 
person.name = "Nicholas"; 
console.log(person.name); // "Nicholas" 

​ 这里,首先创建了一个对象,并把它保存在变量 person 中。然后,给这个对象添加了一个名为name 的属性,并给这个属性赋值了一个字符串"Nicholas"。在此之后,就可以访问这个新属性,直到对象被销毁或属性被显式地删除。

​ 原始值不能有属性,尽管尝试给原始值添加属性不会报错。比如:

let name = "Nicholas"; 
name.age = 27; 
console.log(name.age); // undefined

​ 在此,代码想给字符串 name 定义一个 age 属性并给该属性赋值 27。紧接着在下一行,属性不见了。记住,只有引用值可以动态添加后面可以使用的属性。

注意:原始类型的初始化可以只使用原始字面量形式。如果使用的是 new 关键字,则 JavaScript 会创建一个 Object 类型的实例,但其行为类似原始值。下面来看看这两种初始化方式的差异:

let name1 = "Nicholas"; 
let name2 = new String("Matt"); name1.age = 27; 
name2.age = 26; console.log(name1.age); // undefined 
console.log(name2.age); // 26 console.log(typeof name1); // string 
console.log(typeof name2); // object 

复制值

​ 除了存储方式不同,原始值和引用值在通过变量复制时也有所不同。在通过变量把一个原始值赋值到另一个变量时,原始值会被复制到新变量的位置。请看下面的例子:

let num1 = 5; 
let num2 = num1;

​ 这里,num1 包含数值 5。当把 num2 初始化为 num1 时,num2 也会得到数值 5。这个值跟存储在 num1 中的 5 是完全独立的,因为它是那个值的副本。 这两个变量可以独立使用,互不干扰。这个过程如下图所示。

在这里插入图片描述

​ 在把引用值从一个变量赋给另一个变量时,存储在变量中的值也会被复制到新变量所在的位置。区别在于,这里复制的值实际上是一个指针,它指向存储在堆内存中的对象。操作完成后,两个变量实际上指向同一个对象,因此一个对象上面的变化会在另一个对象上反映出来,如下面的例子所示:

let obj1 = new Object(); 
let obj2 = obj1; 
obj1.name = "hello"; 
console.log(obj2.name); // "hello" 

​ 在这个例子中,变量 obj1 保存了一个新对象的实例。然后,这个值被复制到 obj2,此时两个变量都指向了同一个对象。在给 obj1 创建属性 name 并赋值后,通过 obj2 也可以访问这个属性,因为它们都指向同一个对象。下图展示了变量与堆内存中对象之间的关系。

时两个变量都指向了同一个对象。在给 obj1 创建属性 name 并赋值后,通过 obj2 也可以访问这个属性,因为它们都指向同一个对象。下图展示了变量与堆内存中对象之间的关系。

在这里插入图片描述

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

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

相关文章

mysql.service is not a native service, redirecting to systemd-sysv-install

字面意思:mysql.service不是本机服务,正在重定向到systemd sysv安装 在CentOS上使用Systemd管理MySQL服务的具体步骤如下: 1、创建MySQL服务单元文件: 首先,你需要创建一个Systemd服务单元文件,以便Syste…

【Python笔记-设计模式】原型模式

一、说明 原型模式是一种创建型设计模式, 用于创建重复的对象,同时又能保证性能。 使一个原型实例指定了要创建的对象的种类,并且通过拷贝这个原型来创建新的对象。 (一) 解决问题 主要解决了对象的创建与复制过程中的性能问题。主要针对…

redhawk:使用ipf文件反标instance power

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 往期文章链接: Redhawk:Input Data Preparation 使用ptpx和redhawk报告功耗时差别总是很大,如果需要反标top/block的功耗值可以在gsr文件中使用BLOCK_POWER_FOR_SCALING的命令

Verilog刷题笔记35

题目: Create a 1-bit wide, 256-to-1 multiplexer. The 256 inputs are all packed into a single 256-bit input vector. sel0 should select in[0], sel1 selects bits in[1], sel2 selects bits in[2], etc. 解法: module top_module( input [255:…

Spring Cloud Alibaba-05-Gateway网关-02-断言(Predicate)使用

Lison <dreamlison163.com>, v1.0.0, 2023.10.20 Spring Cloud Alibaba-05-Gateway网关-02-断言(Predicate)使用 文章目录 Spring Cloud Alibaba-05-Gateway网关-02-断言(Predicate)使用通过时间匹配通过 Cookie 匹配通过 Header 匹配通过 Host 匹配通过请求方式匹配通…

C# CAD2016 cass10宗地Xdata数据写入

一、 查看cass10写入信息 C# Cad2016二次开发获取XData信息&#xff08;二&#xff09; 一共有81条数据 XData value: QHDM XData value: 121321 XData value: SOUTH XData value: 300000 XData value: 141121JC10720 XData value: 权利人 XData value: 0702 XData value: YB…

2.居中方式总结

居中方式总结 经典真题 怎么让一个 div 水平垂直居中 盒子居中 首先题目问到了如何进行居中&#xff0c;那么居中肯定分 2 个方向&#xff0c;一个是水平方向&#xff0c;一个是垂直方向。 水平方向居中 水平方向居中很简单&#xff0c;有 2 种常见的方式&#xff1a; 设…

java面试题之mybatis篇

什么是ORM&#xff1f; ORM&#xff08;Object/Relational Mapping&#xff09;即对象关系映射&#xff0c;是一种数据持久化技术。它在对象模型和关系型数据库直接建立起对应关系&#xff0c;并且提供一种机制&#xff0c;通过JavaBean对象去操作数据库表的数据。 MyBatis通过…

MATLAB练习题:randperm函数的练习题

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili MATLAB中有一个非常有用的函数&#xff1a;randperm函数&…

华为算法题 go语言或者ptython

1 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返…

如何进行高性能架构的设计

一、前端优化 减少请求次数页面静态化边缘计算 增加缓存控制&#xff1a;请求头 减少图像请求次数&#xff1a;多张图片变成 一张。 减少脚本的请求次数&#xff1a;css和js压缩&#xff0c;将多个文件压缩成一个文件。 二、页面静态化 三、边缘计算 后端优化 从三个方面进…

adb-monkey命令

目录 adb shell monkey -p/-v 包名 次数 1、指定一个包 2、指定多个包 3、不指定包 Event percentages&#xff08;事件百分比&#xff09; 常见参数 --throttle 延迟时间 单位毫秒 --pct-touch 设定触屏事件生成的百分比 --pct-motion 设定滑动事件生成…

面试前端性能优化八股文十问十答第二期

面试前端性能优化八股文十问十答第二期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;如何优化动画&#x…

c语言中的大小写字母转换怎么转?

在C语言中&#xff0c;大小写字母转换是基于ASCII码表的特性实现的。ASCII码中&#xff0c;小写字母从’a’到’z’的ASCII码值是连续的&#xff08;97到122&#xff09;&#xff0c;而大写字母从’A’到’Z’的ASCII码值也是连续的&#xff08;65到90&#xff09;。它们之间有…

Redis高性能原理

redis大家都知道拥有很高的性能&#xff0c;每秒可以支持上万个请求&#xff0c;这里探讨下它高性能的原理。单线程架构和io多路复用技术。 一&#xff0c;单线程架构 单线程架构指的是命令执行核心线程是单线程的&#xff0c;数据持久化、同步、异步删除是其他线程在跑的。re…

获取视频第一帧,以及后续上传

// 获取视频基本信息 const getVideoBasicInfo (videoSrc) > {return new Promise((resolve, reject) > {const video document.createElement("video");video.src videoSrc;// 视频一定要添加预加载video.preload "auto";// 视频一定要同源或者…

什么是系统工程(字幕)35

0 00:00:01,190 --> 00:00:02,840 下面的内容 1 00:00:04,850 --> 00:00:06,520 接下来呢就是 2 00:00:08,180 --> 00:00:09,830 16.6.1 3 00:00:11,070 --> 00:00:13,440 项流热平衡分析 4 00:00:15,350 --> 00:00:16,730 这一节 5 00:00:18,860 --> 0…

亿道丨三防平板丨加固平板丨三防加固平板丨改善资产管理

库存资产管理中最重要的部分之一是准确性&#xff1b;过时的库存管理技术会增加运输过程中人为错误、物品丢失或纸张损坏的风险。如今随着三防平板电脑的广泛使用&#xff0c;库存管理也迎来了好帮手&#xff0c;通过使用三防平板电脑能够确保库存管理、数据存储和记录保存的准…

React18源码: React调度中的3种优先级类型和Lane的位运算

优先级类型 React内部对于优先级的管理&#xff0c;贯穿运作流程的4个阶段&#xff08;从输入到输出&#xff09;&#xff0c;根据其功能的不同&#xff0c;可以分为3种类型&#xff1a; 1 &#xff09;fiber优先级(LanePriority) 位于 react-reconciler包&#xff0c;也就是L…

掌握 Android 中的 RecyclerView 优化

掌握 Android 中的 RecyclerView 优化 一、RecyclerView Pool以及何时使用它二、onCreateViewHolder 和 onBindViewHolder三、优化 RecyclerView 的不同方法四、视图无效与请求布局五、ViewHolder模式六、默认的废料和脏视图类型七、结论 RecyclerView 是 Android 中一个功能强…