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

原文： The differences between Object.freeze() vs Const in JavaScript 
做者： Bolaji Ayodeji
本文經受權翻譯轉載，版權歸原做者全部！

自ES6發佈以來，ES6給JavaScript帶來了一些新特性和方法。對於JavaScript開發者來講，這些特性可以很好地改善了咱們的工做流程以及工做效率，其中的特性就包括 Object.freeze() 方法和 const 。

一些開發人員特別是新手們會認爲這兩個功能的工做方式是同樣的，但其實並非。 讓我來告訴你Object.freeze() 和 const  是如何不一樣的。

綜述

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

• const 的行爲像 let 。它們惟一的區別是， const 定義了一個沒法從新分配的變量。 經過 const 聲明的變量是具備塊級做用域的，而不是像 var 聲明的變量具備函數做用域。
• Object.freeze() 接受一個對象做爲參數，並返回一個相同的不可變的對象。這就意味着咱們不能添加，刪除或更改對象的任何屬性。

可變對象的屬性可以進行更改，而不可變對象在建立對象後不能更改其屬性。

例子

const

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

這個例子會拋出一個Uncaught TypeError，由於咱們正在嘗試從新分配使用const關鍵字聲明的變量user，這樣作是無效的。

這個例子中使用 let 或者 var 聲明是可以正常工做的，可是使用 const 並不能。

const 的問題

使用const聲明的對象僅能阻止其從新分配，可是並不能使其聲明的對象具備不可變性（可以阻止更改其屬性）。

參考如下代碼，咱們使用const關鍵字聲明瞭一個變量，併爲其分配了一個名爲user的對象。

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

儘管咱們沒法從新分配這個名爲 user 的變量，可是咱們仍然能夠改變其對象自己。

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 只是作了層淺凍結，當遇到具備嵌套屬性的對象的時候，咱們須要遞歸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);

所以，當具備嵌套屬性的對象時， Object.freeze()  並不能徹底凍結對象。

要徹底凍結具備嵌套屬性的對象，您能夠編寫本身的庫或使用已有的庫來凍結對象，如Deepfreeze 或 immutable-js

結論

const 和 Object.freeze() 並不一樣， const 是防止變量從新分配，而 Object.freeze() 是使對象具備不可變性。

感謝閱讀，乾杯！