Object?.define?Property()

Object.defineProperty(obj, prop, descriptor)

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

prop:要定義或修改的屬性的名稱隐岛。

descriptor:將被定義或修改的屬性描述符。

返回值:傳入函數(shù)的對(duì)象。即第一個(gè)參數(shù)obj

給對(duì)象的屬性添加特性描述,目前提供兩種形式:數(shù)據(jù)描述和存取器描述勤篮。

兼容性
在ie8下只能在DOM對(duì)象上使用,嘗試在原生的對(duì)象使用 Object.defineProperty()會(huì)報(bào)錯(cuò)色罚。

數(shù)據(jù)描述
當(dāng)修改或定義對(duì)象的某個(gè)屬性的時(shí)候碰缔,給這個(gè)屬性添加一些特性:

var obj = {
    test:"hello"
}
//對(duì)象已有的屬性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意類型的值,
    writable:true | false
});
//對(duì)象新添加的屬性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意類型的值,
    writable:true | false
});
數(shù)據(jù)描述中的屬性都是可選的,來看一下設(shè)置每一個(gè)屬性的作用戳护。

value
屬性對(duì)應(yīng)的值,可以使任意類型的值金抡,默認(rèn)為undefined

var obj = {}
//第一種情況:不設(shè)置value屬性
Object.defineProperty(obj,"newKey",{

});
console.log( obj.newKey );  //undefined
------------------------------
//第二種情況:設(shè)置value屬性
Object.defineProperty(obj,"newKey",{
    value:"hello"
});
console.log( obj.newKey );  //hello

writable
屬性的值是否可以被重寫。設(shè)置為true可以被重寫腌且;設(shè)置為false梗肝,不能被重寫。默認(rèn)為false铺董。

var obj = {}
//第一種情況:writable設(shè)置為false巫击,不能重寫。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //hello

//第二種情況:writable設(shè)置為true柄粹,可以重寫
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //change value

enumerable
此屬性是否可以被枚舉(使用for...in或Object.keys())喘鸟。設(shè)置為true可以被枚舉;設(shè)置為false驻右,不能被枚舉。默認(rèn)為false崎淳。

var obj = {}
//第一種情況:enumerable設(shè)置為false堪夭,不能被枚舉。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false
});

//枚舉對(duì)象的屬性
for( var attr in obj ){
    console.log( attr );  
}
//第二種情況:enumerable設(shè)置為true拣凹,可以被枚舉森爽。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true
});

//枚舉對(duì)象的屬性
for( var attr in obj ){
    console.log( attr );  //newKey
}

configurable
是否可以刪除目標(biāo)屬性或是否可以再次修改屬性的特性(writable, configurable, enumerable)。設(shè)置為true可以被刪除或可以重新設(shè)置特性嚣镜;設(shè)置為false爬迟,不能被可以被刪除或不可以重新設(shè)置特性。默認(rèn)為false菊匿。

這個(gè)屬性起到兩個(gè)作用:

目標(biāo)屬性是否可以使用delete刪除

目標(biāo)屬性是否可以再次設(shè)置特性

//-----------------測(cè)試目標(biāo)屬性是否能被刪除------------------------

var obj = {}
//第一種情況:configurable設(shè)置為false付呕,不能被刪除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
//刪除屬性
delete obj.newKey;
console.log( obj.newKey ); //hello

//第二種情況:configurable設(shè)置為true跌捆,可以被刪除徽职。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
//刪除屬性
delete obj.newKey;
console.log( obj.newKey ); //undefined

//-----------------測(cè)試是否可以再次修改特性------------------------

var obj = {}
//第一種情況:configurable設(shè)置為false,不能再次修改特性佩厚。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //報(bào)錯(cuò):Uncaught TypeError: Cannot redefine property: newKey

//第二種情況:configurable設(shè)置為true姆钉,可以再次修改特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //hello
除了可以給新定義的屬性設(shè)置特性,也可以給已有的屬性設(shè)置特性
//定義對(duì)象的時(shí)候添加的屬性潮瓶,是可刪除陶冷、可重寫、可枚舉的毯辅。
var obj = {
    test:"hello"
}

//改寫值
obj.test = 'change value';

console.log( obj.test ); //'change value'

Object.defineProperty(obj,"test",{
    writable:false
})


//再次改寫值
obj.test = 'change value again';

console.log( obj.test ); //依然是:'change value'

