JavaScript アクセサーの実装手順_JavaScript スキル

1 つ目は比較的一般的で、Store Value を閉じることでアクセサーを実装しており、すべてのブラウザに適しています。

コードは次のとおりです。 : 関数 Sandy(val){ var 値 = val; this.getValue = function(){

戻り値; .setValue = function(val){

value = val;
}
//usage
var Sandy("test");
// => 未定義
sandy.setValue("test2")
sandy.getValue


以下は、『JavaScript 入門ガイド (第 5 中国語版)』の P152 です。 ) クロージャーの使用例。




コードをコピーします。

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

function makeProperty (o, name, predicate) { var value; //これはプロパティ値です //setter メソッドは単に値を返します o['get' name] = function() { return value ;}; //ゲッター メソッドは値を保存するか、

//述語が値を拒否した場合に例外をスローします

o['set' name] = function(v) {
if (predicate && !predicate(v) {
throw 'set' name ': 無効な値 ' v;
} else {
value = y;
}
}
}

//次のコードは makeProperty() メソッドを示します
var o = {} // ここに空のオブジェクトがあります

// プロパティ アクセサー メソッドを追加します getName and setName
//文字列値のみが許可されていることを確認します
makeProperty(o, 'Name', function(x) { return typeof x == 'string'; }); o.setName(' Frank'); // プロパティ値を設定します。
print(o.getName()); // プロパティ値を取得します。間違った型の値


2 番目の方法は、__defineSetter__ と __defineGetter__ を使用してアクセサーを実装することです。下線を見ると、それらが
標準
ではなく、適切であることがわかります。 Firefox 2.0、Safari 3.0、Google Chrome 1.0、Opera 9.5 の場合は、
MDN
を参照してください。




コードをコピー

コードは次のとおりです: function Sandy(val){ var value = val,
_watch = function(newVal) {

console.log('val isに変更されました: ' newVal); this.__defineGetter__("value", function(){ 戻り値; }); ("値", function(val){ value = val; _watch(val);

});

}

var Sandy = new Sandy("テスト") );
sandy.value
/ / => テスト
sandy.value = "test2"
// => 'val は test2' に変更されます。
// => "test2"


__defineG/Setter__ に加えて、'set' および 'get' キーワードを使用してプロトタイプ オブジェクトにアクセサーを定義することもできます。単一のオブジェクトにも適用できます。Firefox 2.0、Safari 3.0、Google Chrome 1.0、Opera 9.5 にも適用できます。






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


function Sandy(val ){
this.value = val;
}

Sandy.prototype = {

get value(){
return this._value;
},

set value(val){ this._value = val; //または var Sandy = { '_value' : 'sandy',

get value() {

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


最後のメソッドは、単一のオブジェクトに作用する Object の静的メソッド defineProperty を使用します。 ES5 のカテゴリに属する​​はずです。現在
は Chrome のみがこのメソッドをサポートしているようです。実際、Ie8 もサポートしていますが、操作対象は Dom ノード (Dom ノード) に限定されています。
を参照してください。 IEBlog
については、
MDN
を参照してください。




コードをコピーします


コードは次のとおりです。以下のように:

var Sandy = {}, rValue;
Object.defineProperty(sandy, 'value' ,
{
'set' : function(val) {
rValue = val;
},
'get' : function() {
return rValue;
},
'enumerable' : true,
'configurable' : true
}
)
//Ie8
Object.defineProperty(document.body, "description", {
get : function () {
return this.desc;
},
set : function (val) {
this.desc = val;
}
});
document.body.description = "コンテンツコンテナ"
// document.body.descriptionここでは「Content Container」を返します。

'enumerable','configuralbe' は、ES5 仕様のプロパティ属性 (属性特性) に属します。ここでは説明しません。 ES5 のドキュメントを直接検索してください。