programing

동결과 밀봉의 차이

powerit 2023. 9. 10. 12:42
반응형

동결과 밀봉의 차이

방금 자바스크립트 방법에 대해 들었습니다.freeze그리고.seal, 모든 개체를 불변으로 만드는 데 사용할 수 있습니다.

사용 방법에 대한 간단한 예는 다음과 같습니다.

var o1 = {}, o2 = {};
Object.freeze(o2);

o1["a"] = "worked";
o2["a"] = "worked";

alert(o1["a"]);   //prints "worked"
alert(o2["a"]);   //prints "undefined"

사이의 차이점은 무엇입니까?freeze그리고.seal? 성능을 향상시킬 수 있습니까?

Object.seal

  • 밀봉된 객체에서 속성을 추가하거나 제거하는 것을 방지합니다.delete거짓으로 돌아올 것입니다
  • 기존의 모든 속성을 구성할 수 없도록 합니다. 즉, '데이터 설명자'에서 '액세스 또는 설명자'로 변환할 수 없으며(또는 그 반대의 경우), 액세스 또는 설명자의 속성을 전혀 수정할 수 없습니다(데이터 설명자는 변경할 수 있음).writable속성, 그리고 그들의value속성:writeabletrue)입니다.
  • 던질 수 있습니다.TypeError밀봉된 객체 자체의 값을 수정하려고 할 때(가장 일반적으로 엄격한 모드에서)

Object.freeze

  • 정확히 무엇.Object.seal실행합니다.
  • 기존 속성을 수정할 수 없습니다.

어느 쪽도 '깊이'/손주 개체에 영향을 주지 않습니다.예를 들어, 만일obj냉동상태이고,obj.el재할당할 수는 없지만, 값은obj.el예를 들어 수정할 수 있습니다.obj.el.id변경 가능합니다.


성능:

개체를 밀봉하거나 동결하면 브라우저에 따라 개체의 열거 속도에 영향을 줄 수 있습니다.

  • Firefox: 열거 성능에 영향을 주지 않음
  • IE: 열거 성능에 미치는 영향은 미미합니다.
  • Chrome: 밀봉 또는 동결된 개체를 사용할 경우 열거 성능이 더 빠릅니다.
  • Safari: 밀봉 또는 동결된 개체 수가 92% 더 느림(2014년 기준)

테스트: 밀폐된 물체, 냉동된 물체.

이 세 가지 방법을 비교하는 테스트 프로젝트를 작성했습니다.

  • Object.freeze()
  • Object.seal()
  • Object.preventExtensions()

장치 테스트에서는 CRUD 사례를 다룹니다.

  • [C] 새 재산을 추가합니다.
  • [R] 존재하는 재산을 읽다
  • [U] 기존 속성을 수정합니다.
  • [D] 존재하던 재산을 없애다

결과:

enter image description here

MDN에서 언제든지 검색할 수 있습니다. 간단히 말해:

  • Freeze: 개체가 개체가 아닌 한, 정의된 속성을 변경할 수 없음을 의미하는 개체를 불변으로 만듭니다.
  • Seal(씰): 속성 추가를 방지합니다. 그러나 정의된 속성은 여전히 변경할 수 있습니다.

아래 기능들을 비교하고 이 기능들의 차이점을 설명하기 위해 간단한 표를 만들었습니다.

  • Object.freeze()
  • Object.seal()
  • Object.preventExtensions()

table that explains the difference between the above three methods

Object.freeze()기존 객체를 가져와 기본적으로 호출하는 동결 객체를 만듭니다.Object.seal()여기에 모든 "데이터 액세스자" 속성을 다음과 같이 표시합니다.writable:false할 수 하기 입니다 , 이 입니다 의 입니다 의 이

-- Kyle Simpson, You Don't Know JS - This & Object 프로토타입

ECMA스크립트 5에서 Freeze와 Seal의 차이점을 살펴보고 차이점을 명확히 하기 위해 스크립트를 만들었습니다.Frozen은 데이터와 구조를 포함한 불변 개체를 만듭니다.Seal은 지정된 인터페이스의 변경을 방지합니다(추가, 삭제 없음). 그러나 개체를 변형하고 인터페이스의 의미를 다시 정의할 수 있습니다.

