1. JS堆栈原理

最新推荐文章于 2020-11-10 15:19:36 发布

echone_wenqian

最新推荐文章于 2020-11-10 15:19:36 发布

阅读量470

点赞数 1

分类专栏： JS进阶文章标签： js js堆栈深拷贝浅拷贝

本文链接：https://blog.csdn.net/qq_24729895/article/details/84875395

版权

JS进阶专栏收录该内容

2 篇文章 0 订阅

订阅专栏

现在的随着前端开发者如雨后春笋般的诞生，越来越多的项目落地，JavaScript是我们前端开发中必不可少的一环。今天让我们来了解一下JavaScript中的堆栈原理

明白的堆栈原理之后也可以让我们的代码更加的贴近编译器，更加的明白系统对内存的分配，帮助我们能够更好的管理内存

堆&栈

堆和栈是我们常用的数据结构，还有图，树，链表等，感兴趣的可以读一下数据结构-百度百科
两者都是存放临时数据的地方。

栈
栈是先进后出的，就像一个桶，后进去的先出来，它下面本来有的东西要等其他出来之后才能出来。
堆
堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别。对于堆，我们可以随心所欲的进行增加变量和删除变量，不用遵循次序。

栈区（stack）由编译器自动分配释放，存放函数的参数值，局部变量的值等。
堆区（heap）一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。
堆（数据结构）：堆可以被看成是一棵树，如：堆排序；栈（数据结构）：一种先进后出的数据结构。相反的队列就是一种先进先出的数据结构

数据访问

基本数据类型：基本数据类型值指保存在栈内存中的简单数据段。访问方式是按值访问。
undefined,null,布尔值(Boolean),字符串(String),数值(Number)

var a = 1
var b = a
console.log(a) // 1
console.log(b) // 1
a = 3
console.log(a) // 3
console.log(b) // 1

上面代码实际上是为a在栈中创建了一个值，第二句把一个变量向一个变量复制时，会在栈中创建一个新值，然后把值复制到为新变量分配的位置上。

变量	值
a	1
b	1

重新为a赋值后

变量	值
a	3
b	1

引用数据类型：引用数据类型值指保存在堆内存中的对象。也就是，变量中保存的实际上的只是一个指针，这个指针指向内存中的另一个位置，该位置保存着对象。访问方式是按引用访问。
统称为Object类型，细分的话，有：Object类型，Array类型，Date类型，Function类型等。

var obj = {}
obj.a = 1
var copyObj = obj
console.log(obj) // {a: 1}
obj.a = 2
console.log(obj) // {a: 2}
console.log(copyObj) // {a: 2}

上面的第一句在栈中为obj创建了一个值，并且在堆中为obj分配了一个地址，第三句我们在栈中创建了一个copyObj,此时他的地址也指向了堆中的这个地址，改变obj或者copyObj的属性两者都会发生改变，他们在堆中公用一个内存地址

此时我们是否可以理解堆栈溢出

堆栈溢出

堆栈溢出就是不顾堆栈中分配的局部数据块大小，向该数据块写入了过多的数据，导致数据越界，结果覆盖了别的数据。可以理解为在长字符串中嵌入一段代码，并将过程的返回地址覆盖为这段代码的地址，这样当过程返回时，程序就转而开始执行这段自编的代码了。

就是你的变量定义过多了，占用内存过多了，浏览器或者操作系统已经不能容忍你了

简单的谈下浅拷贝

在定义一个对象或数组时，变量存放的往往只是一个地址。当我们使用对象拷贝时，如果属性是对象或数组时，这时候我们传递的也只是一个地址。因此子对象在访问该属性时，会根据地址回溯到父对象指向的堆内存中，即父子对象发生了关联，两者的属性值会指向同一内存空间。

var a = {
   key1:"11111"
}
function Copy(p) {
   var c = {};
   for (var i in p) { 
   　　c[i] = p[i];
   }
   return c;
}
a.key2 = ['小辉','小辉'];
var b = Copy(a);
b.key3 = '33333';
alert(b.key1); // 1111111
alert(b.key3); // 33333
alert(a.key3); // undefined