收录了这篇文章
在JavaScript中,getter和setter是访问器属性的两种方法,用于对象属性的读取(get)和设置(set)。它们提供了一种更灵活的方式来控制对对象属性的访问,可以加入验证逻辑或者在获取和设置属性值时执行其他操作。
Getter
Getter是一个访问器属性,用于获取一个属性的值。它被定义为一个没有参数的方法,并且返回该属性的值。
let person = {
_firstName: "John", // 使用下划线前缀表示这是一个"私有"属性
get firstName() {
return this._firstName;
}
};
console.log(person.firstName); // 输出: John
Setter
Setter也是一个访问器属性,用于设置一个属性的值。它接受一个参数,并将该参数的值赋给相关的属性。可以在这里添加验证或其他逻辑。
person = {
_firstName: "John",
get firstName() {
return this._firstName;
},
set firstName(value) {
if (value.length < 3) {
console.log("名字太短了,请输入至少3个字符的名字!");
} else {
this._firstName = value;
}
}
};
person.firstName = "A"; // 输出: 名字太短了,请输入至少3个字符的名字!
person.firstName = "Alex"; // 正确设置姓名
console.log(person.firstName); // 输出: Alex
使用class语法
在ES6的class语法中,getter和setter可以通过get
和set
关键字来定义:
class Person {
constructor(firstName) {
this._firstName = firstName;
}
get firstName() {
return this._firstName;
}
set firstName(value) {
if (value.length < 3) {
console.log("名字太短了,请输入至少3个字符的名字!");
} else {
this._firstName = value;
}
}
}
let person = new Person("John");
console.log(person.firstName); // 输出: John
person.firstName = "A"; // 输出: 名字太短了,请输入至少3个字符的名字!
person.firstName = "Alex"; // 正确设置姓名
console.log(person.firstName); // 输出: Alex
通过getter和setter,你可以更加精细地控制属性的访问,实现数据验证等额外功能,增强代码的健壮性和可维护性。
声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。