function run()
{
    var myObject = function() 
    { 
        this.test = "testing"; 
    }

    //***************************SETUP****************************

    var frozenObj = new myObject();
    var sealedObj = new myObject();

    var allFrozen = Object.freeze(frozenObj);
    var allSealed = Object.seal(sealedObj);
    alert("frozenObj of myObject type now frozen - Property test= " + frozenObj.test);
    alert("sealedObj of myObject type now frozen - Property test= " + sealedObj.test);

    //***************************FROZEN****************************

    frozenObj.addedProperty = "added Property"; //ignores add
    alert("Frozen addedProperty= " + frozenObj.addedProperty);
    delete frozenObj.test; //ignores delete
    alert("Frozen so deleted property still exists= " + frozenObj.test);
    frozenObj.test = "Howdy"; //ignores update
    alert("Frozen ignores update to value= " + frozenObj.test);
    frozenObj.test = function() { return "function"; } //ignores
    alert("Frozen so ignores redefinition of value= " + frozenObj.test);

    alert("Is frozen " + Object.isFrozen(frozenObj));
    alert("Is sealed " + Object.isSealed(frozenObj));
    alert("Is extensible " + Object.isExtensible(frozenObj));

    alert("Cannot unfreeze");
    alert("result of freeze same as the original object: " + (frozenObj === allFrozen).toString());

    alert("Date.now = " + Date.now());

    //***************************SEALED****************************

    sealedObj.addedProperty = "added Property"; //ignores add
    alert("Sealed addedProperty= " + sealedObj.addedProperty);
    sealedObj.test = "Howdy"; //allows update
    alert("Sealed allows update to value unlike frozen= " + sealedObj.test);
    sealedObj.test = function() { return "function"; } //allows
    alert("Sealed allows redefinition of value unlike frozen= " + sealedObj.test);
    delete sealedObj.test; //ignores delete
    alert("Sealed so deleted property still exists= " + sealedObj.test);
    alert("Is frozen " + Object.isFrozen(sealedObj));
    alert("Is sealed " + Object.isSealed(sealedObj));
    alert("Is extensible " + Object.isExtensible(sealedObj));

    alert("Cannot unseal");
    alert("result of seal same as the original object: " + (sealedObj === allSealed).toString());

    alert("Date.now = " + Date.now());
}

조금 늦을 수도 있겠지만,

  • 유사성: 두 개체 모두 확장할 수 없는 개체를 만드는 데 사용됩니다.
  • Difference : Freeze configurable에서 개체의 열거 가능 속성과 쓰기 가능 속성을 다음과 같이 설정합니다.false. Sealed writeable 속성이 다음과 같이 설정되어 있습니다.true나머지 속성들은 거짓입니다.

이제 전체 개체를 동결하는 대신 단일 개체 속성을 강제로 동결할 수 있습니다.다음을 통해 이를 달성할 수 있습니다.Object.defineProperty와 함께writable: false매개 변수로서

var obj = {
    "first": 1,
    "second": 2,
    "third": 3
};
Object.defineProperty(obj, "first", {
    writable: false,
    value: 99
});

예제에서는 에서,obj.first이제 값이 99로 고정되어 있습니다.

저는 이에 대해 오픈 소스 전자책에 썼습니다.개체 제한에 대한 섹션이 있습니다. https://github.com/carltheperson/advanced-js-objects/blob/main/chapters/chapter-3.md#object-restrictions

요약하자면:

다음 표는 제한 계층을 보여 줍니다.

Object.preventExtensions실패 예

const obj = { a: "A", b: "B" }
Object.preventExtensions(obj)

obj.c = "C" // Failure

console.log(obj) // { a: "A", b: "B" }

Object.seal실패 예

const obj = { a: "A", b: "B" }
Object.seal(obj)

delete obj.a // Failure
obj.c = "C" // Failure

console.log(obj) // { a: "A", b: "B" }

Object.freeze실패 예

const obj = { a: "A", b: "B" }
Object.freeze(obj)

delete obj.a // Failure
obj.b = "B2" // Failure
obj.c = "C" // Failure

console.log(obj) // { a: "A", b: "B" }

참고: 코드가 엄격한 모드에서 실행되는지 여부에 따라 "실패" 여부가 달라집니다.

  • 엄격모드 = 오류
  • 엄격한 모드가 아님 = 무음 실패

언급URL : https://stackoverflow.com/questions/21402108/difference-between-freeze-and-seal

반응형