내용으로 건너뛰기
JavaScript에서 객체 확장 봉인, 동결 및 방지

JavaScript에서 객체 확장 봉인, 동결 및 방지

Infragistics Ignite UI for JavaScript를 사용하여 JavaScript에서 객체 확장을 봉인, 고정 및 방지하는 방법을 배우십시오.

5min read

현대 자바스크립트에서 객체는 필수적이며, 더 나은 자바스크립트를 작성하기 위해서는 객체를 둘러싼 주제에 대한 깊은 이해가 필요합니다. JavaScript에서 네 가지 방법으로 객체를 만들 수 있습니다.

객체를 만드는 방법을 알게 되면 객체 속성 디스크립터에 대해 배울 수 있습니다.  요약하자면, 고양이라는 객체가 있다고 가정 해 보겠습니다.

var cat = {
    name: 'foo',
    age: 9
}

각 개체 속성에는 값 이상의 정보가 포함되어 있습니다. 예를 들어, Object.getOwnPropertyDescriptor 메서드를 사용하여 다른 속성 정보를 인쇄할 수 있습니다

console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

콘솔에서 속성 이름이 추가 정보를 제공하는 것을 볼 수 있습니다.

콘솔에서 속성 이름이 추가 정보를 제공하는 것을 볼 수 있습니다

매우 분명한 것처럼 writable이 true로 설정되면 속성 값 등을 다시 쓸 수 있습니다.

지금으로서는 객체 속성 설명자에 대해 알고 있으므로 속성을 읽기 전용으로 만들어야 하는 경우 속성을 writable로 설정합니다.

Object.defineProperty(cat, 'name', { writable: false });

다음으로 JavaScript 객체의 기본 동작을 변경하기 위한 몇 가지 요구 사항을 더 살펴보겠습니다.

  1. 개체가 새 속성을 갖지 못하도록 방지
  2. 요구 사항 1 외에도 구성 가능한 모든 속성을 false로 표시합니다
  3. 요구 사항 2 외에도 모든 속성을 false에 쓸 수 있도록 합니다.

ECMA 6부터 위의 요구 사항을 달성하는 방법이 있습니다. 하나씩 가져 가자.

Object.prevent확장

우리가 말하자면, 당신은 물건이 있습니다 – 고양이 :

var cat = {
    name: 'foo',
    age: 9
}

기본 동작을 사용하면 JavaScript 개체에 속성을 추가할 수 있습니다. 따라서 다음과 같은 작업이 가능합니다.

cat.color = 'black';
console.log(cat.color); // black

기본 동작으로 인해 객체에 속성이 동적으로 추가되지 않도록 하려면 Object.preventExtensions()를 사용해야 합니다. 이 메서드는 개체에 새 속성이 추가되지 않도록 합니다.

Object.preventExtensions(cat);
cat.color = 'black';
console.log(cat.color); // undefined

객체에서 Object.preventExtensions를 사용한 후 새 속성 color를 추가하면 JavaScript에서 이를 무시하고 출력으로 undefined가 됩니다.

JavaScript가 엄격 모드인 경우 확장할 수 없는 개체에 새 속성을 추가하면 오류가 발생합니다.

'use strict'
var cat = {
 
    name: 'foo',
    age: 9
}
 
Object.preventExtensions(cat);
cat.color = 'black';
console.log(cat.color); // error thrown 

엄격 모드에서는 "속성을 추가 할 수 없으며 개체를 확장 할 수 없습니다"라는 매우 명확한 메시지와 함께 오류가 발생합니다.

엄격 모드에서는 "속성을 추가 할 수 없으며 개체를 확장 할 수 없습니다"라는 매우 명확한 메시지와 함께 오류가 발생합니다.

요약하자면, object.preventExtensions 메소드를 사용하여 객체에 새 속성이 추가되지 않도록 해야 합니다.

개체.seal

물체를 봉인하고 싶다고 가정 해 보겠습니다.

  • 새 속성을 추가 할 수 없어야합니다 ( object.preventExtensions () 호출).
  • 구성을 변경할 필요가 없습니다(구성 가능한 속성을 false로 설정).

object.seal() 메서드를 사용하여 개체를 봉인할 수 있습니다.  다시 사물 – 고양이에 대해 생각해 봅시다.

var cat = {
 
    name: 'foo',
    age: 9
}

cat에 새 속성을 추가하지 않고 모든 속성을 구성 할 수 있도록 false로 설정해야합니다. object.seal() 메소드를 사용하여 이 작업을 수행할 수 있습니다.

Object.seal(cat);
cat.color = 'black';
console.log(cat.color); // undefined
console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

sealed 객체가 있기 때문에 출력으로 undefined 및 configurable 가 false 로 설정됩니다.

sealed 객체가 있기 때문에 출력으로 undefined 및 configurable 가 false 로 설정됩니다.

요약하자면, Object.seal()을 사용하여 객체를 봉인해야 합니다. 새 속성을 추가할 수 없으며 configurable 은 false로 설정됩니다.

Object.freeze

객체를 동결하고 싶다고 가정 해 보겠습니다.

  • object.preventExtensions()를 호출하는 것을 의미하는 새 속성을 추가할 수 없어야 합니다.
  • 구성을 변경할 필요가 없습니다(속성을 false로 설정할 수 있음).
  • 모든 속성에 대해 writable을 false로 설정해야 합니다.

Object.freeze() 메서드를 사용하여 객체를 고정할 수 있습니다.  기본적으로 Object.seal() 메서드를 호출하고 writable 속성을 false로 설정합니다.

고양이라는 개체를 생각해 보겠습니다.

var cat = {
    name: 'foo',
    age: 9
}

개체에 새 속성을 추가해서는 안 되며, 모든 속성으로 구성 가능한 속성을 false로 설정하고, 속성의 쓰기 가능을 false로 설정해야 합니다. object.freeze() 메소드를 사용하여 이 작업을 수행할 수 있습니다.

Object.freeze(cat);
cat.age = 10;
cat.color = 'black';
console.log(cat.age); //9
console.log(cat.color); // undefined
console.log(Object.getOwnPropertyDescriptor(cat, 'name'));

객체를 고정했기 때문에 출력으로 undefined, 9 및 configurable and writable이 false로 설정됩니다.

객체를 고정했기 때문에 출력으로 undefined, 9 및 configurable and writable이 false로 설정됩니다.

요약하자면, Object.freeze()를 사용하여 객체를 고정해야 합니다. 객체를 고정하면 새 속성을 추가하거나 속성 값을 다시 쓸 수 없어야 하며 configurable 은 false로 설정됩니다.

요약

JavaScript에서 객체로 작업하는 동안 객체를 만드는 다양한 방법에 대한 충분한 이해가 필요합니다. 속성 설명자, Object.seal, Object.preventExtensions 및 Object.freeze는 매우 필요합니다. 이제 이러한 개념을 더 잘 이해하셨기를 바랍니다.

데모 요청