イナヅマTVログ

JavaScriptでgetter/setter、いけてるブラウザでね

| 0件のコメント

無知をさらけ出すようで恥ずかしいけどJavaScriptでもgetter/setterが実装されてる様子。
IE 8以下を切り捨てる条件付きだけど…
MDN: get
MDN: set
MDN: Working with Objects

MDNのブラウザ実装状況を見る限りクズなIE 8以下を切り捨てればモダンと言われているブラウザでは使える模様。

普段IE 6の面倒を見る仕事ばかりやってたので気づかなかった。

<div id="insert_area"></div>
( function ( window ){
    "use strict";
 
    function GetterSetterTest () {
        this._insert_area = document.getElementById( "insert_area" );
    }
 
    GetterSetterTest.prototype = {
        constructor: GetterSetterTest,
 
        get areaText () {
            return this._insert_area.innerHTML;
        },
        set areaText ( txt ) {
            this._insert_area.innerHTML = txt;
        }
    };
 
    var test = new GetterSetterTest();
 
    test.areaText = "<p>Hello</p>";
    console.log( test.areaText );
    test.areaText = "<p>World</p>";
    console.log( test.areaText );
}( window ) );

ふ〜〜ん、コードがだいぶ美しくなる。
Canvasなプロジェクトとかに使えるよね。

deleteがよくわかんない

MDN: delete

var result = delete test.areaText;
console.log( result, test.areaText );
// true <p>World</p>

prototypeにくっつけちゃうとdeleteできない模様。
Chrome 31.0.1650.57

var o = {
    get color () {
        return this._color;
    },
    set color ( hex ) {
        this._color = hex;
    }
};
 
console.log( o.color );// undefined
o.color = 0xff0000;
console.log( o.color );//16711680 
delete o.color;
console.log( o.color );// undefined

Objectのgetter/setterはdeleteされるのねん。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください