JavaScript에서 객체를 동결하는 방법: Object.동결(), 객체.seal () & 추가

JavaScript에서는 객체를 고정하고 변경하지 않도록 할 수 있습니다.이 강좌는 당신에게 어떻게 이 점을 할 수 있는지 보여 줄 것입니다.object를 사용하여 JavaScript에서 객체를 동결하는 방법을 학습합니다.동결(), 물체로 밀봉.()를 밀봉하여 확장을 방지합니다.

반대, 반대하다seal () 방법
JavaScript에서 객체를 동결하려면 두 가지 옵션이 있습니다.첫 번째 옵션의 제한성은 두 번째 옵션보다 작다.이 옵션은 사용 방법Object.seal()과 관련이 있습니다.이 방법은 모든 사람이 대상의 기존 속성을 추가하거나 삭제하거나 재구성하는 것을 방지하는 데 도움이 된다.
JavaScript는 변경property flags을 통해 객체의 모든 기존 속성을 구성할 수 없음으로 표시합니다.이것 또한 대상을 밀봉할 때 이 표지들을 다시 변경할 수 없다는 것을 의미한다.이것이 바로 '기존 속성 재구성' 이라는 뜻입니다. 즉, 속성 표지를 수정하는 것입니다.
밀봉 대상은 대상에 존재하는 속성을 변경할 수 있습니다.밀봉하면 쓰기 가능한 표지가 바뀌지 않기 때문이다.따라서 writable 로고의 값을 변경하지 않으면 기존 속성을 수정할 수 있습니다.문법에 관하여.Object.seal()의 문법은 매우 간단하다.
특정한 대상을 밀봉하고 싶을 때, 이 대상을 매개 변수로 Object.seal() 방법에 전달할 수 있습니다.그리고 이 방법은 새로운 밀봉 대상을 되돌려준다.한 가지 일이 있습니다.Object.seal() 밀봉 대상을 사용할 때 되돌아오는 밀봉 대상을 다른 변수에 분배할 필요가 없다.
이렇게 하면 밀봉된 새 대상을 만들고 새 변수에 분배합니다.그러나 그것도 밀봉하여 Object.seal()의 원시 대상에게 전달된다.그래서 당신은 지금 두 개의 밀봉 대상, 하나의 원본과 하나의 사본을 가지고 있을 것이다.

// Create new object:
const myObj = {
  name: 'Joe Doe',
  age: 37
}

// Seal the "myObj" object:
Object.seal(myObj)

// Check if object is extensible:
console.log(Object.isExtensible(myObj))
// Output:
// false

// Check if object is frozen:
console.log(Object.isFrozen(myObj))
// Output:
// false

// NOTE: This will work.
// Try to change the value of "name" property:
myObj.name = 'Jack Pain'

// NOTE: This will not work.
// Try to add new properties:
myObj.occupation = 'Secret agent'
myObj.undercover = true

// NOTE: This will also not work.
// Try to remove "age" property:
delete myObj.age

// Log the "myObj" object:
console.log(myObj)
// Output:
// {
//   name: 'Jack Pain', // <= Only value of "name" prop has changed.
//   age: 37
// }


// Assigning sealed object to new variable (not necessary):
const myObj = {
  name: 'Joe Doe',
  age: 37
}

// Seal the "myObj" object and assign it to new variable:
const myObjSealed = Object.seal(myObj)

// Check if object is extensible:
console.log(Object.isExtensible(myObjSealed))
// Output:
// false

// Check if object is frozen:
console.log(Object.isFrozen(myObjSealed))
// Output:
// false

// Try to change the value of "age" in both objects:
myObj.age = 45
myObjSealed.age = 45

// Try to add new properties to both objects:
myObj.height = '90 kg'
myObjSealed.height = '90 kg'

// Try to remove "age" property:
delete myObj.age
delete myObjSealed.age

// Log the "myObj" object:
console.log(myObj)
// Output:
// {
//   name: 'Joe Doe',
//   age: 45
// }

// Log the "myObjSealed" object:
console.log(myObjSealed)
// Output:
// {
//   name: 'Joe Doe',
//   age: 45
// }

반대, 반대하다freeze () 방법Object.freeze()는 두 번째 옵션으로 더욱 제한적이다.밀봉 대상은 기존 속성을 변경할 수 있지만, 그것들의 값 Object.freeze() 은 이렇게 하는 것을 금지합니다.Object.freeze()를 사용하여 객체를 동결하면 객체가 최종적으로 잠깁니다.새 속성을 추가하거나 기존 속성을 삭제하거나 수정할 수 없습니다.
이외에도 Object.freeze() 방법은 누구의 변경도 방지한다object prototype.이 방법의 문법과 사용 방법은 Object.seal()와 유사하다.유일한 차이점은 seal() 방법을 freeze()로 바꾸고 결과를 얻는 것이다.Object.freeze()와 Object.seal()가 공유하는 또 다른 일은 귀환할 동결 대상이 변수에 분배되지 않아도 된다는 것이다.Object.freeze() 방법을 사용하면 원래 객체가 동결됩니다.되돌아오는 대상을 변수에 분배하면 최종적으로 두 개의 동결된 대상만 얻을 수 있다.

