Object.freeze() vs const

Object.freeze() vs const

Object.freeze() 사용하기 위한 과도기적인 편리한 방법처럼 보입니다.constES6에서.

둘 다 코드에 포함되는 경우가 있습니까? 아니면 불변 데이터로 작업하는 데 선호되는 방법이 있습니까?

모든 브라우저가 지원되는 순간까지 사용해야 합니까?const그런 다음 사용으로 전환합니다.const대신에?

const그리고.Object.freeze완전히 다른 두 가지입니다.

const바인딩("접두사")에 적용됩니다.변경할 수 없는 바인딩이 생성됩니다. 즉, 바인딩에 새 값을 할당할 수 없습니다.

Object.freeze값, 보다 구체적으로는 객체 값에 대해 작동합니다.개체를 불변으로 만듭니다. 즉, 속성을 변경할 수 없습니다.

ES5에서는Object.freeze원시 요소에서는 작동하지 않으며, 이는 아마도 다음을 사용하여 더 일반적으로 선언될 것입니다.const원시 할 수 ES6에서 원시 요소를 할 수도 있습니다.const.

에 ㅠㅠㅠconst개체가 개체를 "인식"하지 않는다고 선언하는 데 사용되며, 전체 개체를 다시 선언할 수는 없지만 키를 자유롭게 수정할 수 있습니다.반면에 냉동된 개체를 다시 선언할 수 있습니다.

Object.freeze또한 얕기 때문에 중첩된 개체를 보호하려면 개체에 반복적으로 적용해야 합니다.

var ob1 = {
   foo : 1,
    bar : {
        value : 2   
    }
};
Object.freeze( ob1 );

const ob2 = {
   foo : 1,
    bar : {
        value : 2   
    }
}

ob1.foo = 4;  // (frozen) ob1.foo not modified
ob2.foo = 4;  // (const) ob2.foo modified

ob1.bar.value = 4;  // (frozen) modified, because ob1.bar is nested
ob2.bar.value = 4;  // (const) modified

ob1.bar = 4;  // (frozen) not modified, bar is a key of obj1
ob2.bar = 4;  // (const) modified

ob1 = {};  // (frozen) ob1 redeclared
ob2 = {}; // (const) ob2 not redeclared

요약:.

const그리고.Object.freeze()전혀 다른 용도로 쓰입니다.

• const즉시 할당해야 하고 재할당할 수 없는 변수를 선언할 수 있습니다.에 의해 선언된 변수const. 이는 블록 범범아로 . 변수로 선언된 것처럼var
• Object.freeze()개체를 수락하고 동일한 개체를 반환하는 메서드입니다.이제 개체는 해당 속성을 제거하거나 새 속성을 추가할 수 없습니다.

»const:

1예 1을 재할당할 수 : 재당할수없const

const foo = 5;

foo = 6;

는 " 코드다음같를선이변재 foo수할하다고기니때발생오킵시류문를다에음려하당는언과된▁fo▁the▁variable▁with▁the▁declared▁throws▁the"로 선언된 변수 를 재할당하려고 를 발생시킵니다.const키워드, 재할당할 수 없습니다.

2: 예 2: 할 2: 된터데구에 구조const될 수 .

const object = {
  prop1: 1,
  prop2: 2 
}

object.prop1 = 5;   // object is still mutable!
object.prop3 = 3;   // object is still mutable!

console.log(object);  // object is mutated

에서는 " 이예서는사변선수언다니합를여용하음다을"를 합니다.const키워드를 지정하고 개체를 할당합니다.개체라는 변수에 재할당할 수는 없지만 개체 자체를 변형시킬 수는 있습니다.기존 속성을 변경하거나 새 속성을 추가하면 이 기능이 적용됩니다.에 대한 하려면 필한개변비활면려하화성이 합니다.Object.freeze().

예Object.freeze():

예 1: 동결된 개체를 변환할 수 없습니다.

object1 = {
  prop1: 1,
  prop2: 2
}

object2 = Object.freeze(object1);

console.log(object1 === object2); // both objects are refer to the same instance

object2.prop3 = 3; // no new property can be added, won't work

delete object2.prop1; // no property can be deleted, won't work

console.log(object2); // object unchanged

