JS 메모리 수명주기, 스택 메모리와 힙 메모리, JS 시리즈의 깊은 복사와 얕은 복사(2)를 한 장의 종이에 이해

앞부분에 작성: javascript 칼럼 아래에 곧 쓰기 시작할 시리즈입니다. 주로 프레임워크가 만연한 시대에 업무용, 인터뷰용, 기술 발전용으로 프레임워크를 사용하지만, JS의 기본 지식의 기초는 금상첨화이며, 반드시 배워야 하는 지식이기도 합니다. 자동차. 하지만 자동차를 안다면 운전을 더 잘할 수 있습니다. 물론, 기사는 단지 하나의 지식 포인트에 대해서만 이야기하는 것이 아닙니다. 일반적으로 관련된 지식 포인트가 시리즈로 연결되어 자신의 학습을 기록하면서 자신의 학습을 공유하고 서로 격려하게 됩니다! 가능하시다면 좋아요도 부탁드려요, 여러분의 좋아요 덕분에 저도 업데이트하는데 더 힘이 됩니다!

개요

• 식사 시간: 6~12분
• 난이도: 쉬움, 뛰지 말고 다 읽을 때까지 기다리세요

JS 메모리 수명 주기

• 메모리 할당

• 메모리 읽기 및 쓰기

• 메모리 해제

스택 메모리 및 힙 메모리

JS 데이터 유형

스택 메모리와 힙 메모리에 관해 이야기하기 전에 JS가 두 가지 데이터 유형으로 나누어진다는 점을 모두가 알아야 합니다.

• 기본 데이터 유형

  문자열, 숫자, 부울, null, 정의되지 않음, 기호 (고정 크기, 경량, 비교적 단순)

• 참조 데이터 유형

  객체, 배열, 함수 (크기가 확실하지 않음, 차지함) 더 많은 공간) 크고 상대적으로 복잡함)

메모리 저장 메커니즘

var a=true;      //布尔型，基本数据类型var b='jack';    //字符型，基本数据类型var c=18;        //数值型，基本数据类型var d={name:'jack'};   //对象，引用数据类型var d=[0,1,2,3,4,5];   //数组，引用数据类型复制代码

데이터 유형이 다르기 때문에 저장 방법도 다르며 이는 가난한 사람과 부자의 거주지와 완전히 다릅니다. 실생활 (너무 멀리 가고 있어요) ). 먼저 사진을 살펴보겠습니다.

a , b , c 는 모두 기본 데이터 유형임을 알 수 있습니다. d와 e는 모두 참조 데이터 유형입니다. a , b , c 都是基本数据类型， d 和 e 都是引用数据类型，他们在存放方式上有着本质性的区别，基本数据类型的值是存放在栈内存中的，而引用数据类型的值是存放在堆内存中的，栈内存中仅仅存放着它在栈内存中的引用（即它在堆内存中的地址），就和它的名字一样，引用数据类型

内存访问机制

上面讲的是存储，接下来说一下变量的访问，基本数据类型可以直接从栈内存中访问变量的值，而引用数据类型要先从栈内存中找到它对应的引用地址，再拿着这个引用地址，去堆内存中查找，才能拿到变量的值

深浅拷贝

• 浅拷贝

  上面已经和大家说过了基本数据类型与引用数据类型在存储上的不同，那么，接下来说的这个深浅拷贝，想必大家也在面试题中经常碰到，老方式，先来看一段代码

  var name='jack';var obj={  age:24};var nameCopy=name;var objCopy=obj;
  
  nameCopy='bob';
  objCopy.age=15;console.log(name);    //jackconsole.log(obj.age);     //15复制代码

  你会发现， name 是没有被影响的，而我们命名是修改objCopy.age，为什么还会影响到 obj.age呢，这就是因为深浅拷贝的问题在捣鬼，先来看下下面的一张图

之所以会出现这种情况，是因为JS对于基本类型和引用类型的，当我们在复制引用类型的时候，复制的是该对象的引用地址，所以，在执行 var objCopy=obj;的时候，将 obj 的引用地址复制给了 objCopy，所以，这两个对象实际指向的是同一个对象，即改变 objCopy 的同时也改变了 obj 的值，我们将这种情况称为浅拷贝，仅仅复制了对象的引用，并没有开辟新的内存，拿人手短，拷贝地太浅了。（只有引用类型才会出现浅拷贝的情况）