// Create new object:
const myObj = {
  title: 'Functional Programming in JavaScript',
  author: 'Luis Atencio'
}

// Freeze the "myObj" object:
Object.freeze(myObj)

// Check if object is frozen:
console.log(Object.isFrozen(myObj))
// Output:
// true

// NOTE: This will not work.
// Try to change the value of "title" property:
myObj.title = 'Functional Programming in JavaScript: How to improve your JavaScript programs using functional techniques'

// NOTE: This will not work.
// Try to add new properties:
myObj.language = 'English'
myObj.format = 'Paperback'

// NOTE: This will also not work.
// Try to remove "author" property:
delete myObj.author

// Log the "myObj" object:
console.log(myObj)
// Output:
// {
//   title: 'Functional Programming in JavaScript',
//   author: 'Luis Atencio'
// }


// Assigning frozen object to new variable (not necessary):
const myObj = {
  title: 'Functional Programming in JavaScript',
  author: 'Luis Atencio'
}

// Freeze the "myObj" object and assign it to new variable:
const myObjFrozen = Object.freeze(myObj)

// Check if object is frozen:
console.log(Object.isFrozen(myObjFrozen))
// Output:
// true

// Try to change the value of "age" in both objects:
myObj.title = 'Functional Programming in JavaScript: How to improve your JavaScript programs using functional techniques'
myObjFrozen.title = 'Functional Programming in JavaScript: How to improve your JavaScript programs using functional techniques'

// Try to add new properties to both objects:
myObj.format = 'Paperback'
myObjFrozen.format = 'Paperback'

// Try to remove "author" property:
delete myObj.author
delete myObjFrozen.author

// Log the "myObj" object:
console.log(myObj)
// Output:
// {
//   title: 'Functional Programming in JavaScript',
//   author: 'Luis Atencio'
// }

// Log the "myObjFrozen" object:
console.log(myObjFrozen)
// Output:
// {
//   title: 'Functional Programming in JavaScript',
//   author: 'Luis Atencio'
// }

반대, 반대하다preventExtensions () 방법
대상을 밀봉하고 동결하는 것은 대상에 대한 조작을 제한하는 유일한 선택이 아니다.또 다른 방법은 사용할 수 있다Object.preventExtensions().이 메서드는 객체에 새 속성을 추가하는 것을 방지하는 역할을 합니다.즉, 대상의 원형에 속성을 추가할 수 있습니다.Object.preventExtensions()도 기존 속성을 삭제하는 것을 막지 않습니다.이 방법을 사용하는 방법은 앞의 두 가지 방법과 같다.확장을 방지할 대상을 전달하고 매개 변수로 이 방법에 전달합니다.신축할 수 없는 새 객체가 반환됩니다.
이전 두 가지 방법과 유사합니다. 이 되돌아오는 대상을 변수에 분배할 필요가 없습니다.Object.preventExtensions() 방법은 매개 변수로 전달되는 원시 대상으로 수정될 것이다.만약 네가 그것을 분배한다면, 너는 하나가 아니라 당길 수 없는 두 개의 물체를 얻을 수 있을 것이다.

// Create new object:
const myObj = {
  language: 'English',
  ethnicity: 'Anglo-Saxons'
}

// Prevent "myObj" from being extended:
Object.preventExtensions(myObj)

// Check if object is extensible:
console.log(Object.isExtensible(myObj))
// Output:
// false

// Try to change the value of existing properties:
myObj.language = 'Italian'
myObj.ethnicity = 'Italians'

// Try to add new property:
myObj.languageFamily = 'Indo-European'

// Try to remove "ethnicity" property:
delete myObj.ethnicity

// Log the "myObj" object:
console.log(myObj)
// Output:
// {
//  language: 'Italian' // <= "ethnicity" has been deleted,
//                      // but no property has been added
// }


// Assigning frozen object to new variable (not necessary):
const myObj = {
  language: 'JavaScript',
  type: 'high-level'
}

// Prevent "myObj" from being extended
// and assign it to new variable:
const myObjInextensible = Object.preventExtensions(myObj)

// Check if object is extensible:
console.log(Object.isExtensible(myObj))
// Output:
// false

// Check if object is extensible:
console.log(Object.isExtensible(myObjInextensible))
// Output:
// false

// Try to add new property:
myObj.author = 'Brendan Eich'
myObjInextensible.author = 'Brendan Eich'

// Try to remove property:
delete myObj.type
delete myObjInextensible.type

// Log the "myObj" object:
console.log(myObj)
// Output:
// { language: 'JavaScript' }

// Log the "myObj" object:
console.log(myObjInextensible)
// Output:
// { language: 'JavaScript' }