이 예에서는 다음을 호출합니다.Object.freeze()그리고 줍니다.object1인수로 함수는 현재 '비활성화'된 개체를 반환합니다.만약 우리가 새로운 객체의 참조를 오래된 객체와 비교한다면,===연산자 우리는 그들이 같은 물체를 참조하는 것을 관찰할 수 있습니다.또한 속성을 추가하거나 제거하려고 해도 아무런 영향을 미치지 않습니다(엄격 모드에서는 오류가 발생함).

예 2: 참조가 있는 개체가 완전히 고정되지 않았습니다.

const object = {
  prop1: 1,
  nestedObj: {
    nestedProp1: 1,
    nestedProp2: 2,
  } 
}


const frozen = Object.freeze(object);

frozen.prop1 = 5; // won't have any effect
frozen.nestedObj.nestedProp1 = 5; //will update because the nestedObject isn't frozen

console.log(frozen);

이 예제는 중첩된 개체(및 참조 데이터 구조에 의한 다른 개체)의 속성이 여전히 변경 가능하다는 것을 보여줍니다.Object.freeze()참조(예: 참조)인 속성이 있는 개체는 완전히 '슬립'되지 않습니다.배열, 개체).

간단히 말해요.

그들은 다릅니다.코드에 대한 설명을 확인하십시오. 그러면 각 사례가 설명됩니다.

Const 다음과 같은 블록 범위 변수입니다.let재할당할 수 없는 값, 재할당할 수 없습니다.

그것은

{
 const val = 10;  // you can not access it outside this block, block scope variable

}

console.log(val); // undefined because it is block scope 

const constvalue = 1;
constvalue = 2; // will give error as we are re-assigning the value;
const obj = { a:1 , b:2};

obj.a = 3;
obj.c = 4;
console.log(obj); // obj = {a:3,b:2,c:4} we are not assigning the value of identifier we can 
                  // change the object properties, const applied only on value, not with properties
obj = {x:1};     // error you are re-assigning the value of constant obj 
obj.a = 2 ;     // you can add, delete element of object

전체적인 이해는 const가 블록 범위이며 그 값은 재할당되지 않는다는 것입니다.

Object.freeze개체 루트 속성은 변경할 수 없으며 속성을 추가하거나 삭제할 수는 없지만 전체 개체를 다시 할당할 수 있습니다.

var x = Object.freeze({data:1,
    name:{
    firstname:"hero", lastname:"nolast"
    }
});

x.data = 12;  // the object properties can not be change but in const you can do
x.firstname ="adasd"; // you can not add new properties to object but in const you can do

x.name.firstname = "dashdjkha"; // The nested value are changeable 

//The thing you can do in Object.freeze but not in const

x = { a: 1};  // you can reassign the object when it is Object.freeze but const its not allowed

두 가지 면에서 유사한 한 가지는 중첩된 개체가 변경 가능하다는 것입니다.

const obj1 = {nested :{a:10}};
var obj2 =  Object.freeze({nested :{a:10}});

obj1.nested.a = 20; // both statement works
obj2.nested.a = 20;

감사해요.

var obj = {
  a: 1,
  b: 2
};
Object.freeze(obj);
obj.newField = 3; // You can't assign new field , or change current fields

위의 예는 당신의 객체를 완전히 불변하게 만듭니다.

다음 예를 살펴보겠습니다.

const obj = {
  a: 1,
  b: 2
};
obj.a = 13; // You can change a field
obj.newField = 3; // You can assign new field.

그것은 아무런 오류도 주지 않을 것입니다.

하지만 당신이 그렇게 노력한다면.

const obj = {
      a: 1,
      b: 2
    };
obj = {
 t:4
};

"obj is read-only"와 같은 오류를 발생시킵니다.

다른 사용 사례

const obj = {a:1};
var obj = 3;

그것은 던질 것입니다.Duplicate declaration "obj"

또한 Mozilla 문서 설명에 따르면

구성 선언은 값에 대한 읽기 전용 참조를 만듭니다.변수 식별자를 다시 할당할 수 없다는 것만으로, 이 값이 불변이라는 것을 의미하지는 않습니다.

이 예제는 babelj ES6 기능에 따라 작성되었습니다.

언급URL : https://stackoverflow.com/questions/33124058/object-freeze-vs-const