【javascript】getter/setter/static

getter/setter/static

• ディスクリプターの中にはオプションでgetter/setter/staticを追加することができる。
• オブジェクトを呼び出した時に、同時に異なる処理をしたい場合に使用する。

case1

• Person1コンストラクタにdefinePropertyを使用して、nameプロパティを追加。
• 第三引数にget, setを追加していく。

function Person1(name, age) {
    this._name = name;
    this._age = age;
}

// インスタンス化されたp1を,definePropertyで追加されたname経由でbobを出力している。
//すなわち出力される値は  _name === name となる。
Object.defineProperty(Person1.prototype, 'name',{
    get: function(){
        return this._name;
    },
    set: function(val){
        this._name = val;
    }
})

const p1 = new Person1('Bob', 45)
console.log(p1.name) >>> Bob

nameが追加されている。

case2

• setは追加されたプロパティに値を上書きすることができる。

function Person1(name, age) {
    this._name = name;
    this._age = age;
}

Object.defineProperty(Person1.prototype, 'name',{
    get: function(){
        return this._name;
    },
    set: function(val){
        this._name = val;
    }
})

const p1 = new Person1('Bob', 45)

//上書きしている。
p1.name = "Tom"
console.log(p1.name) >>> Tom

case3

• メソッドが呼ばれるときはgetterも同時に呼び出されるのでget内で異なる処理を追加することができる。

function Person1(name, age) {
    this._name = name;
    this._age = age;
}

Object.defineProperty(Person1.prototype, 'name',{
    get: function(){
        alert('hello')
        return this._name;
    },
    set: function(val){
        this._name = val;
    }
})

const p1 = new Person1('Bob', 45)

p1.name = "Tom"
console.log(p1.name)

case3

ES6からはクラスでより簡潔に書ける。

class Person2{
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    get name(){
        alert('hello')
        return this._name;
    }
    set name(val){
        this._name = val;
    }
}

const p2 = new Person2('hoge', 33)
console.log(p2.name) >>> hoge

static

• クラス内で記述できる。
• メソッドを追加
• インスタンス化しなくても使える。
  • thisが使えない。

class Person2{
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    get name(){
        alert('hello')
        return this._name;
    }
    set name(val){
        this._name = val;
    }
    static hello(){
        console.log('hello23')
    }
}

Person2.hello() >>> hello23