Object.seal()與Object.freeze()區別

標題中的兩個方法的功能非常的相似，所以很多朋友不知道如何區分。

下面將結合程式碼演示介紹一下它兩者的區別。

關於兩個方法的基本用法可以參閱如下兩篇文章：

（1）.Object.seal方法參閱JavaScript Object.seal()一章節。

（2）.Object.freeze方法參閱JavaScript Object.freeze()一章節。

方法的相同點：

（1）.ES5新增。

（2）.物件不可能擴充套件，也就是不能再新增新的屬性或者方法。

（3）.物件已有屬性不允許被刪除。

（4）.物件屬性特性不可以重新配置。

方法不同點：

Object.seal方法生成的密封物件，如果屬性是可寫的，那麼可以修改屬性值。

Object.freeze方法生成的凍結物件，屬性都是不可寫的，也就是屬性值無法更改。

關於屬性特性可以參閱configurable、enumerable和writable介紹一章節。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
"use strict"
let antzone = {
  webName:"螞蟻部落",
  url: "http://www.softwhy.com",
  age:6
};
Object.seal(antzone);
antzone.age=5;

程式碼執行效果截圖如下：

新增新屬性會報錯，對於Object.freeze方法也是如此，不再演示。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone = {
  webName:"螞蟻部落",
  url: "http://www.softwhy.com",
  age:6
};
Object.seal(antzone);
console.log(Object.getOwnPropertyDescriptor(antzone,"webName"));

程式碼執行效果截圖如下：

可以看到webName屬性的configurable特性值為false。

對於凍結物件也是如此，下面也不再演示。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
"use strict"
let antzone = {
  webName:"螞蟻部落",
  url: "http://www.softwhy.com",
  age:6
};
Object.freeze(antzone);
antzone.age=5;

程式碼執行效果截圖如下：

在嚴格模式下，修改凍結物件屬性值，會報錯。

非嚴格模式下，雖然不會報錯，但修改屬性值無效。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
"use strict"
let antzone = {
  webName:"螞蟻部落",
  url: "http://www.softwhy.com",
  age:6
};
Object.seal(antzone);
antzone.age=5;
console.log(antzone.age);

程式碼執行效果截圖如下：

密封物件的屬性值是可以修改的，當然前提是，屬性本來就是可寫的。