JavaScript淺析 -- 屬性描述對象

其實關于屬性描述對象构蹬,阮大大有篇文章已經寫得很詳細了,不過作為必學知識點庄敛,也避免阮大大的網(wǎng)站再被攻擊后看不到瘫筐,自己還是做下筆記,印象更深刻些肛捍,想了解更多的可以戳原文查看隐绵。

一拙毫、屬性描述對象

1. 屬性描述對象

屬性描述對象,是 JavaScript 里用來描述對象屬性的一種數(shù)據(jù)結構缀蹄,每個屬性都有對應的一個屬性描述對象膘婶。它具有6個元屬性,結構如下:

{
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true,
  get: undefined,
  set: undefined
}
2. 屬性描述對象的獲取

(1) Object.getOwnPropertyDescriptor(obj, propName)可以獲取對象目標屬性的屬性描述對象悬襟,第一個參數(shù)是目標對象,第二個參數(shù)是目標對象的目標屬性脊岳。

var obj = {};
obj.content = 'hello world';
Object.getOwnPropertyDescriptor(obj, 'content');
/* {
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true
} */

(2)Object.getOwnPropertyDescriptors(obj)可以獲取對象所有屬性的屬性描述對象的對象集合。可以獲取自身所有無論是否可以遍歷垛玻,不會獲取繼承的屬性割捅。

var obj = {};
obj.content = 'hello world';
obj.name = 'example';
Object.getOwnPropertyDescriptors(obj);
/* {
  content: {
    value: 'hello world',
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'example',
    writable: true,
    enumerable: true,
    configurable: true
  }
} */
3. 屬性描述對象的定義

(1)Object.defineProperty(obj, propName, descriptorObj)可以定義對象的目標屬性的屬性描述對象。第一個參數(shù)目標對象帚桩,第二個參數(shù)是屬性名(字符串)亿驾,第三個參數(shù)是屬性描述對象,最終返回修改后的對象账嚎。

var obj = Object.defineProperty({}, 'content', {
  value: 'hello world',
  writable: true,
  enumerable: true,
  configurable: true
});

obj.content // "hello world"

(2)Object.defineProperties(obj, descriptorsObj)可以定義對象多個屬性的屬性描述對象莫瞬,然后返回修改后的對象。用法如下:

var obj = Object.defineProperties({}, {
  content: {
    value: 'hello world',
    writable: true,
    enumerable: true,
    configurable: true
  },
  name: {
    value: 'example',
    writable: true,
    enumerable: true,
    configurable: true
  }
});

obj.content // "hello world"
obj.name // "example"

二醉锄、元屬性

屬性描述對象里的屬性乏悄,即為元屬性,有6個:value恳不、writable檩小、enumerable、configurable烟勋、get规求、set,下面一一講解卵惦。

1. value

value 是屬性的值阻肿,可以為任意類型。下面的寫法是等價的:

var obj = {};
obj.content = 'hello world';
obj.content; // "hello world"

// 相當于
Object.defineProperty(obj, 'content', {value: 'hello'});
Object.getOwnPropertyDescriptor(obj, 'content').value; // "hello"

只要 configurablewritable 其中一個為 truevalue 可以被改寫沮尿。

var o1 = Object.defineProperty({}, 'content', {
  value: 'hello',
  writable: true,
  configurable: false
});
o1.content = 'hello world'; // 成功

var o2 = Object.defineProperty({}, 'content', {
  value: 'world',
  writable: false,
  configurable: true
});
o2.content = 'hello world'; // 成功
2. writable

writable 表示該屬性是否可以被改寫丛塌,是一個布爾值。為 true 表示可以被改寫畜疾,false 反之赴邻。注意,正常模式下啡捶,對 writablefalse 的屬性賦值不會報錯姥敛,只會靜默失敗。但是瞎暑,嚴格模式下會報錯彤敛,即使是對該屬性重新賦予一個同樣的值与帆。

var obj = {};
Object.defineProperty(obj, 'content', {
  value: 'hello',
  writable: false // 如果增加一個 configurable 為 true 則仍可以被改寫
});

obj.content // "hello"
obj.content = 'hello world';
obj.content // "hello"
3. enumerable

