js 的属性访问器 getter 和 setter 的基本用法

基本使用

const user = {
    // user.name 获取不到
    data: {
        name: "张三",
        age: 18
    },
    // setter 只有一个参数
    set age(value) {
        if (typeof value != 'number' || value <= 0 || value >= 100) {
            throw new Error("年龄格式错误")
        }
        this.data.age = value
    }, 
    // getter 
    get age() {
        return this.data.age
    }
}
console.log(user.age) //18
user.age = 20
console.log(user.age) //20

当有多个 getter 和 setter 时，也可以用下面的方式

const user = {
    // 算是假的私有吧（ user.name 获取不到）
    data: {
        name: "张三",
        age: 18
    },
    name: {
        get() {
            return this.data.name
        },
        set(value) {
            this.data.name = value
        }
    },
    age: {
        get() {
            return this.data.age
        },
        set(value) {
            this.data.age = value
        }
    }
}
user.age = 22
console.log(user.age) //22
user.name = "李四"
console.log(user.name) //李四

访问器伪造属性造作

let lesson = {
    list: [
        {name: "js", price: 100},
        {name: "php", price: 120},
        {name: "mysql", price: 89}
    ],
    get total() {
        return this.list.reduce((total, cur) => total + cur.price, 0)
    }
}
console.log(lesson.total) //309

可能遇到的坑

const user = {
    name: "张三",
    age: 18,
    set name(value) {
        this.name = value
    },
    get name() {
        return this.name
    }
}
console.log(user.name) // Maximum call stack size exceeded
user.name = "李四" // Maximum call stack size exceeded

这里的 getter 和 setter 都有问题

user.name 是走 getter 方法，返回一个 this.name，也就是 user.name，所以还会继续走 getter 方法，最后栈溢出。

setter 同理。