javascript class 中 getter 可实现只读计算属性:用 get 属性名() { return 表达式; } 定义,访问时自动执行并返回结果,不可赋值;适用于基于字段动态计算(如矩形面积)、组合 getter 或配合私有字段(#)封装状态,但应避免副作用且注意性能权衡。

在 JavaScript class 中,用 getter 实现只读的计算属性非常直接:只需定义一个不带参数的 getter 方法,它会在访问时自动执行并返回计算结果,且无法被直接赋值(尝试赋值会静默失败或报错,取决于严格模式)。
getter 的基本写法和只读特性
getter 本质是访问器属性,没有 setter 时天然只读。只要不显式定义同名 setter,该属性就不可写。
- 语法:用
get 属性名() { return 表达式; }定义 - 调用方式:像访问普通属性一样使用
obj.属性名,不加括号 - 不可赋值:执行
obj.属性名 = xxx不会修改 getter 逻辑,也不会触发 setter(因为不存在),在严格模式下会抛出TypeError
典型场景:基于已有字段动态计算
比如一个表示矩形的类,宽高可变,但面积应实时反映当前尺寸,且不允许外部直接设置面积:
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
get area() {
return this.width * this.height;
}
}
<p>const rect = new Rectangle(5, 3);
console.log(rect.area); // 15
rect.area = 100; // 无效果(非严格模式)或报错(严格模式)
</p>
注意点:避免副作用与缓存权衡
getter 应保持纯函数特性——不修改状态、不发起请求、不依赖外部可变数据,否则行为难以预测。
- 每次访问都会重新执行,适合轻量计算;若开销大(如遍历长数组、格式化复杂对象),考虑手动缓存或用
Object.defineProperty配合私有字段实现惰性求值 - 不要在 getter 中修改
this的其他属性,这违反封装原则,也容易引发意外重入或无限循环
进阶:组合多个 getter 或与私有字段配合
可以基于其他 getter 构建更高层的只读属性,或用私有字段(#)保护内部状态:
class Person {
#firstName = '';
#lastName = '';
<p>constructor(first, last) {
this.#firstName = first;
this.#lastName = last;
}</p><p>get fullName() {
return <code>${this.#firstName} ${this.#lastName}</code>.trim();
}</p><p>get initials() {
return this.fullName
.split(' ')
.filter(Boolean)
.map(word => word[0])
.join('');
}
}
</p>
这样 fullName 和 initials 都是只读、按需计算、不暴露内部存储细节的属性。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











