Javascript学习---属性getters和setters
2018-02-14 16:04
274 查看
对象的属性有两种类型,第一种是数据属性,第二种是访问器属性。数据属性我们已经很熟悉了,现在我们来讲解第二种属性-访问器属性,也就是set和get属性
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方法例子: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上述例子中,set方法里面采用解构赋值的方式来设置name和surname属性值,所以我们可以直接使用“=”来赋值
我们可以使用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
});
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方法例子: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上述例子中,set方法里面采用解构赋值的方式来设置name和surname属性值,所以我们可以直接使用“=”来赋值
访问器描述符
访问器属性的描述符和数据属性的描述符是不同的,访问器属性的描述符是没有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
});
相关文章推荐
- 关于javascript中元素大小的属性的学习笔记
- JavaScript学习——DOM获取和设置属性
- JavaScript学习笔记——DOM_对document对象的内容、属性、样式的操作
- JavaScript学习 jquery16 浏览器版本相关属性
- javascript学习笔记--理解apply()、call()、bind() 以及caller、callee属性
- javascript学习之 function类型 (27)——function类型 内部属性
- [翻译] JavaScript之Getters和Setters
- javascript面向对象学习笔记(四)——常用方法/属性
- Javascript学习笔录9(窗口属性操作-status、背景色、title等)
- JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法
- 实例学习Javascript之构建方法、属性
- JavaScript 学习笔记— —自定义属性
- javascript中prototype属性学习
- JavaScript学习(4.2):函数定义表达式和属性访问表达式
- javascript学习(九)对象属性的特性
- JavaScript学习——数据属性和访问器属性
- JavaScript DOM学习笔记之标签属性
- 轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点
- JavaScript学习-arguments属性
- Javascript学习---属性的标识符和描述符