使用 Html5 getter 和 setter 通过显示模块模式实现属性所需的说明

Question

我搜索了很多关于如何在 Javascript 中处理属性的信息。我见过的大多数揭示模块模式都专门公开了函数，根据经验，我知道如果公开一个对象，我只能真正获得该值的副本，因此我可以拥有一个函数getMyThing() 和 setMyThing 并公开它。不过我想公开真实的财产

我已经看到了我正在避免的老派 defineGetter 和较新的 Object.defineProperty( 我遇到了一些真正的麻烦。（我可以轻松地将它用于对抗 artitary 对象，但不是在我的“模块”内，也不是我想透露我的模块内的属性。

var myobj = (function() {  
    var name = "default name"
    var sayName = function() { return "hello " + name }
  return {
   badname : name, //this won't change
   sayName : sayName,
   get name() { return name;},
   set name(value) { name = value ;}

  }
})()
alert("should be default because its just a copy: " + myobj.badname)
alert("should be default: " + myobj.name)
myobj.name = "karl"
alert("should be default because its just a copy: " + myobj.badname)
alert("should be karl: "  + myobj.name)

无论如何，我在一些地方看到你可以使用 get 和 set 关键字，并且我有以下示例，至少在 Firefox 和 ie10 中对我有用。

我的问题：这是一种可以接受的方法吗？或者是否存在我不知道的隐藏问题。这是现代浏览器中最容易接受的方法吗？ 这个功能叫什么？ Object.defineProperty 功能的正式名称是什么？ 我假设 get 和 set 关键字的使用是 ECMAScript5 getters 和 setters，但另一个叫什么？

此兼容性图表http://kangax.github.io/es5-compat-table/中“属性初始值设定项中的Getter”和“属性初始值设定项中的Setter”类别下提到的get和set关键字是什么？

JSfiddle 上的示例 - http://jsfiddle.net/klumsy/NagbE/1/

Answer 1

您使用的图案看起来不错。所有 ES5 浏览器都支持它。

对象字面量内的

get

和

set

语法通常称为 ES5 对象字面量扩展，用于定义 访问器属性。访问器属性是由 getter 和/或 setter 组成的属性。非 getter/setter 的传统属性的术语是“数据属性”。 是的，这就是 kangax 的兼容性表“...在属性初始值设定项中”所指的内容（如果您将鼠标悬停在该页面上带有圆圈的灰色“c”上，您可以看到实际的测试正在运行）。

Object.defineProperty

提供的元属性特征被称为

属性描述符

。 ES5 中有两种属性描述符：数据描述符和访问器描述符，它们由以下描述符属性组成：

---

数据描述符

：value、

writable

、

enumerable

、

configurable

示例：

Object.defineProperty(obj, 'prop', {
    value: 'some value',
    writable: true,
    enumerable: false,
    configurable: true
});

---

访问器描述符

：get、

set

、

enumerable

、

configurable

示例：

Object.defineProperty(obj, 'prop', {
    get: function() { return 'foo'; },
    set: function() { /* do something... */ },
    enumerable: false,
    configurable: true
});

Answer 2