JavaScript getter setter 的好处和数据验证

45 阅读2分钟

getter和setter是访问器属性(accessor property)。它们本质上是用于获取和设置值的函数,但从外部代码来看就像常规属性。

getter 和 setter 的好处

满足封装的特性

getter的作用就是给对象加了一层拦截,保护属性本身不被篡改。比如有些属性只是可读但不可写,那么只提供它的getter方法就好,意思就是某些属性只能单一方向的被访问,getter和setter就是提供这样的接口,

保证数据的安全性:

通过 getter 方法,可以只读取属性值,而不改变其定义的属性值。通过 setter 方法,可以对传入的参数进行验证或处理,防止非法或错误的赋值 setter 也可对新的值进行过滤,判断是否符合条件

实现属性的动态绑定:

通过 getter 和 setter 方法,可以将属性值的获取和设置分别绑定到方法上,称之为“存取器”。这样,可以实现属性值的动态计算或更新,而不是固定的值

例子

class Person {
    constructor({name, age}) { //解构赋值
        this.name = name;
        this.age = age;
    }
    // getter方法
    get info() {
        console.log("get info:" + this.name, this.age);
    }
    // setter方法
    set info(value) {
        console.log("set info:", value)
        let part = value.split(",")
        this.name = part[0]
        this.age = part[1]
        // console.log(this.name, this.age)
    }
}

let person = new Person({name: "tim", age: 34});

person.info //通过访问属性的方式访问对象内部
person.info = "bob 34" //通过访问属性的方式给数据赋值

output

get info:tim 34
set info: bob 34

图示

image.png 如果直接访问info的话就是访问getter

给info 赋值, 就是给传参给setter里的value

给setter 加个验证

给setter的数据加一个限制,姓名不长度不能为1,年龄介于0~100之间

set info(value) {
    console.log("set info:", value)
    let part = value.split(",")
    let age = parseInt(part[1])

    if (part[0].length <= 1) {
        throw new Error("姓名长度大于1")
    } else {
        this.name = part[0]
    }
    if (age > 0 && age < 100) {
        this.age = age
    } else {
        throw new Error("年龄大于0 小于100")
    }
    // console.log(this.name, this.age)
}

person.info = "tt,0"

output

C:\Users\zy\dev\proxy\getter.js:26
            throw new Error("年龄大于0 小于100")
            ^