3

Javascriptでプロパティを実行する方法をたくさん検索しました。私が見たほとんどすべての公開モジュールパターンは、もっぱら公開された関数を持っています.経験から、私がオブジェクトを公開した場合、私は実際にその場で値のコピーを取得しているだけであるため、単純に関数を持つことができます. getMyThing() と setMyThing を公開します。ただし、実際のプロパティを公開したい

私が避けている古い学校のdefineGetterと、いくつかの本当の問題を抱えていた新しい Object.defineProperty( を見てきました。私が明らかにしたかったモジュール。

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 の getter および setter であると推測していますが、もう一方は何と呼ばれていますか?

get および set キーワードは、この互換性チャートhttp://kangax.github.io/es5-compat-table/の「プロパティ初期化子のゲッター」および「プロパティ初期化子のセッター」のカテゴリで言及されているキーワードですか?

JSfiddle の例 - http://jsfiddle.net/klumsy/NagbE/1/

4

1 に答える 1

1

使用しているパターンは良さそうです。すべての ES5 ブラウザーでサポートされます。

オブジェクト リテラル内のgetand構文は、アクセサ プロパティを定義するためのsetES5オブジェクト リテラル拡張と呼ばれることがよくあります。アクセサー プロパティは、getter および/または setter で構成されるプロパティです。getter/setter ではない従来の種類のプロパティの用語は、data プロパティです。

そして、はい、それは kangax の互換性テーブルが "... in property initializer" で参照しているものです (そのページで円で囲まれた灰色の "c" にマウスを合わせると、実行中の実際のテストを見ることができます)。走る）。

によって提供されるメタプロパティ機能は、プロパティ記述子Object.definePropertyと呼ばれます。ES5 には、データ記述子とアクセサー記述子の 2 種類のプロパティ記述子があり、次の記述子プロパティで構成されます。

データ記述子: 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
});
于 2013-04-28T00:21:37.427 に答える