• 深拷贝

  再来看接下来的一段代码

  var name='jack';var obj={  age:24};var nameCopy=name;var objCopy=JSON.parse(JSON.stringify(obj));
  
  nameCopy='bob';
  objCopy.age=15;console.log(name);    //jackconsole.log(obj.age);     //24复制代码

  可以发现,在经过 JSON.parse(JSON.stringify(obj))기본 데이터 유형의 값은 스택 메모리에 저장되지만 참조 데이터는 유형의 값은 힙 메모리에 저장됩니다. 스택 메모리는 이름과 마찬가지로 참조 데이터 유형

  메모리 액세스 메커니즘위는 저장에 관한 것입니다. 다음으로 변수 액세스에 대해 이야기하겠습니다. 기본 데이터 유형은 스택 메모리에서 직접 변수 값에 액세스할 수 있지만 참조 데이터 유형은 먼저 변수에 액세스해야 합니다. 스택에서 해당 참조 주소를 메모리에서 찾은 다음 이 참조 주소를 가져와 힙 메모리에서 검색하여 변수의 값을 가져옵니다

  깊고 얕은 복사🎜 🎜🎜

  Shallow copy🎜🎜위에서 기본 데이터형과 참조 데이터형의 저장 공간 차이에 대해 말씀드렸으니, 다음에 말씀드릴 얕은 복사본은 아마 여러분들이 자주 문의하시는 내용일 텐데요. 인터뷰 질문에서 예전 방식으로 먼저 코드 조각을 살펴보세요🎜

  var objCopy=Object.assign({},obj);   //对象深拷贝的方法 Object.assign
  var arrayCopy=array.concat();       //数组深拷贝的方法  concat()  （数组无嵌套对象或者数组可用）
  var arrayCopy=array.slice();       //数组深拷贝的方法  slice()   （数组无嵌套对象或者数组可用）
  JSON.parse(JSON.stringify(array))     //顺带提下，JSON.parse(JSON.stringify())   数组和对象通用复制代码

  🎜 name은 영향을 받지 않으며 이름은 objCopy.age를 수정하는 것입니다. code>가 여전히 <code>obj.age에 영향을 미치는 이유는 깊고 얕은 복사 문제 때문입니다🎜🎜🎜🎜🎜🎜이유 이는 JS의 기본 유형과 참조 유형의 경우 참조 유형을 복사하면 객체의 참조 주소가 복사되기 때문입니다. 따라서 var objCopy=obj;를 실행하면, obj의 🎜참조 주소🎜가 objCopy에 복사되므로 두 개체는 실제로 동일한 개체를 가리킵니다. 즉, objCopy를 변경할 때 obj의 값도 변경됩니다. 이 상황을 🎜shallow copy🎜라고 합니다. 이는 개체의 참조만 복사하고 새 메모리를 열지 않습니다. 얕은. 🎜(참조 유형에만 얕은 복사본이 있음)🎜🎜🎜🎜

  Deep copy🎜🎜다음 코드 조각을 보세요🎜

  var array = [{name: 'jack'}, ['old']];var arrCopy = array.concat();
  arrCopy[0].name='new';console.log(array); // [{name: 'new'}, ['old']]console.log(arrCopy); // [{name: 'new'}, ['old']]复制代码

  🎜JSON 다음에 찾을 수 있습니다. 구문 분석(JSON.stringify(obj)) 변환 후에는 얕은 복사본이 더 이상 존재하지 않습니다. 이 웨이브는 🎜깊은 복사본🎜입니다. 깊은 복사본은 새 힙 메모리 주소를 열고 새로 열린 개체를 가리킵니다. 이전에 복사한 개체와 완전히 독립된 메모리 주소입니다. 자립적이고 매우 깊이 복사됩니다. 쿵푸를 배우고 자립 기술을 익히는 느낌입니다. 🎜

• 另外实现深拷贝的方法（更多方式请自行百度）

  var objCopy=Object.assign({},obj);   //对象深拷贝的方法 Object.assign
  var arrayCopy=array.concat();       //数组深拷贝的方法  concat()  （数组无嵌套对象或者数组可用）
  var arrayCopy=array.slice();       //数组深拷贝的方法  slice()   （数组无嵌套对象或者数组可用）
  JSON.parse(JSON.stringify(array))     //顺带提下，JSON.parse(JSON.stringify())   数组和对象通用复制代码

  接着上面的数组容易踩坑的地方 ，来看一个例子

  var array = [{name: 'jack'}, ['old']];var arrCopy = array.concat();
  arrCopy[0].name='new';console.log(array); // [{name: 'new'}, ['old']]console.log(arrCopy); // [{name: 'new'}, ['old']]复制代码

  可以清楚地看到(数组无嵌套对象或者数组可用的情况下用 concat 和 slice 才有效)

系列目录

• 一张纸搞懂JS系列（1）之编译原理，作用域，作用域链，变量提升，暂时性死区

• 一张纸搞懂JS系列（2）之JS内存生命周期，栈内存与堆内存，深浅拷贝

• 一张纸搞懂JS系列（3）之垃圾回收机制，内存泄漏，闭包

更多相关免费学习推荐：javascript（视频）

위 내용은 JS 메모리 수명주기, 스택 메모리와 힙 메모리, JS 시리즈의 깊은 복사와 얕은 복사(2)를 한 장의 종이에 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!