ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript Getters および Setters プラットフォームのサポートなどの詳細な紹介。

JavaScript Getters および Setters プラットフォームのサポートなどの詳細な紹介。

高洛峰
リリース: 2017-01-03 17:06:37
オリジナル
1162 人が閲覧しました

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

{ 
getValue: function(){ 
return this._value; 
}, 
setValue: function(val){ 
this._value = val; 
} 
}
ログイン後にコピー

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

function Field(val){ 
var value = val; 
this.getValue = function(){ 
return value; 
}; 
this.setValue = function(val){ 
value = val; 
}; 
}
ログイン後にコピー

したがって、次のように使用できます:

var field = new Field("test"); 
field.value 
// => undefined 
field.setValue("test2") 
field.getValue() 
// => "test2"
ログイン後にコピー

上の例の「隠し値属性」をシミュレートしてみましょう。コードは次のとおりです:

function Field(val){ 
var value = val; 
this.__defineGetter__("value", function(){ 
return value; 
}); 
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 Array map() 
return users.map(function(user){ 
return user.name; 
}); 
}; 
}
ログイン後にコピー

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

// Helper method for extending one object with another 
function extend(a,b) { 
for ( var i in b ) { 
var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i); 
if ( g || s ) { 
if ( g ) 
a.__defineGetter__(i, g); 
if ( s ) 
a.__defineSetter__(i, s); 
} else 
a[i] = b[i]; 
} 
return a; 
}
ログイン後にコピー

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

オブジェクト a に i という名前のセッターが存在し、オブジェクト b に i という名前のゲッターが存在する場合、a[i] の値は設定されていませんでした。 2 つの __lookup*__ メソッドを使用すると、他の setter 関数にアクセスできますが、b の getter 関数から計算された値にアクセスできます (つまり、効果的な extend メソッドを作成することができます)。次の点に注意してください:
オブジェクトでは、各変数はゲッターまたはセッターを 1 つだけ持つことができます。 (つまり、value には getter と setter を含めることができますが、value に 2 つの getter を含めることはできません)
getter または setter を削除する唯一の方法は、delete object[name] です。 delete では、一部の共通プロパティ、ゲッターおよびセッターを削除できます。
__defineGetter__ または __defineSetter__ を使用すると、以前に定義された同じ名前のゲッターまたはセッター (プロパティも) がオーバーライドされます。プラットフォーム サポートのゲッターとセッター:
SpiderMonkey
Rhino 1.6R6 (新規)

JavaScript のゲッターとセッター プラットフォーム サポートの詳細な紹介と関連記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート