JS对象添加getter与setter的5种方法解析

"本文主要探讨JavaScript中为对象添加getter和setter的五种方式，并涉及到如何使对象属性不可配置或枚举。" 在JavaScript中，getter和setter是对象属性的访问控制机制，允许我们在读取或设置属性时执行自定义逻辑。下面我们将详细讲解五种在JavaScript中添加getter和setter的方法。 1. 对象初始化器（字面量语法） 这是最常见的添加getter和setter的方式。在创建对象时，我们可以在初始化器中直接声明它们： ```javascript var o = { a: 7, get b() { return this.a + 1; }, set c(x) { this.a = x / 2 } }; ``` 在这个例子中，`get b()`返回`a`属性加1，而`set c(x)`则把`a`设为`x`的一半。注意，如果尝试将getter和setter的名称都设为`a`，会导致递归调用并引发死循环。 2. 原型链 我们也可以在对象的原型上定义getter和setter： ```javascript function Obj() {} Obj.prototype = { get a() { return this._a; }, set a(value) { this._a = value * 2; } }; var obj = new Obj(); obj.a = 5; console.log(obj.a); // 输出10 ``` 3. Object.defineProperty() 这个方法允许我们精确地定义对象的属性，包括getter和setter： ```javascript var o = {}; Object.defineProperty(o, 'a', { get: function() { return this._a; }, set: function(value) { this._a = value * 3; }, configurable: false, // 使属性不可配置 enumerable: false // 使属性不可枚举 }); o.a = 4; console.log(o.a); // 输出12 ``` `configurable`和`enumerable`参数分别用于设置属性是否可配置和是否可枚举。 4. Object.defineProperties() 当需要一次性定义多个属性的getter和setter时，可以使用这个方法： ```javascript var o = {}; Object.defineProperties(o, { a: { get: function() { return this._a; }, set: function(value) { this._a = value - 1; } }, b: { get: function() { return this._b; }, set: function(value) { this._b = value * 2; } } }); o.a = 3; o.b = 5; console.log(o.a); // 输出2 console.log(o.b); // 输出10 ``` 5. ES6新语法（计算属性名） 在Firefox等支持ES6新特性的浏览器中，我们可以使用计算属性名动态定义getter和setter： ```javascript var b = "bb"; var c = "cc"; var o = { a: 7, [b]: function() { return this.a + 1; }, [c]: function(x) { this.a = x / 2 }, }; console.log(o.a); console.log(o.bb); o.cc = 50; console.log(o.a); ``` 这种方式允许我们在运行时决定getter和setter的名称。 通过以上五种方式，我们可以根据需求灵活地在JavaScript对象中添加getter和setter，从而实现对属性访问的控制和扩展。同时，理解如何使属性不可配置或不可枚举对于优化对象结构和保护数据安全至关重要。