자바 script 에서 Object.freeze()를 어떻게 사용 하 는 지 자세히 알 아 보기

Object.freeze()
Object.freeze()방법 은 대상 을 동결 할 수 있 습 니 다.동 결 된 대상 은 더 이상 수정 할 수 없다.대상 을 동결 하면 이 대상 에 게 새로운 속성 을 추가 할 수 없습니다.기 존 속성 을 삭제 할 수 없습니다.이 대상 의 기 존 속성의 매 거 성,설정 성,쓰기 성,기 존 속성의 값 을 수정 할 수 없습니다.또 한 대상 을 동결 한 후 이 대상 의 원형 도 수정 할 수 없다.freeze()는 들 어 오 는 매개 변수 와 같은 대상 을 되 돌려 줍 니 다.
사용법

const objectExample = {
 prop1: 20,
 prop2: "   "
};

//      ，               
objectExample.prop1 = 100;
console.log(objectExample.prop1)

//     
Object.freeze(objectExample);

objectExample.prop2 = "Alice" //             ，             

console.log(objectExample.prop2);

결실
비 엄격 모드

엄격 한 모드 추가

"use strict";

이상 알림 던 지기 이 속성 은 읽 기 전용 입 니 다.
깊이 동결
주의해 야 할 것 은 동 결 된 대상 이 대상 을 값 으로 하 는 속성 을 가지 고 있다 면 이 대상 들 은 변 경 될 수 있다 는 것 이다.

const theObject = {
 x: 1,
 z: 2,
 y: {
  a: "Hello",
  b: "   "
 }
}

Object.freeze(theObject);

theObject.x = 100
console.log(theObject.x);

theObject.y.a = 'vipbic';
console.log(theObject.y.a);

결실

대상 의 1 층 은 동결 되 었 으 나 2 층 은 동결 되 지 않 았 다.이것 은 우리 가'얕 은 동결'만 실현 했다 는 것 을 의미한다.
동결 대상 의 모든 속성(다른 대상 을 값 으로 저장 하 는 속성 포함)을 통 해 대상 을 변 하지 않 게 하려 면'깊이 동결'을 실행 해 야 합 니 다.즉,재 귀 를 사용 하여 부모 대상 을 동결 하기 전에 하위 대상 을 동결 해 야 합 니 다.
순환 동결

const theObject = {
 x: 1,
 z: 2,
 y: {
  a: "Hello",
  b: "   "
 }
}

const deepFreeze = (obj) => {

 const propNames = Object.getOwnPropertyNames(obj)

 for (const name of propNames) {
  const value = obj[name];

  if (value && typeof value === "object") { 
   deepFreeze(value);
  }
 }

 return Object.freeze(obj);
}

deepFreeze(theObject);
theObject.y.a = 100;
console.log(theObject.y.a );

결실

Vue 에서 Object.freeze 를 사용 합 니 다.
vue 2.0 에서 일반적인 JavaScript 대상 을 Vue 인 스 턴 스 에 전달 할 때 data  이 옵션 을 사용 하면 Vue 가 이 대상 의 모든 속성 을 옮 겨 다 니 며 사용 합 니 다. Object.defineProperty  이 속성 들 을 모두 getter/setter 로 바 꿉 니 다.이 getter/setter 들 은 사용자 에 게 보이 지 않 지만 내부 에 서 는 Vue 추적 을 의존 시 키 고 속성 이 접근 되 고 수정 되 었 을 때 변 화 를 알 립 니 다.
때때로 실제 응용 에서 우 리 는 특정한 대상 이나 배열 을 저장 하 는 데 만 사용 되 고 해당 하 는 보기 에 응답 하 라 고 요구 하지 않 습 니 다.그러나 이 과정 에서 vue 는 object.defineProperty 로 이 배열 을 감청 합 니 다.이것 은 성능 낭비 입 니 다.그래서 우 리 는 Object.freeze 를 사용 하여 데 이 터 를 동결 합 니 다.

<h4 v-for="(item,idx) in items" :key="idx">{{ item.text }}</h4>

data() {
  let data = Object.freeze([{text:'   '},{text:'ipbic'}])
  return {
    msg: '',
    items:data
  }
},
mounted() {

  this.items[0].text = '    '; //       

  this.items = [{ text: 'itnavs' },{ text: '    ' }]; //      

  this.items = Object.freeze([{ text: 'itnavs' },{ text: '    ' }]); //      
},

커 다란 배열 이나 Object 가 있 고 데이터 가 수정 되 지 않 을 것 이 라 고 확신 하면 Object.freeze()를 사용 하면 성능 을 크게 향상 시 킬 수 있 습 니 다.나의 실제 개발 에서 이런 향상 은 약 5~10 배 이 고 배 수 는 데이터 양 에 따라 점점 증가한다.
Object.freeze 를 사용 하여 이러한 자원 의 낭 비 를 피 할 수 있 습 니 다.작 게 보지 말고 무시 하 세 요.반 걸음 을 내 딛 지 않 으 면 천리 에 이 르 지 못 합 니 다.
자 바스 크 립 트 에서 Object.freeze()를 어떻게 사용 하 는 지 에 대한 자세 한 설명 은 여기까지 입 니 다.자 바스 크 립 트 Object.freeze()에 관 한 더 많은 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!