Object.freeze()

admin發表於2018-09-08

freeze翻譯成漢語有凍結的意思,此方法確實名副其實。

此方法能夠凍結一個物件,被凍結物件就如同一個人的銀行賬號被凍結類似,賬號中的金錢不僅能存取,各方面資訊也被禁止修改(由於作者暫未被凍結過銀行賬號,猜測大致如此),Object.freeze方法凍結物件有如下特點:

(1).物件不能被擴充套件,也就是不能新增新的屬性與方法。

(2).物件屬性不能被刪除。

(3).物件屬性值也不能被改變。

(4).物件屬性的可列舉性、可讀寫性與可配置性都不能修改。

更多內容可以參閱JavaScript Object 物件一章節。

ES5新增此方法。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
Object.freeze(obj)

引數解析:

(1).obj:必需,規則要被凍結的物件。

瀏覽器支援:

(1).IE9+瀏覽器支援此方法。

(2).edge瀏覽器支援此方法。

(3).谷歌瀏覽器支援此方法。

(4).火狐瀏覽器支援此方法。

(5).opera瀏覽器支援此方法。

(6).safria瀏覽器支援此方法。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
let obj = {
  webName: "螞蟻部落",
  age:4
};
Object.freeze(obj);
obj.address="青島市南區";

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/08/004857y72ovmdvwdrdygvd.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼已經將obj物件凍結,怎麼還可以擴充套件obj物件呢,為它增加了一個address屬性。

其實並非如此,看如下程式碼例項:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let obj = {
  webName: "螞蟻部落",
  age:4
};
Object.freeze(obj);
obj.address="青島市南區";
console.log(obj.address);

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/08/005013wpxyajex6tumpjmz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到obj物件凍結之後,為它擴充套件屬性雖然沒有報錯,但是並未成功。

如果在嚴格模式下執行擴充套件操作,會報錯,程式碼如下:

[JavaScript] 純文字檢視 複製程式碼執行程式碼
"use strict"
let obj = {
  webName: "螞蟻部落",
  age:4
};
Object.freeze(obj);
obj.address="青島市南區";
console.log(obj.address);

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/08/005051lohjgd1jzege2ja1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[JavaScript] 純文字檢視 複製程式碼
"use strict"
let obj = {
  webName: "螞蟻部落",
  age:4
};
Object.freeze(obj);
delete obj.webName;

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/08/005127npbw4ajpb4pj6ac4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼試圖刪除被凍結物件的一個屬性,結果報錯了。

[JavaScript] 純文字檢視 複製程式碼
"use strict"
let obj = {
  webName: "螞蟻部落",
  age:4
};
Object.freeze(obj);
obj.age=6;

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

a:3:{s:3:\"pic\";s:43:\"portal/201809/08/005210tkqnle5n19jk6ikj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼檢視修改被凍結物件的屬性值,結果報錯。