JS 메모리 공간 자세히 알 아 보기

개술
변수 개체 와 메모리 쌓 기

var a = 20;
var b = 'abc';
var c = true;
var d = { m: 20 }

오랫동안 메모리 공간의 개념 이 JS 학습 에서 그리 중요 하지 않다 고 생각 했다.그러나 제 가 고 개 를 돌려 JS 기 초 를 다시 정 리 했 을 때 그들 에 대한 모호 한 인식 으로 인해 많은 것 을 이해 하지 못 했 습 니 다.예 를 들 어 가장 기본 적 인 인용 데이터 유형 과 인용 전달 은 도대체 어떻게 된 일 입 니까?예 를 들 어 얕 은 복사 와 깊 은 복 제 는 어떤 차이 가 있 습 니까?그리고 폐쇄,원형 등등.
그래서 나중에 저 는 JS 에 대한 이해 가 더욱 깊 어 지 려 면 메모리 공간 에 대해 뚜렷 한 인식 을 가 져 야 한 다 는 것 을 알 게 되 었 습 니 다.
창고 와 더미
창고
C/C++와 달리 자 바스 크 립 트 에 서 는 스 택 메모리 와 덤 프 메모 리 를 엄격하게 구분 하지 않 습 니 다.따라서 우 리 는 자 바스 크 립 트 의 모든 데 이 터 를 메모리 에 저장 하 는 것 으로 대충 이해 할 수 있다.그러나 일부 장면 에서 우 리 는 스 택 데이터 구조의 사고방식 을 바탕 으로 처리 해 야 한다.예 를 들 어 자바 스 크 립 트 의 실행 상하 문(실행 상하 문 에 대해 다음 글 에서 정리 할 것 이다).상하 문 을 실행 하여 논리 적 으로 창 고 를 실현 하 였 다.따라서 스 택 데이터 구조의 원리 와 특징 을 이해 하 는 것 이 중요 하 다.
창고 의 액세스 방식 을 간단하게 이해 하려 면 탁구 상 자 를 비교 해서 분석 할 수 있다.아래 그림 왼쪽 과 같다.

탁구 상자 와 창고 비교
이런 탁구 의 보관 방식 은 창고 에서 데 이 터 를 액세스 하 는 방식 과 똑같다.상자 의 맨 꼭대기 층 에 있 는 탁구 5 는 반드시 마지막 에 넣 어야 하지만 가장 먼저 사용 할 수 있다.그리고 우 리 는 밑바닥 의 탁구 1 을 사용 하려 면 위의 4 개의 탁 구 를 꺼 내 탁구 1 을 상자 꼭대기 에 놓 아야 한다.이것 이 바로 창고 공간 이 선진 적 인 후에 나 오고 후진 적 으로 먼저 나 오 는 특징 이다.그림 에서 스 택 공간의 저장 원 리 를 상세 하 게 밝 혔 다.
데 이 터 를 쌓 아 넣 는 방식 은 책장 과 책 과 매우 비슷 하 다.
책 도 책장 에 가지런히 보관 되 어 있 지만 우 리 는 책의 이름 만 알 면 우리 가 원 하 는 책 을 쉽게 꺼 낼 수 있 습 니 다.탁구 상자 에서 탁 구 를 꺼 내지 않 아 도 됩 니 다.위의 모든 탁 구 를 꺼 내야 중간 에 있 는 탁 구 를 찾 을 수 있 습 니 다.예 를 들 어 JSON 형식의 데이터 에서 우리 가 저장 한 key-value 는 무질서 할 수 있 습 니 다.순서 가 다 르 기 때문에 우리 의 사용 에 영향 을 주지 않 습 니 다.우 리 는 책의 이름 에 만 관심 을 가 져 야 합 니 다.
2.변수 대상 과 기본 데이터 형식
JavaScript 의 실행 컨 텍스트 가 생 성 되면 변수 대상 이라는 특수 대상 을 만 듭 니 다(구체 적 으로 다음 글 에서 실행 컨 텍스트 와 함께 정리 합 니 다).JavaScript 의 기본 데이터 형식 은 변수 대상 에 저 장 됩 니 다.
엄격 한 의미 에서 볼 때 변수 대상 도 메모리 에 저장 되 지만 변수 대상 의 특수 한 기능 으로 인해 우 리 는 이 해 를 할 때 이 를 메모리 에 구분 해 야 한다.
기본 데이터 형식 은 모두 간단 한 데이터 세그먼트 이 고 자 바스 크 립 트 에는 5 개의 기본 데이터 형식 이 있 는데 각각 Undefined,Null,Boolean,Number,String 이다.기본 데이터 형식 은 모두 값 에 따라 접근 합 니 다.변수 에 저 장 된 실제 값 을 직접 조작 할 수 있 기 때 문 입 니 다.
3.참조 데이터 형식 과 메모리
다른 언어 와 통 하지 않 습 니 다.JS 의 참조 데이터 형식,예 를 들 어 배열 Array 등 값 의 크기 는 고정 되 지 않 습 니 다.데이터 형식 을 참조 하 는 값 은 메모리 에 저 장 된 대상 입 니 다.JavaScript 는 메모리 의 위 치 를 직접 접근 할 수 없 기 때문에 대상 의 메모리 공간 을 직접 조작 할 수 없습니다.조작 대상 에 서 는 실제 대상 이 아 닌 조작 대상 에 대한 인용 이다.따라서 인용 형식의 값 은 모두 인용 에 따라 접근 합 니 다.이 인용 은 변수 대상 에 저 장 된 주소 로 대충 이해 할 수 있 습 니 다.이 주 소 는 메모리 의 실제 값 과 연 결 됩 니 다.
변수 대상 과 메모리 쌓 기 를 잘 이해 하기 위해 다음 과 같은 예 와 도 해 를 결합 하여 이해 할 수 있 습 니 다.

