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

monw3c 發布于2019-08-23 17:52 / 1442人閱讀

摘要：一些開發人員特別是新手們會認為這兩個功能的工作方式是一樣的，但其實并不是。的問題使用聲明的對象僅能阻止其重新分配，但是并不能使其聲明的對象具有不可變性能夠阻止更改其屬性。因此，當具有嵌套屬性的對象時，并不能完全凍結對象。

原文：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()?是使對象具有不可變性。

感謝閱讀，干杯！

云服務器 GPU云服務器 javascript與js的區別 java與javascript的區別 js與javascript區別 javascript與java區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104286.html

【譯】如何在 JavaScript 中使用對象的方法

摘要：中的所有對象都來自父的構造函數。不同于數組的原型方法例如和只能被數組實例使用，對象方法直接來自構造函數，并使用對象實例作為參數。這稱為靜態方法。創建對象的鍵值對的嵌套數組。可用于確定對象是否已凍結，并返回布爾值。原文：How To Use Object Methods in JavaScript作者：Tania Rascia譯者：博軒介紹 JavaScript 中，對象是鍵/值 ...

longmon 2019-08-23 17:03 評論0 收藏0
JavaScript中Object.freeze()與Const之間的區別

摘要：與相比，這些功能更好地改善了我們的工作流程。一些開發人員尤其是新手們認為這兩個功能的工作方式相同，但并不是。的行為類似于，唯一的區別是它定義了一個無法重新分配的變量。我們使用聲明了一個變量，并為它分配了一個名為的對象。翻譯：瘋狂的技術宅https://medium.freecodecamp.o... 本文首發微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的前端技術文章 sho...

SQC 2019-08-26 13:47 評論0 收藏0
javascript中對象的常用方法，深克隆和淺克隆以及凍結，擴展，密封三大屬性的區別

摘要：它將返回目標對象。封閉對象方法判斷一個對象是否被密封。為源對象為修改的屬性名或設置，同上方法返回一個給定對象自身可枚舉屬性的鍵值對數組方法返回指定對象上一個自有屬性對應的屬性描述符方法判斷兩個值是否是相同的值。對象作為引用類型，工作中免不了復制對象，下面來看看克隆的方法 Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。淺...

gplane 2019-08-22 15:37 評論0 收藏0
關于ES模塊你必須要知道的一些禁忌(一)

摘要：沒有模塊化的支持，使用開發大型應用將舉步維艱，所以經過大量的實踐，社區制定了一些模塊加載方案，最主要的有運行于瀏覽器的方案和運行于以為代表的服務端的方案。該方法返回被凍結的對象。背景 ES Module是JavaScript在ES2015版本開始提供的語言標準級別的模塊化方案，在此之前JavaScript一直沒有語言級別的模塊化體系。沒有模塊化的支持，使用JavaScript開發大型...

yexiaobai 2019-08-23 14:10 評論0 收藏0
JavaScript 函數式編程導論

摘要：函數式編程導論從屬于筆者的前端入門與工程實踐。函數式編程即是在軟件開發的工程中避免使用共享狀態可變狀態以及副作用。 JavaScript 函數式編程導論從屬于筆者的Web 前端入門與工程實踐。本文很多地方是講解函數式編程的優勢，就筆者個人而言是認可函數式編程具有一定的好處，但是不推崇徹底的函數式編程化，特別是對于復雜應用邏輯的開發。筆者在應用的狀態管理工具中就更傾向于使用MobX而不是...

forrest23 2019-08-20 13:38 評論0 收藏0