JS 中的 getter 和 setter

对象的属性是由属性名 key、值 value，和其他特性（可读写性 writable，可枚举性 enumerable，可配置性 configurable）组成的，从 ES5 开发，提供了 getter 和 setter 可以将属性值的获取和设置分别绑定到方法上，称之为“存取器”。有了 getter 和 setter 我们就能够在属性值的变更和获取时实现一些操作

存取器简单用法

// 直接在对象中创建属性的 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%

注意语法规则，是通过 get 和 set 关键字创建的 percent 属性的 getter 和 setter 函数。get 函数是没有参数的，set 函数会将等号右边的值作为参数。setter 经常和 getter 连用以创建一个伪属性。不可能在具有真实值的属性上同时拥有一个 setter 器

使用 defineProperty 创建存取器

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%