var a1 = 0;   //     
var a2 = 'this is string'; //     
var a3 = null; //     

var b = { m: 20 }; //   b        ，{m: 20}            
var c = [1, 2, 3]; //   c        ，[1, 2, 3]            

상례 도해
따라서 메모리 에 있 는 참조 데이터 형식 에 접근 하려 면 실제 적 으로 변수 대상 에서 이 대상 의 주소 참조(또는 주소 포인터)를 가 져 온 다음 에 메모리 에서 우리 가 필요 로 하 는 데 이 터 를 가 져 옵 니 다.
JS 의 메모리 공간 을 이해 하면 우 리 는 메모리 공간의 특성 을 빌려 인용 유형의 일부 특징 을 검증 할 수 있다.
전단 면접 에서 우 리 는 종종 이런 비슷 한 문 제 를 만 날 수 있다.

// demo01.js
var a = 20;
var b = a;
b = 30;

//   a     ？
// demo02.js
var m = { a: 10, b: 20 }
var n = m;
n.a = 15;

//   m.a     

변수 대상 의 데이터 가 복사 되 었 을 때 시스템 은 자동 으로 새로운 변수 에 새 값 을 할당 합 니 다.var b=a 가 실 행 된 후에 a 와 b 는 모두 20 과 같 지만 그들 은 사실은 서로 독립 되 고 서로 영향 을 주지 않 는 값 이다.구체 적 인 것 은 그림 과 같다.그래서 우리 가 b 의 값 을 수정 한 후에 a 의 값 은 변 하지 않 을 것 이다.

demo 01 도해
demo 02 에서 우 리 는 var n=m 를 통 해 인용 형식 을 복사 하 는 작업 을 수행 합 니 다.인용 형식의 복사 역시 새로운 변수 에 새로운 값 을 자동 으로 할당 하여 변수 대상 에 저장 합 니 다.그러나 다른 것 은 이 새로운 값 은 인용 형식의 주소 포인터 일 뿐 입 니 다.주소 포인터 가 동시에 서로 독립 되 었 음 에 도 불구 하고 변수 대상 에서 방문 한 구체 적 인 대상 은 실제 적 으로 동일 합 니 다.그림 에서 보 듯 이.
그래서 내 가 n 을 바 꾸 었 을 때 m 도 변화 가 생 겼 다.이것 이 바로 인용 유형의 특성 이다.

