JS Object.preventExtensions(),Object.seal()與Object.freeze()用法實(shí)例分析
更新時(shí)間：2018年08月25日 15:29:30 作者：煦涵
這篇文章主要介紹了JS Object.preventExtensions(),Object.seal()與Object.freeze()用法,結(jié)合實(shí)例形式分析了javascript控制對(duì)象擴(kuò)展、密封、凍結(jié)等相關(guān)函數(shù)與操作技巧,需要的朋友可以參考下
本文實(shí)例講述了JS Object.preventExtensions(),Object.seal()與Object.freeze()用法。分享給大家供大家參考，具體如下：
一、基本介紹
| Method | Description | Param | Detail |
|---|---|---|---|
| Object.preventExtensions() | 讓一個(gè)對(duì)象變的不可擴(kuò)展，也就是永遠(yuǎn)不能再添加新的屬性 | Object | 詳細(xì) |
| Object.isExtensible() | 判斷一個(gè)對(duì)象是否是可擴(kuò)展 | Object | 詳細(xì) |
| Object.seal() | 讓一個(gè)對(duì)象密封，并返回被密封后的對(duì)象。密封對(duì)象是指那些不能添加新的屬性，不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫(xiě)性，但可能可以修改已有屬性的值的對(duì)象。 | Object | 詳細(xì) |
| Object.isSealed() | 判斷一個(gè)對(duì)象是否是密封的 | Object | 詳細(xì) |
| Object.freeze() | 凍結(jié)一個(gè)對(duì)象并返回被凍結(jié)的對(duì)象。凍結(jié)對(duì)象是指那些不能添加新的屬性，不能修改已有屬性的值，不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫(xiě)性的對(duì)象。也就是說(shuō)，這個(gè)對(duì)象永遠(yuǎn)是不可變的。 | Object | 詳細(xì) |
| Object.isFrozen() | 判斷一個(gè)對(duì)象是否被凍結(jié) | Object | 詳細(xì) |
二、Object.preventExtensions()
Object.preventExtensions 只能阻止一個(gè)對(duì)象不能再添加新的自身屬性，仍然可以為該對(duì)象的原型添加屬性。
2.1 設(shè)置preventExtensions()
var jb51 = {
name: "zuojj"
};
Object.preventExtensions(jb51);
jb51.url = "http://m.fzitv.net";
//Outputs: undefined
console.log(jb51.url);
2.2 嚴(yán)格模式下使用會(huì)報(bào)錯(cuò)
但是在嚴(yán)格模式下會(huì)報(bào)錯(cuò)：
"use strict";
var jb51 = {
name: "zuojj"
};
Object.preventExtensions(jb51);
jb51.url = "http://m.fzitv.net";
//Outputs: Uncaught TypeError: Can't add property url, object is not extensible
console.log(jb51.url);
2.3 不可以擴(kuò)展屬性，但可以更改已存在屬性值
var jb51 = {
name: "zuojj"
};
Object.preventExtensions(jb51);
jb51.url = "http://m.fzitv.net";
//Outputs: Uncaught TypeError: Can't add property url, object is not extensible
console.log(jb51.url);
2.4 不能阻止刪除(delete)現(xiàn)有屬性
var jb51 = {
name: "jb51",
url : "http://m.fzitv.net"
};
Object.preventExtensions(jb51);
delete jb51.url;
//Outputs: {name: "jb51"}
console.log(jb51);
2.5 使用Object.defineProperty方法為一個(gè)不可擴(kuò)展的對(duì)象添加新屬性會(huì)拋出異常
var jb51 = {
name: "jb51"
};
Object.preventExtensions(jb51);
jb51 = Object.defineProperty(jb51, "url", {value: "http://m.fzitv.net" });
//Outputs: Uncaught TypeError: Cannot define property:url, object is not extensible.
console.log(jb51);
2.6 判斷一個(gè)對(duì)象是否可擴(kuò)展
var jb51 = {
name: "jb51",
url : "http://m.fzitv.net"
};
Object.preventExtensions(jb51);
//Outputs: false
console.log(Object.isExtensible(jb51));
2.7 凍結(jié)對(duì)象和密封的對(duì)象都是不可擴(kuò)展對(duì)象
var jb51 = {
name: "jb51"
},
sealed = Object.seal(jb51),
frozen = Object.freeze(jb51);
//Outputs: false false
console.log(Object.isExtensible(sealed), Object.isExtensible(frozen));
三、Object.seal()
3.1 不可以添加屬性，但可以修改屬性值
var jb51 = {
name: "zuojj",
url: "http://m.fzitv.net"
};
Object.seal(jb51),
jb51.sex = "male";
jb51.name = "jb51";
//Outputs: {name: "jb51", url: "http://m.fzitv.net"}
console.log(jb51);
3.2 嚴(yán)格模式下使用會(huì)報(bào)錯(cuò)
3.3 delete不能刪除現(xiàn)有屬性
var jb51 = {
name: "jb51",
url: "http://m.fzitv.net"
};
Object.seal(jb51),
delete jb51.name;
//Outputs: {name: "jb51", url: "http://m.fzitv.net"}
console.log(jb51);
3.4 Object.defineProperty不能擴(kuò)展對(duì)象屬性
var jb51 = {
name: "jb51",
url: "http://m.fzitv.net"
};
Object.seal(jb51);
Object.defineProperty(jb51, "sex", {value: "male"})
//Outputs: Uncaught TypeError: Cannot define property:sex, object is not extensible.
console.log(jb51);
上面說(shuō)到密封對(duì)象不可擴(kuò)展，所以會(huì)報(bào)錯(cuò)
3.5 判斷對(duì)象是否為密封對(duì)象
// 新建的對(duì)象默認(rèn)不是密封的.
var empty = {};
//Outputs: false
console.log(Object.isSealed(empty));
// 空對(duì)象 && 不可擴(kuò)展 === 密封對(duì)象.
Object.preventExtensions(empty);
//Outputs: true
console.log(Object.isSealed(empty));
// 非空對(duì)象 && 不可擴(kuò)展對(duì)象不會(huì)變成密封對(duì)象,因?yàn)槊芊鈱?duì)象的所有自身屬性必須是不可配置的.
var hasProp = { fee: "fie foe fum" };
Object.preventExtensions(hasProp);
//Outputs: false
console.log(Object.isSealed(hasProp));
// 如果把這個(gè)屬性變的不可配置,則這個(gè)對(duì)象也就成了密封對(duì)象.
Object.defineProperty(hasProp, "fee", { configurable: false });
//Outputs: true
console.log(Object.isSealed(hasProp));
console.log("-------------");
// 一個(gè)密封對(duì)象也可以是一個(gè)凍結(jié)對(duì)象,但不是絕對(duì)的.
var s1 = {};
Object.seal(s1);
//Outputs: true
console.log(Object.isFrozen(s1));
var s2 = Object.seal({ p: 3 });
//Outputs: false
console.log(Object.isFrozen(s2)); // 屬性"p"可寫(xiě)
四、Object.freeze()
4.1 不能添加屬性，且不能修改屬性值
var obj = {
name: "jb51",
url: "http://m.fzitv.net"
};
Object.freeze(obj);
obj.sex = "male";
obj.name = "zuojj";
//Outputs: {name: "jb51", url: "http://m.fzitv.net"}
console.log(obj);
4.2 嚴(yán)格模式下使用會(huì)報(bào)錯(cuò)
4.3 delete不能刪除現(xiàn)有屬性
var obj = {
name: "jb51",
url: "http://m.fzitv.net"
};
Object.freeze(obj);
delete obj.name;
//Outputs: {name: "jb51", url: "http://m.fzitv.net"}
console.log(obj);
4.4 判斷對(duì)象是否被凍結(jié)
var obj = {
name: "jb51",
url: "http://m.fzitv.net"
};
Object.freeze(obj);
//Outputs: true
console.log(Object.isFrozen(obj));
五、兼容性
Object.preventExtensions()，Object.isExtensible(),
Object.seal()，Object.isSealed()，
Object.freeze()，Object.isFrozen()方法是ES5規(guī)范的一部分，IE8及以下低版本瀏覽器不支持。Oprea不支持。
感興趣的朋友還可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行上述js代碼。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章給大家介紹了如何使用js實(shí)現(xiàn)高精度加減乘除模板,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的小伙伴可以自己動(dòng)手嘗試一下2023-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁(yè)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕后框架內(nèi)載入不同網(wǎng)頁(yè)的方法,涉及javascript點(diǎn)擊按鈕載入頁(yè)面的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
原生JS實(shí)現(xiàn)不斷變化的標(biāo)簽
這篇文章主要介紹了原生JS實(shí)現(xiàn)不斷變化的標(biāo)簽，可以上下浮動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript數(shù)據(jù)庫(kù)TaffyDB用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫(kù)TaffyDB用法,實(shí)例分析了TaffyDB數(shù)據(jù)庫(kù)的定義、查詢(xún)、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單樣式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Javascript/Jquery——簡(jiǎn)單定時(shí)器的多種實(shí)現(xiàn)方法
本文為大家詳細(xì)介紹下使用Javascript/Jquery實(shí)現(xiàn)簡(jiǎn)單的定時(shí)器，方法有多種，大家可以根據(jù)自己的喜好自由選擇，希望對(duì)大家有所幫助2013-07-07
簡(jiǎn)單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
這篇文章主要介紹了淺析微信掃碼登錄原理(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
這篇文章主要介紹了javascript閉包，閉包（closure）是Javascript語(yǔ)言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下2016-01-01