Javascript學習---屬性getters和setters
阿新 • • 發佈:2018-11-07
物件的屬性有兩種型別,第一種是資料屬性,第二種是訪問器屬性。資料屬性我們已經很熟悉了,現在我們來講解第二種屬性-訪問器屬性,也就是set和get屬性
getters和setters
訪問器屬性由getter和setter方法來表示,例如:
let obj = { get propName() { // getter, the code executed on getting obj.propName }, set propName(value) { // setter, the code executed on setting obj.propName = value } };
新增get方法例子:
let user = {
name: "John",
surname: "Smith",
get fullName() {
return `${this.name} ${this.surname}`;
}
};
alert(user.fullName); // John Smith
新增set方法例子:
上述例子中,set方法裡面採用解構賦值的方式來設定name和surname屬性值,所以我們可以直接使用“=”來賦值let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; }, set fullName(value) { [this.name, this.surname] = value.split(" "); } }; // set fullName is executed with the given value. user.fullName = "Alice Cooper"; alert(user.name); // Alice alert(user.surname); // Cooper
訪問器描述符
訪問器屬性的描述符和資料屬性的描述符是不同的,訪問器屬性的描述符是沒有value和writable的,它的具體描述符為:get、set、enumerable和configurable
我們可以使用defineProperty()來新增屬性並設定訪問器屬性的描述符,例如:
let user = { name: "John", surname: "Smith" }; Object.defineProperty(user, 'fullName', { get() { return `${this.name} ${this.surname}`; }, set(value) { [this.name, this.surname] = value.split(" "); } }); alert(user.fullName); // John Smith for(let key in user) alert(key);
需要注意的是,物件的屬性只能是資料屬性或者訪問器屬性,不能兩者都是,如果在訪問器屬性中新增資料屬性的描述符,例如value或writable,則會報錯:
// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
get() {
return 1
},
value: 2
});