最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript 的 getter 与 setter 如何定义
时间:2026-07-12 10:46:46 编辑:袖梨 来源:一聚教程网
JavaScript中getter和setter用于控制属性读写行为,可通过对象字面量、Object.defineProperty或class语法定义,支持只读/只写、数据验证、计算属性等,但需避免副作用和递归赋值。
JavaScript 中的 getter 和 setter 是通过对象属性描述符或类语法定义的,用于控制属性的读取和赋值行为,让属性看起来像普通字段,背后却能执行自定义逻辑。
在对象字面量中用 get/set 定义
直接在对象里用 get 和 set 关键字声明访问器属性。注意:不能同时有同名的数据属性(value/writable)和访问器属性(get/set)。
- getter 不接受参数,必须返回值;setter 接收一个参数(即赋值时的右值)
- 访问器属性默认不可枚举、不可配置(除非显式设置)
- 示例:
_name: 'Alice',
get name() { return this._name.toUpperCase(); },
set name(value) { this._name = value.trim(); }
};
console.log(obj.name); // "ALICE"
obj.name = " bob ";
console.log(obj._name); // "bob"
用 Object.defineProperty 动态添加
适合给已有对象添加或修改属性行为,可精确控制 enumerable、configurable、writable 等特性。
- get/set 函数内部的 this 指向当前对象
- 必须成对或单独定义;只设 get 是只读,只设 set 是只写(但读取会返回 undefined)
- 示例:
Object.defineProperty(person, 'age', {
get() { return this._age || 0; },
set(value) {
if (Number.isInteger(value) && value >= 0) {
this._age = value;
} else {
throw new Error('Age must be a non-negative integer');
}
}
});
在 class 中定义 getter/setter
ES6 class 支持直接在类体中用 get/set 语法,本质是为原型添加访问器方法,更符合面向对象习惯。
立即学习“Java免费学习笔记(深入)”;
- 不能在 class 中用 defineProperty 手动定义实例访问器(需在 constructor 内操作 this)
- 静态访问器用 static get / static set 定义,绑定在类本身而非实例上
- 示例:
constructor(celsius) {
this._celsius = celsius;
}
get fahrenheit() { return (this._celsius * 9/5) + 32; }
set fahrenheit(value) { this._celsius = (value - 32) * 5/9; }
}
const t = new Temperature(0);
console.log(t.fahrenheit); // 32
t.fahrenheit = 212;
console.log(t._celsius); // 100
注意事项与常见陷阱
访问器容易引发意外行为,使用时需留意边界情况。
- 避免在 getter 中修改状态或产生副作用(如发起请求、改变其他属性),否则可能触发无限循环或难以调试的问题
- setter 中不要直接给同名属性赋值(如 set x(v) { this.x = v; }),会导致栈溢出
- 继承时,子类可通过 super 访问父类的 getter/setter,但需确保 this 已正确初始化
- JSON.stringify() 默认忽略 getter,如需序列化,得手动处理
相关文章
- 火车票余票如何查询-火车票余票查询步骤与官方购票方法 07-17
- 怪物生存战争新手攻略大全 怪物生存战争零基础入门与生存技巧详解 07-17
- 豆包AI在线使用-豆包AI官方网页版直达入口 07-17
- 三国伏魔录新手入门指南 三国伏魔录详细玩法与快速上手教程 07-17
- 奈斯漫画首页登录下载版本怎么进-奈斯漫画免费漫画页面在线看漫画版本观看 07-17
- 创游世界网页端入口-创游世界下载入口 07-17