심동물체Object.freeze() 방법은 동결 대상을 허용한다.Object.seal()와 Object.preventExtensions()는 일부 동결 대상을 허용한다.함정이 있다는 얘기다.이 모든 방법은 얕은 동결만 실행합니다.이러한 방법은 객체 자체만 동결합니다.
만약 대상의 속성도 대상이라면, 이것은 충분하지 않다.이 경우 내부 또는 내포된 객체는 동결되지 않습니다.우리가 오늘 토론한 두 가지 방법은 모두 이 내부 대상들에게 아무런 영향을 미치지 않을 것이다.이것도 수조로서의 속성에 적용된다.
이 문제를 해결하는 방법의 하나는 사용recursion이다.너는 함수를 만들 수 있다.이 함수는 대상을 가져오고 Object.freeze() 방법으로 동결된 대상을 되돌려줍니다.이 함수에서, 대상의 모든 값을 교체하고, 대상이 맞는지 확인합니다.만약 그렇다면, 이 값의 함수를 호출할 것입니다.

// Create object for testing:
const myObj = {
  name: 'Joe',
  age: 29,
  profession: {
    title: 'Programmer',
    experience: 'senior'
  }
}

// Create function for deep freezing:
const deepFreeze = obj => {
  // Iterate over all values of provided object:
  Object.values(obj).forEach(value => {
    // Check if each value is an object:
    if (typeof value === 'object' && !Object.isFrozen(value)) {
      // If it is and if it is not frozen
      // call deepFreeze function on it:
      deepFreeze(value)
    }
  })

  // Return provided object as frozen:
  return Object.freeze(obj)
}

// Deep freeze the object:
deepFreeze(myObj)

// Check if the object itself is extensible:
console.log(Object.isExtensible(myObj))
// Output:
// false

// Check if the "inner" object is extensible:
console.log(Object.isExtensible(myObj.profession))
// Output:
// false

// Try to change properties of the object:
myObj.name = 'Jack'

// Try to change properties of the "inner" object:
myObj.profession.title = 'DevOps architect'
myObj.profession.experience = 'junior'

// Log the "myObj" object:
console.log(myObj)
// Output:
// {
//   name: 'Joe',
//   age: 29,
//   profession: { // This "inner" object is remained unchanged.
//     title: 'Programmer',
//     experience: 'senior'
//   }
// }

해동
지금은 나쁜 소식이다.JavaScript에서 객체를 동결할 때는 Object.freeze() 방법을 사용하여 동결을 해제할 수 없습니다.물체를 동결하는 것이 최후의 해결 방법이다.이것은 역전할 수 없는 것이다.객체가 동결되면 동결해제하거나 수정할 수 없습니다.이것은 너무 지나쳐 보일 수도 있지만, 이것은 대상이 떠날 때 변하지 않도록 확보하는 가장 좋은 방법이다.

동결 대상 및 엄격 모드
JavaScript에는 사용할 수 있는 두 가지 JavaScript 변형이 있습니다.하나는 sloppy mode입니다.다른 하나는 strict mode입니다.Sloppy 모드는 JavaScript의 일반 모드입니다.기본적으로 이것은 당신과 함께 일합니다.이 두 가지 차이점 중 하나는 sloppy 모드가 이상을 일으키지 않는 상황에서 일부 조작을 실행하여 오류를 표시할 수 있도록 하는 것이다.
그 중 하나는 동결 대상을 사용하여 조작하는 것이다.동결된 물체로 경솔한 패턴에서 금지된 일을 하려고 시도할 때 아무 일도 일어나지 않는다.원하는 변경 사항이 발생하거나 오류가 발생하지 않습니다.그것은 묵묵히 실패할 것이다.엄격한 모드로 전환하면 이런 상황이 발생하지 않는다.
고정된 객체의 등록 정보를 사용하여 작업을 수행하려고 하면 JavaScript에서 예외가 발생합니다.이 예외는 몇 가지TypeError인데, 구체적으로 네가 무엇을 하고 싶은지에 달려 있다.JavaScript에서 이러한 예외를 제거하려면 추가'use strict' 문을 사용하여 엄격한 모드로 전환할 수 있습니다.

// Use strict mode:
'use strict';

// Create an object:
const myObj = {
  title: 'Functional Programming in JavaScript',
  author: 'Luis Atencio'
}

// Freeze the "myObj" object:
Object.freeze(myObj)

// Try to change the value of "title" property:
myObj.title = 'Functional Programming in JavaScript: How to improve your JavaScript programs using functional techniques'
// Output:
// TypeError: Cannot assign to read only property 'title' of object '#<Object>'

// Try to add new properties:
myObj.language = 'English'
myObj.format = 'Paperback'
// Output:
// TypeError: Cannot add property language, object is not extensible

// Try to remove "author" property:
delete myObj.author
// Output:
// TypeError: Cannot delete property 'author' of #<Object>

요약: JavaScript에서 객체를 동결하는 방법
JavaScript의 객체를 완전히 또는 부분적으로 동결하는 것은 매우 쉽습니다.새 속성을 추가하면 대상이 확장만 되는 것을 쉽게 방지할 수 있습니다.비트 코드를 사용하면 동결된 대상이 깊이 동결되었는지 확인할 수 있다.나는 이 강좌가 당신이 이 모든 일을 어떻게 하는지 이해하는 데 도움을 줄 수 있기를 바랍니다.