javaScript中的Object類型

hyuan 發(fā)布于2019-08-26 12:11 / 2862人閱讀

摘要：默認(rèn)為當(dāng)該屬性的為時(shí)，才能被賦值運(yùn)算符改變。可以是任何有效的值數(shù)值，對(duì)象，函數(shù)等。而這些篡改可能會(huì)影響對(duì)象的內(nèi)置屬性或方法，從而導(dǎo)致對(duì)象的正常功能可能無法使用。

屬性描述符

JavaScript提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)，用于描述對(duì)象的值，控制其行為，例如該屬性是否可寫、是否可配置、是否可修改以及是否可枚舉等。這個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)被稱為‘屬性描述符’。
每個(gè)屬性都有自己對(duì)應(yīng)的屬性描述符，保存該屬性的元信息。

{
    value:"前端",
    writable:false,
    enumerable:true,
    configurable:false,
    get:undefined,
    set:undefined
}

對(duì)象里目前存在的屬性描述符有兩種主要形式：數(shù)據(jù)描述符和存取描述符

數(shù)據(jù)描述符

數(shù)據(jù)描述符是一個(gè)具有值的屬性，該值可能是可寫的，也可能不是可寫的。數(shù)據(jù)描述符具有以下可選鍵值：

value：該屬性對(duì)應(yīng)的值，可以是任何有效的JavaScript值(數(shù)值，對(duì)象，函數(shù)等)。默認(rèn)為undefined

writable：當(dāng)該屬性的writable為true時(shí)，value才能被賦值運(yùn)算符改變。默認(rèn)為false

configurable：當(dāng)該屬性的configurable為true時(shí)，該屬性描述符才能夠被改變，同時(shí)該屬性也能從對(duì)應(yīng)的對(duì)象上被刪除，默認(rèn)為false

enumerable：當(dāng)該屬性的enumerable為true時(shí)，該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中，默認(rèn)為false

存取描述符

存取描述符是由getter-setter函數(shù)對(duì)描述的屬性。存取描述符具有以下可選鍵值：

get：給屬性提供getter的方法，如果沒有g(shù)etter則為undefined。當(dāng)訪問該屬性時(shí)，該方法會(huì)被執(zhí)行，方法執(zhí)行時(shí)沒有參數(shù)傳入，但是會(huì)傳入this對(duì)象

set：給屬性提供setter的方法，如果沒有setter則為undefined。當(dāng)屬性值修改時(shí)，觸發(fā)執(zhí)行該方法。該方法將接受唯一參數(shù)，即該屬性新的參數(shù)值。

enumerable：當(dāng)該屬性的enumerable為true時(shí)，該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中，默認(rèn)為false。

獲取屬性描述符

Object.getOwnPropertyDescriptor()方法返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符。

Object.getOwnPropertyDescriptor(obj,prop)

obj：需要查找的目標(biāo)對(duì)象

prop：目標(biāo)對(duì)象內(nèi)屬性名稱(String類型)

返回值：如果指定的屬性存在于對(duì)象上，則返回其屬性描述符對(duì)象，否則返回undefined

var obj={}
obj.attr="前端";

console.log(Object.getOwnPropertyDescriptor(obj,"attr"));

設(shè)置屬性描述符

1.Object.defineProperty()方法為對(duì)象定義新屬性或修改現(xiàn)有屬性，并返回該對(duì)象

Object.defineProperty(obj,prop,descriptor);

obj：要在其上定義屬性的對(duì)象

prop：要定義或修改的屬性的名稱

descriptor：將傳遞給函數(shù)的對(duì)象

返回值：被傳遞給函數(shù)的對(duì)象

2.Object.defineProperties()方法為對(duì)象定義一個(gè)或多個(gè)新屬性或修改現(xiàn)有屬性，并返回該對(duì)象

Object.defineProperties(obj,props)

obj：要在其上定義屬性的對(duì)象

props：要定義其可枚舉屬性或修改的屬性描述符的對(duì)象

返回值：被傳遞給函數(shù)的對(duì)象

屬性描述符的可選鍵值

1.value：表示目標(biāo)屬性對(duì)應(yīng)的值。可以是任何有效的JavaScript值(數(shù)值，對(duì)象，函數(shù)等)。默認(rèn)為undefined

var obj={};
obj.name="張三";

var attr=Object.getOwnPropertyDescriptor(obj,"name");
console.log(attr.value);

Object.defineProperty(obj,"name",{value:"李四"});
console.log(obj.name);

2.writable:Boolean值，表示目標(biāo)屬性的值是否可以被修改。當(dāng)該屬性的writable為true時(shí)，value才能被賦值運(yùn)算符改變。默認(rèn)為false

var obj={};
Object.defineProperty(obj,"attr",{
       value:"前端",
       writable:false
});
console.log(obj.attr);
obj.attr=100;
console.log(obj.attr);

3.configurable:Boolean值，表示目標(biāo)屬性的描述符是否可以修改。當(dāng)該屬性的configurable為true時(shí)，該屬性描述符才能夠被改變，同時(shí)該屬性也能從對(duì)應(yīng)的對(duì)象上被刪除。默認(rèn)為false

var obj=Object.definePropety({},"attr",{
    value:"大前端",
    configurable:false
});

