JavaScript中Object.freeze()與Const之間的區別

時間 2019-11-06

標籤 javascript object.freeze object freeze const 之間區別欄目 JavaScript 简体版

原文原文鏈接

翻譯：瘋狂的技術宅
https://medium.freecodecamp.o...

本文首發微信公衆號：前端先鋒
歡迎關注，天天都給你推送新鮮的前端技術文章javascript

ES6 自發布以來爲 JavaScript 帶來了一些新功能和方法。與 JavaScript 相比，這些功能更好地改善了咱們的工做流程。這些新功能包括 Object.freeze() 方法和 const。前端

一些開發人員尤爲是新手們認爲這兩個功能的工做方式相同，但並非。 Object.freeze() 和 const 的工做方式是不一樣的。java

概述

const和Object.freeze()徹底不一樣。git

const 的行爲相似於 let，惟一的區別是它定義了一個沒法從新分配的變量。由 const 聲明的變量是塊做用域，而不是像 var那樣的函數做用域
Object.freeze() 將一個對象做爲參數，並返回與不可變對象相同的對象。這意味着你不能添加、刪除或更改對象的屬性。

可變對象具備能夠更改的屬性。不可變的對象在建立對象後沒有能夠更改的屬性。

例子：

Const

const user = 'Bolaji Ayodeji'
user = 'Joe Nash'

這將拋出一個 Uncaught TypeError，由於咱們試圖從新給用 const 關鍵字聲明的變量 user 賦值。這是沒用的。程序員

最初，這適用於 var 或 let ，但不適用於constgithub

const的問題

使用對象時，使用 const 僅阻止從新分配，而不是不可變性（可以阻止更改其屬性）。面試

請考慮如下代碼。咱們使用 const 聲明瞭一個變量，併爲它分配了一個名爲 user 的對象。segmentfault

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  email: 'hi@bolajiayodeji.com',
  net_worth: 2000
}
user.last_name = 'Samson';
// this would work, user is still mutable!
user.net_worth = 983265975975950;
// this would work too, user is still mutable and getting rich :)!
console.log(user);  // user is mutated

雖然咱們沒法從新分配這個名爲 object 的變量，但仍然能夠改變對象自己。微信

const user = {
  user_name: 'bolajiayodeji'
}
// won't work

咱們確定但願對象具備沒法修改或刪除的屬性。可是 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';
// this won't work, user is still immutable!
user.net_worth = 983265975975950;
// this won't work too, user is still immutable and still broke :(!
console.log(user);  // user is immutated

實際上具備嵌套屬性的對象並未被凍結

好吧，Object.freeze() 有點膚淺，你須要將它遞歸地應用於嵌套對象來保護它們。

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  contact: {
    email: 'hi@bolajiayodeji.com',
    telephone: 08109445504,
  }
}
Object.freeze(user);
user.last_name = 'Samson';
// this won't work, user is still immutable!
user.contact.telephone = 07054394926;
// this will work because the nested object is not frozen
console.log(user);