enumerable 表示該屬性是否可枚舉,是一個布爾值墨榄。當屬性不可枚舉即 enumerablefalse 時玄糟,該屬性不會被 for-in、Object.keys()渠概、JSON.stringify()遍歷茶凳。該元屬性的誕生是因為的 in 不僅可以遍歷自身屬性還可以遍歷繼承的屬性,為了不讓其遍歷繼承屬性播揪,所以增加了 enumerable 并規(guī)定了 in 只可遍歷可枚舉屬性贮喧,且繼承的屬性都是不可枚舉的。

// 可利用 enumerable 設置不想被遍歷的屬性
var obj = Object.defineProperties({}, {
  content: {
    value: 'hello',
    enumerable: true
  },
  phone: {
    value: '13512345678',
    enumerable: false
  }
});
JSON.stringify(obj); // "{"content":"hello"}"
4. configurable

configurable 表示改屬性的元屬性是否可配置猪狈,是一個布爾值。當其為 false 時雇庙,value、enumerable寒跳、configurable 不可被更改竹椒,writable 只能從 true 改為 false;且此時該屬性無法被刪除书释。

var obj = Object.defineProperty({}, 'content', {
  value: 'hello',
  writable: true,
  configurable: false
});
obj.content = 'hello world'; // 成功

// 由于設置了 configurable 為false赊窥,所以再次更改配置會報錯
Object.defineProperty(obj, 'content', {
  value: 'world',
  writable: false,
  configurable: true
}); // Uncaught TypeError: Cannot redefine property: content

// 改動一下 configurable 就可以設置成功了,因為上面說的:
// 1.value 只要 writable 或 configurable 之一為 true 則可改扯再;
// 2.writable 在不可配置情況下能 true 改 false
Object.defineProperty(obj, 'content', {
  value: 'world',
  writable: false,
  configurable: false
});  // 成功
5. 存取器 get 和 set

setget 屬性的值是一個函數(shù)熄阻,分別對應存取函數(shù) settergetter。一旦定義了存取函數(shù),那么存取該屬性的時候都會先執(zhí)行對應的存取函數(shù)窃页,所以可以用該屬性做一些存取限制复濒。

var obj = Object.defineProperty({}, 'content', {
  get: function () { // 不接受參數(shù)
    return 'getter';
  },
  set: function (value) { // 只接受一個參數(shù)巧颈,即要賦值的value
    console.log('setter: ' + value);
  }
});

obj.content // "getter"
obj.content = 'hello' // "setter: hello"

存取器還有另一種寫法可以直接定義在對象里袖扛,類似于 function 的聲明方式。而且一般會搭配一個內在變量(非必要唇礁,只是用來存值放對象內外沒差別)一起使用惨篱,該變量一般以 _$ 開頭以區(qū)分對象的其他屬性。

var obj = {
  $age: 18, // 用來存操作age的臨時變量琢融,可以隨意命名簿寂,但建議與屬性名相同方便對應
  get age() {
    return ++this.$age;
  },
  set age(val) {
    if (val < this.$age) {
      alert('新值必須大于舊值');
    } else {
      this.$age = age;
    }
  }
}

obj.age; // 19
obj.age; // 20
obj.age = 18; // 賦值失敗,提示新值必須大于舊值纳令,age還是20

將對象的屬性賦值給另一個對象屬性時烈钞,不會復制存取函數(shù),而是直接復制函數(shù)的返回值馒过。比如將上面例子中的 age 賦值給另一個對象的屬性時酗钞,只會復制21,所以下次調用的話不會返回22窘奏。

var obj2 = {};
obj2.age = obj.age; // 調用obj.age在之前的20之上加1變成21
obj2.age; // 再次調用還是21葫录,因為getter函數(shù)沒被復制過來

// 可利用下面的函數(shù)解決上述問題,注意如果只復制 age 的描述對象沒用骇扇,因為 $age 沒被復制過來,對 age 讀取會返回 NaN
var copy = function (to, from) {
  for (var property in from) {
    if (!from.hasOwnProperty(property)) continue;
    Object.defineProperty(
      to,
      property,
      Object.getOwnPropertyDescriptor(from, property)
    );
  }

  return to;
}
copy(obj2, obj);
obj2.age;

