其實關于屬性描述對象构蹬,阮大大有篇文章已經寫得很詳細了,不過作為必學知識點庄敛,也避免阮大大的網(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"
只要 configurable
和 writable
其中一個為 true
則 value
可以被改寫沮尿。
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
反之赴邻。注意,正常模式下啡捶,對 writable
為 false
的屬性賦值不會報錯姥敛,只會靜默失敗。但是瞎暑,嚴格模式下會報錯彤敛,即使是對該屬性重新賦予一個同樣的值与帆。
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
表示該屬性是否可枚舉,是一個布爾值墨榄。當屬性不可枚舉即 enumerable
為 false
時玄糟,該屬性不會被 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
set
和 get
屬性的值是一個函數(shù)熄阻,分別對應存取函數(shù) setter
和 getter
。一旦定義了存取函數(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ù) setter
和 getter
稍走,則不能將 writable
屬性設置為 true
,或者再同時定義 value
屬性粱胜。