Object.definePropety(obj,"attr",{value:100});
Object.definePropety(obj,"attr",{writable:true});
Object.definePropety(obj,"attr",{enumerable:true});
Object.definePropety(obj,"attr",{configurable:true});

4.enumerable:Boolean值，表示目標(biāo)屬性是否可遍歷。當(dāng)該屬性的enumerable為true時(shí)，該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中。默認(rèn)為false
如果對(duì)象的屬性的enumerable的值為false，以下三種操作取不到該屬性：

for...in語句

Object.keys()方法

JSON.stringify()方法

var obj={};
Object.defineProperty(obj,"attr",{value:"前端",enumerable:false});
for(var key in obj){console.log(key);}
console.log(Object.keys(obj));
console.log(JSON.stringify(obj));

屬性描述符的存取器

對(duì)象的屬性除了可以直接定義以外，還可以使用存取器進(jìn)行定義。其中setter為存值函數(shù)，使用屬性描述符中的set;getter為取值函數(shù)，使用屬性描述符中的get

var obj=Object.defineProperty({},"attr",{
    get:function(){
        return "前端";
    },
    set:function(){
        console.log("setter:"+value);
    }
});

console.log(obj.attr);
obj.attr=100;

JavaScript中除了上述存取器的寫法之外，還提供了以下寫法：

var obj={
    get attr(){
        return "前端";
    },
    set attr(value){
        console.log("setter:"+value);
    }
}

console.log(obj.attr);
obj.attr=100;

防篡改

定義的對(duì)象默認(rèn)在任何時(shí)候、任何位置，無論有意義的還是無意義的都可以修改對(duì)象的屬性或方法。
而這些篡改可能會(huì)影響對(duì)象的內(nèi)置屬性或方法，從而導(dǎo)致對(duì)象的正常功能可能無法使用。
1.禁止擴(kuò)展：禁止為對(duì)象擴(kuò)展新的屬性或方法

var obj={};
Object.preventExtensions(obj);
obj.attr="前端";
console.log(Object.isExtensible(obj));
console.log(obj.attr);

2.密封對(duì)象：禁止擴(kuò)展新的屬性或方法，禁止配置現(xiàn)有的屬性或方法的描述符，僅允許讀寫屬性的值

var sealed={};
Object.seal(sealed);
Object.isSealed(sealed);

Object.isExtensible(sealed);

3.凍結(jié)對(duì)象：禁止對(duì)對(duì)象執(zhí)行任何修改操作

var frozen={1:81};
Object.isFrozen(frozen);
Object.freeze(frozen);
Object.isFrozen(frozen);

Object.isSealed(frozen);
Object.isExtensible(frozen);

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108184.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

hyuan

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

保姆級(jí)教程帶你開發(fā)優(yōu)質(zhì)的Python庫之上篇【建議收藏】

閱讀 1178·2021-09-10 10:51
CSS > 關(guān)于雪碧圖預(yù)處理和后處理方案的討論

閱讀 909·2019-08-30 15:53
[轉(zhuǎn)]用 HTML 和 CSS 來打造一個(gè)自己的「大白(●—●)」

閱讀 2735·2019-08-30 12:50
SEER新網(wǎng)頁錢包UI設(shè)計(jì)第一版開發(fā)完畢

閱讀 986·2019-08-30 11:07
編寫高效的 CSS 選擇器 – CSS魔法

閱讀 1998·2019-08-30 10:50
VSCode debugger for chrome傻瓜“一鍵”配置

閱讀 3607·2019-08-29 18:47
重學(xué)前端學(xué)習(xí)筆記（五）--如何運(yùn)用語義類標(biāo)簽來呈現(xiàn)Wiki網(wǎng)頁？

閱讀 1319·2019-08-29 18:44
移動(dòng)端輪播圖實(shí)現(xiàn)方法（dGun.js）

閱讀 1607·2019-08-29 17:01

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

javaScript中的Object類型

相關(guān)文章

JavaScript 中的強(qiáng)制類型轉(zhuǎn)換

JavaScript中的數(shù)據(jù)類型及其檢測(cè)

**前端面試題 -- JavaScript (一)**

JavaScript的數(shù)據(jù)類型及其檢測(cè)

JavaScript的數(shù)據(jù)類型及其檢測(cè)

JavaScript的數(shù)據(jù)類型及其檢測(cè)

發(fā)表評(píng)論

0條評(píng)論

hyuan

男|高級(jí)講師

TA的文章

保姆級(jí)教程帶你開發(fā)優(yōu)質(zhì)的Python庫之上篇【建議收藏】

CSS > 關(guān)于雪碧圖預(yù)處理和后處理方案的討論

[轉(zhuǎn)]用 HTML 和 CSS 來打造一個(gè)自己的「大白(●—●)」

SEER新網(wǎng)頁錢包UI設(shè)計(jì)第一版開發(fā)完畢

編寫高效的 CSS 選擇器 – CSS魔法

VSCode debugger for chrome傻瓜“一鍵”配置

重學(xué)前端學(xué)習(xí)筆記（五）--如何運(yùn)用語義類標(biāo)簽來呈現(xiàn)Wiki網(wǎng)頁？

移動(dòng)端輪播圖實(shí)現(xiàn)方法（dGun.js）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

javaScript中的Object類型

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！