데모 02 도해
메모리 의 각 도 를 통 해 이해 하면 훨씬 가 벼 워 지 는 것 같 지 않 습 니까?그 밖 에 우 리 는 이 를 바탕 으로 자바 스 크 립 트 의 실행 문맥,역할 도 메 인 체인,폐쇄,원형 체인 등 중요 한 개념 을 한 걸음 한 걸음 이해 할 수 있다.다른 것 은 제 가 앞으로 의 글 을 천천히 정리 할 테 니 기대 해 주세요.
메모리 공간 관리
자바 스 크 립 트 는 자동 쓰레기 수집 체 제 를 가지 고 있 기 때문에 우 리 는 개발 할 때 메모리 사용 문제 에 관심 을 가지 지 않 아 도 될 것 같 습 니 다.메모리 의 분배 와 회수 가 모두 자동 관 리 를 실현 합 니 다.그러나 제 개발 경험 에 따 르 면 메모리 체 제 를 이해 하 는 것 은 자신 이 쓴 코드 가 실행 과정 에서 무슨 일이 있 었 는 지 명확 하 게 인식 하고 성능 이 더욱 우수한 코드 를 쓰 는 데 도움 이 됩 니 다.그래서 메모리 에 관심 을 갖 는 것 은 매우 중요 한 일이 다.
JavaScript 의 메모리 수명 주기
1.필요 한 메모리 할당
2.할 당 된 메모리 사용(읽 기,쓰기)
3.필요 없 을 때 석방,반환
이해 하기 편리 하도록 우 리 는 간단 한 예 를 사용 하여 이 주 기 를 설명 한다.

var a = 20;  //              
alert(a + 100);  //     
var a = null; //       ，      

첫 번 째 단계 와 두 번 째 단 계 는 자바 스 크 립 트 가 변 수 를 정의 할 때 메모리 분 배 를 완성 한 다 는 것 을 잘 이해 합 니 다.세 번 째 단계 에서 메모리 공간 을 방출 하 는 것 은 우리 가 중점적으로 이해 해 야 할 점 이다.
자 바스 크 립 트 는 자동 쓰레기 수집 메커니즘 이 있 는데 이 자동 쓰레기 수집 메커니즘 의 원 리 는 무엇 입 니까?더 이상 사용 하지 않 는 값 을 찾 아 사용 하 는 메모 리 를 방출 하 는 것 은 간단 하 다.쓰레기 수집 기 는 정 해진 시간 마다 방출 작업 을 한다.
자바 스 크 립 트 에서 가장 많이 사용 되 는 것 은 태그 제거 알고리즘 을 통 해 어떤 대상 이 더 이상 사용 되 지 않 는 지 찾 는 것 입 니 다.따라서 4.567914.사실은 인용 을 방출 하 는 작업 만 했 을 뿐 a 가 원래 대응 하 는 값 을 인용 하지 않 고 실행 환경 에서 벗 어 나 게 합 니 다.이 값 은 다음 쓰레기 수집 기 가 작업 을 수행 할 때 찾 아 방출 됩 니 다.적당 한 시기 에 인용 을 해제 하 는 것 은 페이지 의 더 좋 은 성능 을 얻 기 위 한 중요 한 방식 이다.
국부 작용 역 에서 함수 가 실행 되면 국부 변수 도 존재 할 필요 가 없 기 때문에 쓰레기 수집 기 는 판단 하고 회수 하기 쉽다.그러나 전역 변수 가 언제 메모리 공간 을 자동 으로 방출 해 야 하 는 지 판단 하기 어렵 기 때문에 우리 개발 에 서 는 전역 변 수 를 사용 하지 않 고 성능 문 제 를 확보 해 야 합 니 다.쓰레기 수집 체 제 를 상세 하 게 이해 하려 면 의 4.3 절 을 읽 는 것 을 권장 합 니 다.
이상 은 JS 메모리 공간의 상세 한 내용 입 니 다.JS 메모리 공간 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!