JS —— 存取器属性get()和set()

上篇讲到可以用属性描述符来对属性做一些描述，以及用来描述属性的四个属性(value，configurable，enumerable，writable)。这篇讲的存取器属性就是在属性描述符中配置get()和set()方法，配置这两个方法之后，该属性就不是一个普通属性了。存取器属性最大的意义，在于可以控制属性的读取和赋值。

如果一个属性是存取器属性，则读取该属性时，会运行get方法，将get方法得到的返回值作为属性值，如果给该属性赋值，则会运行set方法。举个栗子来理解一下叭~

【例1】

const obj = {
    b:2
}
Object.defineProperty(obj,'a',{
    get() {
        console.log("运行了属性a的get函数")
    },
    set() {
        console.log("运行了属性a的set函数")
    }
})
obj.a = 10;
console.log(obj.a)

【结果】可以看到，在对a进行赋值时，运行了set()，在访问a时，运行了get()，且因为get函数没有返回值，所以得到的值为undefined

要想实现上面的效果，即赋的值等于读取到的值，可以借用第三参数，如下

const obj = {
    b:2
}
Object.defineProperty(obj,'a',{
    get() {
        console.log("运行了属性a的get函数");
        return obj._a;
    },
    set(val) {
        console.log("运行了属性a的set函数");
        obj._a = val;
    }
})
//以下代码相当于set(10)
obj.a = 10;
console.log(obj.a);

 【结果】

【注】get函数不能传参，set函数可以传一个参数

【例2】小练习：输入年龄，限定年龄范围在0-200岁，且输入必须为数字类型，输出XX岁。

obj = {
    name: 'jwh'
}
Object.defineProperty(obj, 'age', {
    get() {
        return `${obj._age}岁`;
    },
    set(val) {
        if (typeof val !== "number") {
            throw new TypeError("年龄必须是一个数字");
        }
        if (val < 0) {
            val = 0;
        } else if (val > 200) {
            val = 200;
        }
        obj._age = val;
    }
})
obj.age = 33;
console.log(obj.age);
obj.age = -10;
console.log(obj.age);
obj.age = 222;
console.log(obj.age);
obj.age = "aaa";
console.log(obj.age);

【结果】