ES6：getとsetのいくつかの使用法

ES6：getとsetのいくつかの使用法

1.共通オブジェクトに基づく実装

const demo = {
    
    
    _name = '';
    
    get name(){
    
    
        return this._name;
    }
	set name(val){
    
    
        this._name = val;
    }
}

demo.name = 'yivi';
console.log(demo.name);		// 'yivi'

2つのクラスベースの実装

class Demo{
    
    
    constructor(){
    
    
        this._name = '';
    }
    
    get name(){
    
    
        return this._name;
    }
    
    set name(val){
    
    
        this._name = val;
    }
}

const demo = new Demo();
demo.name = 'yivi';
console.log(demo.name);		// 'yivi'

3、Object.defineProperty実現に基づいて

const demo = {
    
    
    _name : ''
}

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

demo.name = 'yivi';
console.log(demo.name);		// 'yivi'

第四に、プロキシオブジェクトに基づく実現

const demo = {
    
    
    _name : ''
}

const proxy = new Proxy(demo,{
    
    
    get: function(target,proName){
    
    
        return proName === 'name'? target['_name'] : undefined;
    },
    
    set: function(target,proName){
    
    
    	proName === 'name' && (target['_name'] = val)	
	}
})

demo.name = 'yivi';
console.log(demo.name);		// 'yivi'

5.__defineGetter__合計に基づく実現__defineSetter__（現在は廃止）

const demo = {
    
    
    _name : ''
}

demo.__defineGetter__('name',function(){
    
    
    return this._name;
})

demo.__defineSetter__('name',function(val){
    
    
    this._name = val;
})

demo.name = 'yivi';
console.log(demo.name);		// 'yivi'

6つの方法と5つの方法の違い

• 最初の2つのゲッターとセッターは、それらが定義されている場合にのみ実装でき、後の3つのメソッドは動的にプロパティを設定できます。

• プロパティを動的に追加する必要がない場合は、クラスの方法でゲッターとセッターを定義することをお勧めします。

• 属性を動的に追加する必要がある場合は、プロキシを使用して定義することをお勧めします。