Object.defineProperty是什么?

以下內(nèi)容出自其他博主



對象是由多個名/值對組成的無序的集合。對象中每個屬性對應任意類型的值。

定義對象可以使用構造函數(shù)或字面量的形式:

var obj = new Object;? //obj = {}

obj.name = "張三";? //添加描述

obj.say = function(){};? //添加行為

除了以上添加屬性的方式,還可以使用Object.defineProperty定義新屬性或修改原有的屬性。

Object.defineProperty()

語法:

Object.defineProperty(obj, prop, descriptor)

參數(shù)說明:

obj:必需。目標對象

prop:必需。需定義或修改的屬性的名字

descriptor:必需。目標屬性所擁有的特性

返回值:

傳入函數(shù)的對象。即第一個參數(shù)obj

針對屬性,我們可以給這個屬性設置一些特性,比如是否只讀不可以寫;是否可以被for..in或Object.keys()遍歷。

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

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

當修改或定義對象的某個屬性的時候,給這個屬性添加一些特性:

var obj = {

? ? test:"hello"

}

//對象已有的屬性添加特性描述

Object.defineProperty(obj,"test",{

? ? configurable:true | false,

? ? enumerable:true | false,

? ? value:任意類型的值,

? ? writable:true | false

});

//對象新添加的屬性的特性描述

Object.defineProperty(obj,"newKey",{

? ? configurable:true | false,

? ? enumerable:true | false,

? ? value:任意類型的值,

? ? writable:true | false

});

數(shù)據(jù)描述中的屬性都是可選的,來看一下設置每一個屬性的作用。

value

屬性對應的值,可以使任意類型的值,默認為undefined

var obj = {}

//第一種情況:不設置value屬性

Object.defineProperty(obj,"newKey",{

});

console.log( obj.newKey );? //undefined

------------------------------

//第二種情況:設置value屬性

Object.defineProperty(obj,"newKey",{

? ? value:"hello"

});

console.log( obj.newKey );? //hello

writable

屬性的值是否可以被重寫。設置為true可以被重寫;設置為false,不能被重寫。默認為false。

var obj = {}

//第一種情況:writable設置為false,不能重寫。

Object.defineProperty(obj,"newKey",{

? ? value:"hello",

? ? writable:false

});

//更改newKey的值

obj.newKey = "change value";

console.log( obj.newKey );? //hello

//第二種情況:writable設置為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())。設置為true可以被枚舉;設置為false,不能被枚舉。默認為false。

var obj = {}

//第一種情況:enumerable設置為false,不能被枚舉。

Object.defineProperty(obj,"newKey",{

? ? value:"hello",

? ? writable:false,

? ? enumerable:false

});

//枚舉對象的屬性

for( var attr in obj ){

? ? console.log( attr );?

}

//第二種情況:enumerable設置為true,可以被枚舉。

Object.defineProperty(obj,"newKey",{

? ? value:"hello",

? ? writable:false,

? ? enumerable:true

});

//枚舉對象的屬性

for( var attr in obj ){

? ? console.log( attr );? //newKey

}

configurable

是否可以刪除目標屬性或是否可以再次修改屬性的特性(writable, configurable, enumerable)。設置為true可以被刪除或可以重新設置特性;設置為false,不能被可以被刪除或不可以重新設置特性。默認為false。

這個屬性起到兩個作用:

目標屬性是否可以使用delete刪除

目標屬性是否可以再次設置特性

//-----------------測試目標屬性是否能被刪除------------------------

var obj = {}

//第一種情況:configurable設置為false,不能被刪除。

Object.defineProperty(obj,"newKey",{

? ? value:"hello",

? ? writable:false,

? ? enumerable:false,

? ? configurable:false

});

//刪除屬性

delete obj.newKey;

console.log( obj.newKey ); //hello

//第二種情況:configurable設置為true,可以被刪除。

Object.defineProperty(obj,"newKey",{

? ? value:"hello",

? ? writable:false,

? ? enumerable:false,

? ? configurable:true

});

//刪除屬性

delete obj.newKey;

console.log( obj.newKey ); //undefined

//-----------------測試是否可以再次修改特性------------------------

var obj = {}

//第一種情況:configurable設置為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 ); //報錯:Uncaught TypeError: Cannot redefine property: newKey

//第二種情況:configurable設置為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

除了可以給新定義的屬性設置特性,也可以給已有的屬性設置特性

//定義對象的時候添加的屬性,是可刪除、可重寫、可枚舉的。

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給對象添加屬性,那么如果不設置屬性的特性,那么configurable、enumerable、writable這些值都為默認的false

var obj = {};

//定義的新屬性后,這個屬性的特性中configurable,enumerable,writable都為默認的值false

//這就導致了neykey這個是不能重寫、不能枚舉、不能再次設置特性

//

Object.defineProperty(obj,'newKey',{

});

//設置值

obj.newKey = 'hello';

console.log(obj.newKey);? //undefined

//枚舉

for( var attr in obj ){

? ? console.log(attr);

}

設置的特性總結:

value: 設置屬性的值

writable: 值是否可以重寫。true | false

enumerable: 目標屬性是否可以被枚舉。true | false

configurable: 目標屬性是否可以被刪除或是否可以再次修改特性 true | false

存取器描述

當使用存取器描述屬性的特性的時候,允許設置以下特性屬性:

var obj = {};

Object.defineProperty(obj,"newKey",{

? ? get:function (){} | undefined,

? ? set:function (value){} | undefined

? ? configurable: true | false

? ? enumerable: true | false

});

注意:當使用了getter或setter方法,不允許使用writable和value這兩個屬性

getter/setter

當設置或獲取對象的某個屬性的值的時候,可以提供getter/setter方法。

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

setter是一種設置屬性值的方法。

在特性中使用get/set屬性來定義對應的方法。

var obj = {};

var initValue = 'hello';

Object.defineProperty(obj,"newKey",{

? ? get:function (){

? ? ? ? //當獲取值的時候觸發(fā)的函數(shù)

? ? ? ? return initValue;? ?

? ? },

? ? set:function (value){

? ? ? ? //當設置值的時候觸發(fā)的函數(shù),設置的新值通過參數(shù)value拿到

? ? ? ? initValue = value;

? ? }

});

//獲取值

console.log( obj.newKey );? //hello

//設置值

obj.newKey = 'change value';

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

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

configurable和enumerable同上面的用法。


以上內(nèi)容出自其他博主之手

圖片發(fā)自簡書App
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,002評論 6 542
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,400評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,136評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,714評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,452評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,818評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,812評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,997評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,552評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,292評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,510評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,035評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,721評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,121評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,429評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,235評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,480評論 2 379

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