如何为JS对象添加getter和setter

2024-03-26 21:21:16

基础知识

对象目前的属性描述富主要有两种形式：数据描述符和存取描述符。

数据描述符是一个拥有可写或不可写值的属性。
存取描述符是由一对 getter-setter 函数功能来描述的属性。
描述符必须是两种形式之一；不能同时是两者。

通用可选值：

configurable: false
enumerable: false

数据描述福同时具有以下可选值：

value: undefined
variable: false

存取描述符同时具有以下可选键值：

get: undefined 给属性提供getter方法
set: undefined 给属性提供setter方法

通过字面量方式创建对象时添加getter和setter

控制对象的属性的get和set操作。

var obj = {
	name: 1, // 可set,可get
	get type() {return '对象类型'}, // 可get
	set age(x) {this.age = 22;} // 可set
	get age() {return this.age;} // 可get
}

用Object.create方法

本质是扩展prototype属性。

var obj = null;
Object.create(Object.prototype, {
	name: {
		get: function() {return 1;},
		set: function(val) {this.name = val;},
		configurable: true,
	}
})
// 得到对象obj = {name: 1}

问题：如果对象已经创建成功了，后期需要扩展get和set，怎么操作？如下：

Object.create(obj, {
	type: {
		get: function(){return '对象类型'},
		configurable: true, // 可加可不加
	}
})
// 得到对象 obj = {name: 1, type: '对象类型'}

用Object.defineProperty方法

Object.defineProperty(obj, prop, descriptor)：直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。

var o = { a : 1}//声明一个对象,包含一个 a 属性,值为1
Object.defineProperty(o,"b",{
    get: function () {
        return this.a;
    },
    set : function (val) {
        this.a = val;
    },
    configurable : true
});

如果想批量增加getter和setter:

使用 Object.defineProperties方法

Object.defineProperties(obj, props) 方法在一个对象上添加或修改一个或者多个自有属性，并返回该对象。

var obj = {a:1,b:"string"};
Object.defineProperties(obj,{
    "A":{
        get:function(){return this.a+1;},
        set:function(val){this.a = val;}
    },
    "B":{
        get:function(){return this.b+2;},
        set:function(val){this.b = val}
    }
});

使用 Object.prototype.defineGetter 以及 Object.prototype.defineSetter 方法

非标准方法，尽量不要在生产环境中使用。已经在web标准中删除了，部分浏览器可能户停止支持。

var o = {a:1};
o.__defineGetter__("giveMeA", function () {
    return this.a;
});
o.__defineSetter__("setMeNew", function (val) {
    this.a  = val;
})

参考

浅谈 JS 对象添加 getter与 setter 的5种方法以及如何让对象属性不可配置或枚举

码农公寓