注意继低,一旦定義了存取函數(shù) settergetter稍走,則不能將 writable 屬性設置為 true,或者再同時定義 value 屬性粱胜。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末盖淡,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子冗恨,更是在濱河造成了極大的恐慌味赃,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件傲武,死亡現(xiàn)場離奇詭異揪利,居然都是意外死亡狠持,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評論 3 395
  • 文/潘曉璐 我一進店門甜刻,熙熙樓的掌柜王于貴愁眉苦臉地迎上來正勒,“玉大人,你說我怎么就攤上這事祥绞。” “怎么了怪蔑?”我有些...
    開封第一講書人閱讀 165,011評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長喧枷。 經常有香客問我,道長车荔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評論 1 294
  • 正文 為了忘掉前任忧便,我火速辦了婚禮帽借,結果婚禮上,老公的妹妹穿的比我還像新娘蒂教。我一直安慰自己脆荷,他們只是感情好,可當我...
    茶點故事閱讀 67,774評論 6 392
  • 文/花漫 我一把揭開白布梦皮。 她就那樣靜靜地躺著桃焕,像睡著了一般。 火紅的嫁衣襯著肌膚如雪退子。 梳的紋絲不亂的頭發(fā)上型将,一...
    開封第一講書人閱讀 51,610評論 1 305
  • 那天,我揣著相機與錄音丸凭,去河邊找鬼。 笑死铛碑,一個胖子當著我的面吹牛虽界,可吹牛的內容都是我干的。 我是一名探鬼主播撇吞,決...
    沈念sama閱讀 40,352評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼礁叔,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了煮岁?” 一聲冷哼從身側響起涣易,我...
    開封第一講書人閱讀 39,257評論 0 276
  • 序言:老撾萬榮一對情侶失蹤新症,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后账劲,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 45,717評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡腌且,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,894評論 3 336
  • 正文 我和宋清朗相戀三年铺董,在試婚紗的時候發(fā)現(xiàn)自己被綠了禀晓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,021評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡重付,死狀恐怖凫乖,靈堂內的尸體忽然破棺而出弓颈,到底是詐尸還是另有隱情翔冀,我是刑警寧澤,帶...
    沈念sama閱讀 35,735評論 5 346
  • 正文 年R本政府宣布纤子,位于F島的核電站款票,受9級特大地震影響,放射性物質發(fā)生泄漏徽职。R本人自食惡果不足惜姆钉,卻給世界環(huán)境...
    茶點故事閱讀 41,354評論 3 330
  • 文/蒙蒙 一抄瓦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧钙姊,春花似錦、人聲如沸思恐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽婚温。三九已至,卻和暖如春栅螟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背步绸。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評論 1 270
  • 我被黑心中介騙來泰國打工靡努, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留坪圾,地道東北人惑朦。 一個月前我還...
    沈念sama閱讀 48,224評論 3 371
  • 正文 我出身青樓漾月,卻偏偏與公主長得像,于是被迫代替她去往敵國和親梁肿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,974評論 2 355

推薦閱讀更多精彩內容

  • 概述 JavaScript提供了一個內部數(shù)據(jù)結構钮热,用來描述一個對象的屬性的行為烛芬,控制它的行為。這被稱為“屬性描述對...
    zjh111閱讀 724評論 0 0
  • 概述 JavaScript提供了一個內部數(shù)據(jù)結構仆潮,用來描述一個對象的屬性的行為遣臼,控制它的行為。這被稱為“屬性描述對...
    許先生__閱讀 490評論 0 1
  • 1 Object 對象 教程:https://wangdoc.com/javascript/stdlib/obje...
    智勇雙全的小六閱讀 1,760評論 0 0
  • 函數(shù)和對象 1鹏浅、函數(shù) 1.1 函數(shù)概述 函數(shù)對于任何一門語言來說都是核心的概念屏歹。通過函數(shù)可以封裝任意多條語句,而且...
    道無虛閱讀 4,564評論 0 5
  • 今天,忙著給公司策劃“新24孝文化”活動尾菇,找了首歌《天之大》囚枪,先聽毛阿敏版劳淆,不太有感覺,后來發(fā)現(xiàn)有童聲版括勺,一聽,淚...
    薔薇季閱讀 331評論 0 0