提示:一旦使用Object.defineProperty給對(duì)象添加屬性莺褒,那么如果不設(shè)置屬性的特性名党,那么configurable、enumerable、writable這些值都為默認(rèn)的false

var obj = {};
//定義的新屬性后肤京,這個(gè)屬性的特性中configurable,enumerable寓调,writable都為默認(rèn)的值false
//這就導(dǎo)致了neykey這個(gè)是不能重寫豆混、不能枚舉、不能再次設(shè)置特性
//
Object.defineProperty(obj,'newKey',{

});

//設(shè)置值
obj.newKey = 'hello';
console.log(obj.newKey);  //undefined

//枚舉
for( var attr in obj ){
    console.log(attr);
}

設(shè)置的特性總結(jié):

value: 設(shè)置屬性的值
writable: 值是否可以重寫嗜逻。true | false
enumerable: 目標(biāo)屬性是否可以被枚舉涩僻。true | false
configurable: 目標(biāo)屬性是否可以被刪除或是否可以再次修改特性 true | false

當(dāng)設(shè)置或獲取對(duì)象的某個(gè)屬性的值的時(shí)候,可以提供getter/setter方法栈顷。

getter 是一種獲得屬性值的方法

setter是一種設(shè)置屬性值的方法逆日。

在特性中使用get/set屬性來定義對(duì)應(yīng)的方法。

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    get:function (){
        //當(dāng)獲取值的時(shí)候觸發(fā)的函數(shù)
        return initValue;    
    },
    set:function (value){
        //當(dāng)設(shè)置值的時(shí)候觸發(fā)的函數(shù),設(shè)置的新值通過參數(shù)value拿到
        initValue = value;
    }
});
//獲取值
console.log( obj.newKey );  //hello

//設(shè)置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

注意:get或set不是必須成對(duì)出現(xiàn)萄凤,任寫其一就可以室抽。如果不設(shè)置方法,則get和set的默認(rèn)值為undefined

get:
一個(gè)給屬性提供 getter 的方法靡努,如果沒有 getter 則為 undefined坪圾。當(dāng)訪問該屬性時(shí),該方法會(huì)被執(zhí)行惑朦,方法執(zhí)行時(shí)沒有參數(shù)傳入兽泄,但是會(huì)傳入this對(duì)象(由于繼承關(guān)系,這里的this并不一定是定義該屬性的對(duì)象)漾月。
默認(rèn)為 undefined病梢。

set:
一個(gè)給屬性提供 setter 的方法,如果沒有 setter 則為 undefined梁肿。當(dāng)屬性值修改時(shí)蜓陌,觸發(fā)執(zhí)行該方法。該方法將接受唯一參數(shù)栈雳,即該屬性新的參數(shù)值护奈。
默認(rèn)為 undefined

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末哥纫,一起剝皮案震驚了整個(gè)濱河市霉旗,隨后出現(xiàn)的幾起案子痴奏,更是在濱河造成了極大的恐慌,老刑警劉巖厌秒,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件读拆,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡鸵闪,警方通過查閱死者的電腦和手機(jī)檐晕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蚌讼,“玉大人辟灰,你說我怎么就攤上這事〈凼” “怎么了芥喇?”我有些...
    開封第一講書人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)凰萨。 經(jīng)常有香客問我继控,道長(zhǎng),這世上最難降的妖魔是什么胖眷? 我笑而不...
    開封第一講書人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任武通,我火速辦了婚禮,結(jié)果婚禮上珊搀,老公的妹妹穿的比我還像新娘冶忱。我一直安慰自己,他們只是感情好境析,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開白布朗和。 她就那樣靜靜地躺著,像睡著了一般簿晓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上千埃,一...
    開封第一講書人閱讀 51,482評(píng)論 1 302
  • 那天憔儿,我揣著相機(jī)與錄音,去河邊找鬼放可。 笑死谒臼,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的耀里。 我是一名探鬼主播蜈缤,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼冯挎!你這毒婦竟也來了底哥?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎趾徽,沒想到半個(gè)月后续滋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡孵奶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年疲酌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片了袁。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡朗恳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出载绿,到底是詐尸還是另有隱情粥诫,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布卢鹦,位于F島的核電站臀脏,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏冀自。R本人自食惡果不足惜揉稚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望熬粗。 院中可真熱鬧搀玖,春花似錦、人聲如沸驻呐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)含末。三九已至猜拾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間佣盒,已是汗流浹背挎袜。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留肥惭,地道東北人盯仪。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蜜葱,于是被迫代替她去往敵國(guó)和親全景。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容