堆&栈
堆是堆内存(heap)的简称,栈是栈内存(stack)的简称。
- javascript的基本类型都是直接按值存储在栈中的,每种类型的数据占用的内存空间的大小是确定的,并由系统自动分配和自动释放。这样带来的好处就是,内存可以及时得到回收,相对于堆来说,更加容易管理内存空间。
- javascript中其他类型的数据被称为引用类型的数据 : 如对象(Object)、数组(Array)、函数(Function) …,它们是通过拷贝和new出来的,这样的数据存储于堆中。其实,说存储于堆中,也不太准确,因为,引用类型的数据的地址指针是存储于栈中的,当我们想要访问引用类型的值的时候,需要先从栈中获得对象的地址指针,然后,再通过地址指针找到堆中的所需要的数据。
栈中的基本数据类型
基本数据类型值指保存在栈内存中的简单数据段。访问方式是按值访问。
-
var name = ‘oralinge’
-
更改name的值
name = 123
从1、2中我们可以看出,改变变量的值只操作变量实际保存的值,并不会开辟新的地址。 -
基本类型变量的复制
var b= name;
从一个变量向一个变量复制时,会在栈中创建一个新值,然后把值复制到为新变量分配的位置上。 -
更改变量b的值
b = ‘oralinge’
堆中的引用数据类型
引用数据类型值指保存在堆内存中的对象。也就是,变量中保存的实际上的只是一个指针,这个指针指向内存中的另一个位置,该位置保存着对象。访问方式是按引用访问。
-
指针与地址
如下示例:
var obj = new Object();
存于栈中的指针指向堆内存的引用数据类型 -
键值对
obj.name = ‘oralinge’
-
引用数据类型的复制
var b = obj
引用类型变量的复制,其实复制的是存储在栈中的指针,将指针复制到栈中新变量分配的空间中。这个指针副本和原指针指向存储在堆中的同一个地址。复制操作结束后,两个变量实际上将引用同一个对象。因此,无路不能你在操作哪个变量,使得地址中的值发生改变,另一个变量也会受到影响。 -
命运共同
b.name = ‘我是name’
-
代码示例
var obj = new Object()
obj.name = 'oralinge'
console.log(obj,1)// {name: "oralinge"} 1
var b = obj
console.log(b,2)// {name: "oralinge"} 2
b.name = '我是name'
console.log(b,3)// {name: "我是name"} 3
console.log(obj,4)// {name: "我是name"} 4
深浅拷贝与堆栈
在解释什么是深拷贝和浅拷贝之前,我们先来看一段代码。
var obj = [1, 2, 3, { name: 'oralinge', sex: '男' }];
// 浅拷贝函数
function copy(obj) {
var copyObj = {};
for (var key in obj) {
copyObj[key] = obj[key];
}
return copyObj;
}
var _obj = copy(obj);
console.log(_obj); // [1, 2, 3, { name: 'oralinge', sex: '男' }]
console.log(typeof _obj); // object
// 改变_obj数组的第一项 , 发现对obj没有影响
_obj[0] = 'change'
console.log(obj); // [1, 2, 3, { name: 'oralinge', sex: '男' }];
console.log(_obj); // ['change', 2, 3, { name: 'oralinge', sex: '男' }];
// 改变_obj的name属性,obj的name也会改变
_obj[3].name = 'yang';
console.log(obj); // [1, 2, 3, { name: 'yang', sex: '男' }];
console.log(_obj); // ['change', 2, 3, { name: 'yang', sex: '男' }];
// 只改变数组中的对象
var test = obj[3]
test.name = 'test'
console.log(test) // {name: "test", sex: "男"}
console.log(obj) // [1, 2, 3, { name: 'test', sex: '男' }]
console.log(_obj) // ['change', 2, 3, { name: 'test', sex: '男' }]
如果你能认真阅读上面这段代码,相信你已经明白的差不多了。
所谓的浅拷贝,不过就是只复制第一层对象,但是当对象的属性是引用类型时,实质复制的是其引用(也就是我们前面说的指针),当引用指向的值改变时,另一个也会跟着变化
按照惯例依然用图表示一下上面的代码:
-
深拷贝
为什么要使用深拷贝?
我们希望在改变新的数组(对象)的时候,不改变原数组(对象)。从上面代码示例中能理解,只遍历一层的时候,是无法深拷贝的。即内部嵌套的数组(对象)还是指向了同一地址,改变一个的值会影响另一个。所以,我们必须对他们的每一层进行遍历复制。
从浅拷贝走向深拷贝,中间有一个递归。
- 方法
function deepClone(obj) {
if (Array.isArray(obj)) {
//map有一个参数,为函数。callback 函数会被自动传入三个参数:数组元素(必填),元素索引(非),原数组本身(非)。返回值为数组。
return obj.map(deepClone)
} else if (obj && typeof obj === 'object') {
const cloned = {}
//Object.keys()获取key
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
cloned[key] = deepClone(obj[key])
}
return cloned
} else {
return obj
}
}
以上。