定义 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 方法传递一个参数的时候可以创建一个以该参数为原型的对象 浅谈 JS 创建对象的 8 种模式