一、在新對象初始化時定義 getter setter
var obj = {
log: ["a", "b", "c"],
get latest() {
if (this.log.length == 0) {
return undefined;
}
return this.log[this.log.length - 1];
},
set latest(name) {
this.log.push(name);
}
};
latest 被稱作僞屬性。
getter 跟 Vue 裏的計算屬性 computed 非常類似。
可以用delete操作符刪除 getter setter。
delete obj.latest;
二、使用Object.defineProperty在現有對象上定義getter setter
getter setter在 Object.defineProperty 裏屬於存取操作符。
重新定義原有的屬性：
var obj = { a: 0 };
Object.defineProperty(obj, "a", {
get: function() {
return 1;
},
set: function(x) {
console.log("set a");
}
});
給新添加的屬性定義getter setter：
var obj = { a: 0 };
Object.defineProperty(obj, "b", {
get: function() {
console.log('this', this)
return this.a + 1;
},
set: function(x) {
this.a = x / 2;
}
});
三、Object.defineProperty 語法
語法：
Object.defineProperty(obj, prop, descriptor)
默認情況下，使用 Object.defineProperty() 添加的屬性值是不可修改的。
對象裏的屬性描述符（descriptor）有兩種主要形式：數據描述符和存取描述符。
數據描述符和存取描述符均具有以下可選鍵值(默認值是在使用Object.defineProperty()定義屬性的情況下)：
- configurable：當且僅當該屬性的 configurable 爲 true 時，該屬性
描述符才能夠被改變，同時該屬性也能從對應的對象上被刪除。默認爲 false。 - enumerable：當且僅當該屬性的
enumerable爲true時，該屬性才能夠出現在對象的枚舉屬性中（比如Object.keys()， for...in）。默認爲 false。
數據描述符：
- value
- writable：當且僅當該屬性的
writable爲true時，value才能被賦值運算符改變。默認爲 false。
存取描述符：
- getter函數（上面已經提及）
- setter函數
注意：描述符必須是這兩種形式之一；不能同時是兩者。
Object.defineProperty 返回一個對象。
let a = Object.defineProperty({}, "name", {
enumerable: true,
value: "jim"
});
console.log(a); //{name: 'jim'}
四、Object.getOwnPropertyDescriptor()
用於獲取屬性自身的特性。
// 通過 Object.defineProperty 爲 ob 添加一個屬性c
Object.defineProperty(ob, "c", {
value: 3,
enumerable: false,
writable: false,
configurable: false
});
Object.getOwnPropertyDescriptor(ob, "c");
// => {value:3, enumeralbe: false, writable: false, configurable: false}
參考文章