有關getter 和 setter的使用

什麼是getter 和 setter ？

getter: 讀取對象屬性時將被調用的函數。
setter：設置對象屬性時被調用的函數。

有如下4中方式能夠使用 setter 和 getter：

1. 對象初始化器set/get 關鍵字

使用get/set關鍵字爲屬性添加一個函數，函數名即爲屬性名，get函數不傳參，set函數傳入的參數爲設置對象的新值。

例如：

var person = {
    _name: '',
    get name() { return this._name },
    set name(newName) { this._name = newName }
}
 
// 測試
person.name // ''
person.name = 'john' // 'john', 此時 person._name 也變成了 'john'

2. Object.defineProperty()

Object.defineProperty() 方法直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性， 並返回這個對象。

語法:
Object.defineProperty(obj, prop, descriptor)

參數:
obj:

須要定義屬性的對象。

prop:

需被定義或修改的屬性名。

descriptor:

需被定義或修改的屬性的描述符。

var person = {}
var name = ''
Object.defineProperty(person, 'name', {
    configurable: true,
    enumerable: true,
    get: function() {
        return name
    },
    set: function(newName) {
        name = newName
    }
})
 
// 測試
person.name // undefind
person.name = 'john' // 'john'，此時全局的 name 也變成了 'john'

3. Object.defineProperties()

在一個對象上添加或修改一個或多個自由屬性。
用法相似Object.defineProperty()

語法

Object.defineProperties(obj, props)

參數

obj:
將要被添加屬性或修改屬性的對象      
props:     該對象的一個或多個鍵值對定義了將要爲對象添加或修改的屬性的具體配置

var obj = {a:1,b:"string"};
    Object.defineProperties(obj,{
        "A":{
            get:function(){return this.a+1;},
            set:function(val){this.a = val;}
        },
        "B":{
            get:function(){return this.b+2;},
            set:function(val){this.b = val}
        }
    });
    
//測試
    obj.A; //2
    obj.B; // "string2"
    obj.A = 3;
    obj.B = "hello";
    obj.A; // 4
    obj.B; // "hello2"

4. Object.create()

Object.create() 方法建立一個擁有指定原型和若干個指定屬性的對象。即提供新建立的對象的__proto__。

語法
Object.create(proto, [ propertiesObject ])

參數
proto:新建立對象的原型對象
propertiesObject：可選。新建立對象的可枚舉屬性對象的屬性描述符以及相應的屬性名稱，這些屬性對應Object.defineProperties()的第二個參數。

var o = null;
    o = Object.create(Object.prototype,//指定原型爲 Object.prototype
            {
                bar:{
                    get :function(){
                        return 10;
                    },
                    set : function (val) {
                        console.log("Setting `o.bar` to ",val);
                    }
                }
            }//第二個參數
        );

//測試
    o.bar; //10
    o.bar = 12; // 控制檯打印出："Setting `o.bar` to  12"

若是你但願對象屬性值只能讀取不能被修改，那麼能夠不設置set函數。

目前流行的框架Vue的響應式系統就是利用Object.defineProperty() 設置getter/setter來追蹤數據變化，從而致使視圖更新。