>  기사  >  웹 프론트엔드  >  JavaScript에서 Object.freeze()와 const의 차이점 이해

JavaScript에서 Object.freeze()와 const의 차이점 이해

coldplay.xixi
coldplay.xixi앞으로
2020-09-14 13:34:202480검색

JavaScript에서 Object.freeze()와 const의 차이점 이해

관련 학습 권장 사항: javascript 비디오 튜토리얼

출시 이후 ES6는 JavaScript에 몇 가지 새로운 기능과 방법을 도입했습니다. 이러한 기능은 JavaScript 개발자로서 작업 흐름과 생산성을 더욱 향상시킬 수 있습니다. 이러한 새로운 기능에는 Object.freeze() 메서드와 const가 포함됩니다. Object.freeze() 方法和 const

在少数开发者尤其是新手中,有人认为这两个功能的工作原理是一样的,但NO,它们不是。Object.freeze()const 的工作原理不同。让我来告诉你怎么做!

概况

constObject.freeze() 完全不同。

  • const 的行为就像 let。唯一的区别是,它定义了无法重新分配的变量。const 声明的变量是块范围的,而不是函数范围的,就像用 var 声明的变量一样。
  • Object.freeze() 将一个对象作为参数,并返回与不可变对象相同的对象。这意味着不能添加,删除或更改对象的任何属性。

示例

const

const user = 'Bolaji Ayodeji'user = 'Joe Nash'复制代码

这将引发 Uncaught TypeError,因为我们试图重新分配使用 const 关键字声明的变量 user。这无效。

JavaScript에서 Object.freeze()와 const의 차이점 이해

最初,这将适用于 varlet ,但不适用于 const

const的问题

当使用对象时,使用const仅防止重新分配,而不防止不变性。 (防止更改其属性的能力)

考虑下面的代码。我们已经使用 const 关键字声明了一个变量,并为其分配了一个名为 user 的对象。

const user = {  first_name: 'bolaji',  last_name: 'ayodeji',  email: 'hi@bolajiayodeji.com',  net_worth: 2000}

user.last_name = 'Samson';// 这行得通,user仍然可变!user.net_worth = 983265975975950;// 这也行得通,用户仍然可变且变得富有 :)!console.log(user);  // user被突变复制代码
JavaScript에서 Object.freeze()와 const의 차이점 이해

尽管我们无法重新分配名为object的变量,但是我们仍然可以对对象本身进行突变。

const user = {  user_name: 'bolajiayodeji'}// won't work复制代码
JavaScript에서 Object.freeze()와 const의 차이점 이해

我们绝对希望对象具有无法修改或删除的属性。const 无法做到这一点,这就是 Object.freeze() 拯救我们的地方。

看一下Object.freeze()

要禁用对对象的任何更改,我们需要 Object.freeze()

const user = {  first_name: 'bolaji',  last_name: 'ayodeji',  email: 'hi@bolajiayodeji.com',  net_worth: 2000}Object.freeze(user);

user.last_name = 'Samson';// 这行不通,user仍然是一成不变的!user.net_worth = 983265975975950;// 这也行不通,user仍然是一成不变的,仍然无法使用 :(!console.log(user);  // user is immutated复制代码
JavaScript에서 Object.freeze()와 const의 차이점 이해

具有嵌套属性的对象实际上并未冻结

嗯,Object.freeze() 有点浅显,你需要在嵌套对象上应用它来递归保护它们。

const user = {  first_name: 'bolaji',  last_name: 'ayodeji',  contact: {    email: 'hi@bolajiayodeji.com',    telephone: 08109445504,
  }
}Object.freeze(user);

user.last_name = 'Samson';// 这行不通,user仍然是一成不变的!user.contact.telephone = 07054394926;// 这将起作用,因为嵌套对象未冻结console.log(user);复制代码
JavaScript에서 Object.freeze()와 const의 차이점 이해

因此,当 Object.freeze() 具有嵌套的属性时,它不会完全冻结它。

要完全冻结对象及其嵌套属性,你可以编写自己的库或使用已创建的库,例如Deepfreeze或immutable-js

总结

constObject.freeze() 不同,const 防止重新分配,而 Object.freeze()

몇몇 개발자, 특히 초보자 중에는 이 두 기능이 동일하게 작동한다고 생각하는 사람들도 있지만 그렇지 않습니다. Object.freeze()const는 다르게 작동합니다. 방법을 보여드리겠습니다!

개요

constObject.freeze()는 완전히 다릅니다.

const

rrreee
이렇게 하면 가 발생합니다. <code>const 키워드로 선언된 user 변수를 재할당하려고 했기 때문에 TypeError가 발견되지 않았습니다. 이것은 작동하지 않습니다.
JavaScript에서 Object.freeze()와 const의 차이점 이해

처음에는 var 또는 let에서는 작동하지만 const에서는 작동하지 않습니다.

const 문제

🎜객체를 사용할 때 const를 사용하면 불변성이 아닌 재할당만 방지됩니다. (속성 변경 방지 기능) 🎜🎜아래 코드를 고려해보세요. const 키워드를 사용하여 변수를 선언하고 user라는 개체에 할당했습니다. 🎜rrreeeJavaScript에서 Object.freeze()와 const의 차이점 이해🎜객체라는 변수를 재할당할 수는 없지만 객체 자체를 변경할 수는 있습니다. 🎜rrreeeJavaScript에서 Object.freeze()와 const의 차이점 이해🎜우리는 개체가 수정하거나 삭제할 수 없는 속성을 갖도록 하는 것이 절대적으로 필요합니다. const는 이를 수행할 수 없습니다. Object.freeze()가 우리를 구출하는 곳입니다. 🎜

Object.freeze()를 살펴보세요

🎜객체에 대한 변경 사항을 비활성화하려면 Object.freeze()가 필요합니다. 🎜rrreeeJavaScript에서 Object.freeze()와 const의 차이점 이해

중첩 속성이 있는 객체는 실제로 고정되지 않습니다.

🎜글쎄요, Object.freeze() 약간 얕으므로 중첩된 개체에 적용하여 재귀적으로 보호해야 합니다. 🎜rrreeeJavaScript에서 Object.freeze()와 const의 차이점 이해🎜따라서 Object.freeze()에 중첩된 속성이 있으면 완전히 고정되지는 않습니다. 🎜🎜객체와 중첩된 속성을 완전히 고정하려면 자체 라이브러리를 작성하거나 Deepfreeze 또는 immutable-js와 같이 이미 생성된 라이브러리를 사용할 수 있습니다.🎜

요약

🎜 const는 const가 재할당을 방지하고 Object.freeze()는 성전환을 방지한다는 점에서 Object.freeze()와 다릅니다. 🎜🎜🎜프로그래밍 학습에 대해 더 자세히 알고 싶다면 🎜php training🎜 칼럼을 주목해주세요! 🎜🎜🎜

위 내용은 JavaScript에서 Object.freeze()와 const의 차이점 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.im에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제