對象的屬性是由屬性名 key、值 value，和其他特性（可讀寫性 writable，可枚舉性 enumerable，可配置性 configurable）組成的，從 ES5 開發(fā)，提供了 getter 和 setter 可以將屬性值的獲取和設置分別綁定到方法上，稱之為“存取器”。有了 getter 和 setter 我們就能夠在屬性值的變更和獲取時實現(xiàn)一些操作

存取器簡單用法

// 直接在對象中創(chuàng)建屬性的 getter 和 setter，并進行測試
let obj = {
    num: 50,
    get percent() {
        return this.num + "%"
    },
    set percent(value) {
        console.log("調用了 setter", this.num)
        this.num = value
    }
}
console.log(obj)            // { num: 50, percent: [Getter/Setter] }
console.log(obj.percent)    // 50%

obj.percent = 60            // "調用了 setter", 50
console.log(obj)            // { num: 60, percent: [Getter/Setter] }
console.log(obj.percent)    // 60%

注意語法規(guī)則，是通過 get 和 set 關鍵字創(chuàng)建的 percent 屬性的 getter 和 setter 函數(shù)。get 函數(shù)是沒有參數(shù)的，set 函數(shù)會將等號右邊的值作為參數(shù)。setter 經常和 getter 連用以創(chuàng)建一個偽屬性。不可能在具有真實值的屬性上同時擁有一個 setter 器

使用 defineProperty 創(chuàng)建存取器

let obj = {
    num: 50
}
console.log(obj)    // { num: 50 }

Object.defineProperty(obj, 'percent', {
    configurable: true,
    enumerable: true,
    writable: true,
    // value: 40,
    get: function () {
        return this.num + "%"
    },
    set: function (value) {
        console.log('屬性值更新：', value)
        this.num = value
    }
});
console.log(obj)    // { num: 50, percent: [Getter/Setter] }
obj.percent = 60    // 屬性值更新： 60
console.log(obj)    // { num: 60, percent: [Getter/Setter] }

class中的存取器

class obj {
    constructor(number) {
        this.number = number
    }

    get percent() {
        return this.number + "%"
    }

    set percent(value) {
        console.log("值更新")
        this.number = value
    }
}
var object = new obj(10)

console.log(object)           // obj { number: 10 }
console.log(object.percent)   // 10%
object.number = 20            // 值更新
console.log(object.percent)   // 20%