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

 

定义 getter 与 setter

1.通过对象初始化器在创建对象的时候指明（也可以称为通过字面值创建对象时声明）

(function () {
  var o = {
    a : 7,
    get b(){return this.a +1;},//通过 get,set的 b,c方法间接性修改 a 属性
    set c(x){this.a = x/2}
  };
  console.log(o.a);
  console.log(o.b);
  o.c = 50;
  console.log(o.a);
})();

在 chrome 中调试视图如下：

可以看到对象下多了 get 属性以及 set 属性

当然 get 语句与 set 语句可以声明多次用来对应多个 getter 和 setter
使用这种方法的好处是可以在声明属性的时候同时声明对应的 getter 和 setter
这里就有人问了，能不能将o 对象的 get 及 set 方法的方法名都改成 “a”,这样就可以直接通过“.”来访问方法直接操作

(function () {
  var o = {
    a : 7,
    get a(){return this.a +1;},//死循环
    set a(x){this.a = x/2}
  };
  console.log(o.a);
  console.log(o.b);
  o.c = 50;
  console.log(o.a);
})();

打开 chrome 查看创建后的视图如下： 

可以看到这个时候的 get 与 set 方法已经和上面不同，但是是否真的能起作用呢，答案是否定的，当我们通过 o.a 调用的是 get语句 声明的 a方法，进入到该方法后遇到 this.a 方法继续调用该方法形成死循环最终导致死循环报内存溢出错误。

新语法(ES6)：暂时只有 firefox 支持，其他浏览器会报错

(function () {
  var b = "bb";
  var c = "cc";
  var o = {
    a : 7,
    get [b](){return this.a +1;},
    set [c](x){this.a = x/2},
  };
  console.log(o.a);
  console.log(o[b]);
  o["cc"] = 50;
  console.log(o.a);
})();

打开 firefox 查看调试： 

输出结果如下：

 

2.使用 Object.create 方法

引用 MDN：

概述 Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。 语法 Object.create(proto, [ propertiesObject ])

我们都知道使用 Object.create 方法传递一个参数的时候可以创建一个以该参数为原型的对象。

第二个参数是可选项，是一个匿名的参数对象，该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（包扩数据描述符或存取描述符，具体解释看后面的内容 什么是属