JavaScript の Getters および Setters プラットフォームの詳細な紹介 support_javascript スキル

John Resig の初期の記事。思い出させるために大まかに翻訳されました。
幸いなことに、ようやくこう言えるようになりました。「現在、JavaScript のゲッターとセッターは非常に広く使用されており、それはすべての JavaScript 開発者の重要な利益に密接に関係しています。」くそー、これを言うのを長い間待っていました。
まず、Getter と Setter とは何か、そしてなぜそれらが役立つのかを簡単に見てみましょう。次に、現在どのプラットフォームが Gettets と Setter をサポートしているかを見てみましょう。
Getter と Setters
Getter と Setters を使用すると、オブジェクトのデータをすばやく取得または設定できます。一般に、オブジェクトには次のような 2 つのメソッドがあり、特定の値の取得と設定に使用されます。

Copy code Code次のように:

{
getValue: function(){
return this._value;
},
setValue: function(val){
this. _value = val;
}
}

この方法で JavaScript を記述することの明白な利点は、外部のユーザーにアクセスさせたくないプロパティを非表示にできることです。直接。最終的なコードは次のようになります (クロージャを使用して、新しく作成された Field オブジェクトの値を保存します):

Copy code コード以下のように:

function Field(val){
var value = val;
this.getValue = function(){
return value; > this.setValue = function(val){
value = val;
}


次のように使用できます:

コードをコピーします コードは次のとおりです: var field = new Field("test"); value

// => 未定義

field.setValue("test2")
field.getValue()
// => "test2"


上記の例「隠し値属性」をシミュレートすると、コードは次のようになります:

コードをコピー

コードは次のとおりです: function Field(val){ var value = val;

this.__defineGetter__("value", function(){

戻り値;
}); >this.__defineSetter__( "value", function(val){
value = val;
})
}


しかし、次のように書くのは好きではありません。ゲッターとセッターを定義するには (プライベート変数がどこに書かれているかは関係ありません)、別の構文を使用できます。

コードをコピー

コードは次のとおりです。 function Field(val){ this.value = val; Field.prototype = {

get value(){

return this._value;
set value(val){
this. _value = val;
}
};


この構文は奇妙に思えるかもしれませんが、しばらく使用すると簡単に受け入れられます。
以下は別の例です。これにより、外部の世界はユーザー名配列を取得できますが、元の非表示のユーザー オブジェクトは取得できません。

コードをコピー


コードは次のとおりです:

function Site(users){ this.__defineGetter__ ("users", function(){ // JS 1.6 配列マップ() return users.map(function(user){ return user.name;

});

};
}


おまけとして、オブジェクトの継承の実装に役立ち、ゲッターとセッターも考慮するメソッドを書きました




コードをコピー

コードは次のとおりです:

// 1 つのオブジェクトを別の function extend(a) で拡張するためのヘルパー メソッド,b) { for ( var i in b ) { var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i); >if ( g ) a.__defineGetter__(i, g);

if ( s )

a.__defineSetter__(i, s);
a[i] = b [i];
}

}


私の extend() メソッドには、__lookupGetter__ と __lookupSetter__ という 2 つの新しいメソッドがあります。これは、実際にゲッターとセッターを使い始めると便利です。
たとえば、最初に extend() メソッドを書いたとき、さまざまなエラーが発生し、完全にめまいがしました。後で、問題は次の単純なステートメントにあることがわかりました。 a[i] = b[i];
オブジェクト a に i という名前のセッターがあり、オブジェクト b にも i という名前のゲッターがある場合、a[ i] は割り当てられません。他のセッター メソッドを介して、ただし b のゲッター メソッドから。これら 2 つの __lookup*__ メソッドを使用すると、元の関数を取得できます。 (この段落は少しわかりにくいので、原文は次のとおりです)

オブジェクト a に i という名前のセッターが存在し、オブジェクト b に i という名前のゲッターが存在する場合、a[i] の値は、他の setter 関数ではなく、b の getter 関数から計算された値に設定されていました。2 つの __lookup*__ メソッドを使用すると、メソッドに使用される元の関数にアクセスできるようになります (これにより、たとえば効果的な extend メソッドを作成できます)。 ).

次の点に注意してください:
オブジェクトでは、各変数は 1 つのゲッターまたはセッターのみを持つことができます。 (つまり、value には getter と setter を含めることができますが、value に 2 つの getter を含めることはできません)
getter または setter を削除する唯一の方法は、object[name] を削除することです。 delete では、一部の共通プロパティ、ゲッターおよびセッターを削除できます。
__defineGetter__ または __defineSetter__ を使用すると、以前に定義された同じ名前のゲッターまたはセッター (プロパティも含む) がオーバーライドされます。
プラットフォーム
サポートされているブラウザは :
Firefox
Safari 3
Opera 9.5
(原文では Chrome について言及していませんでした。まだ (アウト)
次のコードを使用してブラウザをテストしました:

コードをコピーしますコードは次のとおりです。

javascript:foo={get test(){ return "foo"; }};alert(foo.test);さらに、次の 2 つのエンジンもゲッターとセッターをサポートしています:
SpiderMonkey

Rhino 1.6R6 (新規)