js引用类型与基础类型

mo0n1andin 发布于2019-08-26 10:31 / 1521人阅读

摘要：引用类型拷贝如果想要对引用类型进行拷贝，使拷贝之后的结果互不影响的话，需要在拷贝时新增一个堆内存，将原始堆内存中的数据复制进去，同时新分配的栈内存存储新的堆内存地址。

1.基本数据类型以及引用类型基础：

2.赋值拷贝图解：

基本数据类型：

```
var a = 123;  
var b = a;  
```

第一步：给a分配一个栈内存：

第二步：给b分配一个栈内存，将a中的数据拷贝出来：
因此，基本数据类型赋值拷贝之后两个变量互相不影响

引用类型：
```
var a = [qqq]; 
var b = a
```

第一步：分配一个堆内存，存储数据，分配一个栈内存，存储a对应的数据的堆内存地址（堆1），a可以根据地址找到相应的数据：

第二步：给b分配一个栈内存，存储对应的堆内存地址（还是堆1），b也可以根据地址找到相应的数据。
当a或者b改变时，改变的是堆内存里面的数据，栈内存里的地址没有改变，因此引用类型赋值拷贝之后两个变量是相互影响的，一个变量改变会导致另一个变量的改变。

3.引用类型拷贝
如果想要对引用类型进行拷贝，使拷贝之后的结果互不影响的话，需要在拷贝时新增一个堆内存，将原始堆内存中的数据复制进去，同时新分配的栈内存存储新的堆内存地址。

4.深拷贝的方式
1.利用json进行转化

var a = JSON.stringify(b);
var c = JSON.parse(a); //将b拷贝给c

将b转化为字符串赋值给a，然后将a再转化为json赋予c

弊端：只能转化只有基础类型的对象，包含引用类型嵌套时不能使用

2.利用数组中的slice和concat方法

var a = ["1","2","3"];
var b = a.slice(0);
b[1] = "4"; //a = ["1","2","3"],b = ["1","4","3"]
var c = a.concat();
c[0] = "5"; //a = ["1","2","3"],c = ["5","2","3"]

弊端：无法切断引用类型嵌套时的关联,slice和concat类似

var aa = ["1",["1","2"],"3"];
var bb = aa.slice(0);
bb[1][1] = "33"; //aa=["1",["1","33"],"3"],此时嵌套的数据会被修改
bb[1] = "33"; //aa=["1",["1","33"],"3"],bb=["1", "33", "3"],此时嵌套的数据不会被修改

GPU云服务器云服务器 js引用数据类型 js引用类型的存储 js引用的数据类型 js引用json文件数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106319.html

前端基础进阶（一）：内存空间详细图解

摘要：一栈数据结构与不同，中并没有严格意义上区分栈内存与堆内存。引用数据类型的值是保存在堆内存中的对象。不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。为了更好的搞懂变量对象与堆内存，我们可以结合以下例子与图解进行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 评论0 收藏0
【JS基础】初谈JS现有的数据类型

摘要：相当于相当于相当于基础类型不属于包装的对象类型小结数据类型是每一个语言的基础由于属于弱类型脚本语言因此数据只有在赋值后才能直到变量的数据类型下一次我们具体介绍对象的概念前言在《你所不知道的javascript上篇》书籍以及《javascript权威指南》等书籍里面，均有介绍js的数据类型，对象，原型，继承。结合工作经验, 以及借用一些开源库和框架的源码, 进行一次梳理。首先介...

xeblog 2019-08-21 18:42 评论0 收藏0
JS中数据类型、内置对象、包装类型对象、typeof关系

摘要：平时在复习基础知识时，经常会遇到数据类型基础数据类型内置对象包装类型对象，检测数据类型时，用到的值，感觉都差不多，但是又有差异。值与数据类型关系对比下图，即可知值相较于基础数据类型少多平时在复习JS基础知识时，经常会遇到JS数据类型、基础数据类型、内置对象、包装类型对象，检测数据类型时，用到的typeof值，感觉都差不多，但是又有差异。今天特地整理下，方便理解。 JS数据类型基础数...

OldPanda 2019-08-23 15:28 评论0 收藏0
【js基础】之变量类型和计算

摘要：值类型与引用类型值类型引用类型值类型引用类型类型转换字符串拼接运算符语句逻辑运算字符串拼接运算符语句逻辑运算符判断一个变量会被当做还是区分和会发生类型转换，没有类型转换。 1.数据类型 ECMAScript定义了6种数据类型，包括：基本数据类型：Undefined、Null、Boolean、Number、String；复杂数据类型：Object； 2.typeof操作符 typ...

LiuRhoRamen 2019-08-22 16:43 评论0 收藏0
JS基础 -构造函数与原型、原型链 Part two

摘要：构造函数构造函数名大写即使不写，构造函数也默认返回，最好不写创建实例执行过程变成空对象属性赋值赋值给扩展引用类型都有构造函数本质是的语法糖判断引用类型属于哪个构造函数，例判断逻辑的一层一层向上找，能否对应到原型规则以下所说的引用类型均指对象 1.构造函数： function Foo(name,age){// Foo构造函数名大写 this.name =name; thi...

lucas 2019-08-22 17:18 评论0 收藏0