使用Html5 getter和setter实现具有显示模块模式的属性所需的清晰度 [英] Clarication needed for implementing properties with the revealing module pattern using Html5 getters and setters

问题描述

我经常搜索如何在Javascript中执行属性。我见过的大部分揭示模块模式都是专门暴露的功能，根据经验，我知道如果我暴露一个对象，我只是真正得到一个价值的副本然后，因此我只能有一个功能getMyThing（）和setMyThing并公开它。但是我想揭露真实的属性

I've searched a lot for how to do properties in Javascript. Most all of the revealing module pattern I've seen has exclusively exposed functions, and from experience I know if I expose an object, I'm only really getting a copy of the value right there and then, thus simply I could have a function getMyThing() and setMyThing and expose that. However I'm wanting to expose real properties

我见过我正在避免的oldschool defineGetter 和更新的Object.defineProperty（我有一些真正的麻烦。（我可以很容易地使用它对抗一个艺术品，但不是我的模块里面的东西，也不是我希望揭示的模块中的一个属性。

I've seen the oldschool defineGetter which I'm avoiding and the newer Object.defineProperty( which I had some real troubles with. (I could easily use it against an artitary object but not THIS inside my "module" nor a property inside my module I wanted to reveal.

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中对我有用。

Anyhow I see in a few places you can use get and set keywords and I have the following example that is working for me at least in firefox and ie10.

我的问题：是这是一种可接受的方法，还是我不知道隐藏的问题。它是现代浏览器中最常被接受的方法吗？
这个功能叫做什么？什么是Object.defineProperty功能的官方名称？
我假设使用get和set关键字是ECMAScript5 getter和setter，但是另一个叫做什么？

My question: Is this an acceptable approach or are there hidden gotchas I am not aware of. Is it the approach that would be most accepted in modern browsers? What is this feature called? and what is the official name of the Object.defineProperty feature? I'm presuming the use of the get and set keyword is ECMAScript5 getters and setters, but what is the other one called?

并且是get和设置此兼容性图表中提到的关键字 http://kangax.github.io/es5-compat -table / 类别Getter in property initializer和Setter in property initializer？

and is the get and set keywords what is mentioned in this compatibility chart http://kangax.github.io/es5-compat-table/ under the category "Getter in property initializer" and "Setter in property initializer"?

关于JSfiddle的例子 - http://jsfiddle.net/klumsy/NagbE/1/

example on JSfiddle - http://jsfiddle.net/klumsy/NagbE/1/

推荐答案

你使用的模式看起来不错。它将得到所有ES5浏览器的支持。

The pattern you're using looks good. It'll be supported by all ES5 browsers.

获取和设置语法通常被称为ES5 对象文字扩展，用于定义访问者属性。访问者属性是由getter和/或setter组成的属性。传统类型的属性不是getter / setter的术语是数据属性。

The get and set syntax inside the object literal is often referred to as ES5 object literal extensions for defining accessor properties. An accessor property is a property that is made up of a getter and/or setter. The term for the traditional kind of property which isn't a getter/setter is a data property.

而且，是的，这就是kangax的兼容性表是指......在属性初始值设定项中（如果你将鼠标悬停在该页面上带有圆圈的灰色c上，你可以看到正在运行的实际测试）。

And, yes, that is what kangax's compatibility table is referring to by "... in property initializer" (if you mouse-over the grey "c" with a circle around it on that page, you can see the actual test that's being run).

Object.defineProperty 提供的元属性功能称为属性描述符。 ES5中有两种属性描述符：数据描述符和访问器描述符，它们由以下描述符属性组成：

The meta-property features provided by Object.defineProperty are referred to as property descriptors. There are two kinds of property descriptors in ES5: data descriptors and accessor descriptors, which are made up of the following descriptor properties:

数据描述符：值，可写，可枚举，可配置

示例：

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

---

访问者描述符： 获取，设置，可枚举，可配置

示例：

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

这篇关于使用Html5 getter和setter实现具有显示模块模式的属性所需的清晰度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！