计算属性的语法及 getter/setter
时间: 2023-09-23 19:13:24 浏览: 44
计算属性的语法是在对象中定义一个键,并在该键的值中定义一个 getter 函数,用于计算该属性的值。计算属性可以依赖于其他属性的值,并且在这些属性发生变化时自动更新。
例如:
```
const obj = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return this.firstName + ' ' + this.lastName;
}
};
console.log(obj.fullName); // John Doe
```
在上面的代码中,我们定义了一个计算属性 `fullName`,它依赖于 `firstName` 和 `lastName` 的值。当我们调用 `obj.fullName` 时,它会自动计算出 `firstName` 和 `lastName` 的值并返回完整的姓名。
除了 getter 函数外,我们还可以在计算属性中定义一个 setter 函数,用于设置该属性的值。setter 函数接受一个参数,该参数即为要设置的值。
例如:
```
const obj = {
_age: 20,
get age() {
return this._age;
},
set age(value) {
if (value < 0) {
console.error('Age cannot be negative');
return;
}
this._age = value;
}
};
console.log(obj.age); // 20
obj.age = -10; // Age cannot be negative
obj.age = 30;
console.log(obj.age); // 30
```
在上面的代码中,我们定义了一个计算属性 `age`,它包含一个 getter 函数和一个 setter 函数。getter 函数返回 `_age` 的值,而 setter 函数会检查要设置的值是否为负数,如果是则输出错误信息,否则将值赋给 `_age`。当我们修改 `age` 的值时,setter 函数会自动调用。