インターネットの美しさ JavaScript_javascript スキルの Get および Set アクセサーの実装コード

標準の Get および Set アクセサーの実装

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

関数フィールド( val){
this.value = val;
}
Field.prototype = {
get value(){
return this._value;
set;値 (val){
this._value = val;
};
var フィールド = new Field("test"); > //field.value は "test2" を返すようになります


次のブラウザでは正常に動作します:

一般的に使用される実装方法は次のようになります:

コードをコピー

コードは次のとおりです: 関数フィールド(val){ var value = val;

this.getValue = function(){
戻り値; .setValue = function(val){
value = val;
}
var フィールド = new Field("test");
field.setValue("test2"); 🎜>field .getValue() // return "test2"


DOM 要素に対する Get および Set アクセサーの実装




コードをコピー

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

HTMLElement.prototype.__defineGetter__("description", function () { return this.desc; }); HTMLElement .prototype.__defineSetter__("description", function (val) { this.desc = val; }); document.body.description = "美しいボディ"; // document.body.description は「Beautiful body」を返すようになりました。

は次のブラウザで正常に動作します。






Object.defineProperty を通じてアクセサーを実装します

将来的には、オブジェクトを拡張する ECMAScript 標準メソッドが Object.defineProperty を通じて実装される予定です。そのため、IE8 はこのメソッドを通じて get および set アクセサーを実装します。残念なことに、Microsoft はまだ非常に先見の明があるようです。 . 現在、これをサポートしているのは IE8 と Chrome 5.0 だけであり、他のブラウザはサポートしていません。また、IE8 は DOM 要素のみをサポートしていますが、将来のバージョンでは Chrome などの通常の JavaScript オブジェクトもサポートする予定です。 DOM 要素に対する Get および Set アクセサーの実装

コードをコピー

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

Object.defineProperty(document.body, "description", {
get : function () {
return this.desc;

}, set : function (val) { this.desc = val; } }); document.body.description = "コンテンツ コンテナ"; // document.body.description は "コンテンツ コンテナ" を返すようになります>

次のブラウザでは正常に動作します:



通常のオブジェクトの Get および Set アクセサーの実装




コードをコピー

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

var loss = { loc : "島"

};
Object.defineProperty(lost, "location", {

get : function () { return this.loc; }, set : function (val) { this.loc = val; lost.location = "別のisland" ; // Lost.location は「別の島」を返すようになりました

は、次のブラウザで正常に動作します。




この記事の概要


Microsoft の IE は Object.defineProperty のみをサポートしており、Get および Set アクセサーを完全には実装していませんが、IE では大きな進歩が見られ、特にリリースされたばかりの IE9 で使用される新しい JavaScript エンジンでは、HTML5 と CSS3 がサポートされています。ハードウェア アクセラレーションなど。私は、いつかすべてのブラウザが標準を完全に受け入れて、完璧な WEB 世界をもたらすことができると信じています。

参考:

1.
JavaScript のゲッターとセッター

2.

JavaScript のゲッターとセッター

作成者: Dream