getter 代码示例(来自MDN):
const obj = {
log: ['a', 'b', 'c'],
get latest() {
if (this.log.length === 0) {
return undefined;
}
return this.log[this.log.length - 1];
}
};
console.log(obj.latest); // expected output: "c"
有时需要允许访问返回动态计算值的属性,或者你可能需要反映内部变量的状态,而不需要使用显式方法调用。在 JS 中,可以使用 getter 来实现。
不能同时将一个 getter 绑定到一个属性并且该属性实际上具有一个值。
setter 代码示例(来自MDN):
const language = {
set current(name) {
this.log.push(name);
},
log: []
};
language.current = 'EN';
language.current = 'FA';
console.log(language.log); // expected output: Array ["EN", "FA"]
不能在具有真实值的属性上同时拥有一个 setter 器。
更多例子:
let user = {
get name() {
return this._name;
},
set name(value) {
if (value.length < 4) {
alert("Name is too short, need at least 4 characters");
return;
}
this._name = value;
}
};
user.name = "Pete";
alert(user.name); // Pete
user.name = ""; // Name 太短了……
let user = {
name: "John",
surname: "Smith",
get fullName() {
return `${this.name} ${this.surname}`;
},
set fullName(value) {
[this.name, this.surname] = value.split(" ");
}
};
// set fullName 将以给定值执行
user.fullName = "Alice Cooper";
alert(user.name); // Alice
alert(user.surname); // Cooper
参考资料:
getter - JavaScript | MDN
setter - JavaScript | MDN
属性的 getter 和 setter
网友评论