js对象中的get和set方法的实现

前言：

对象中有get和set方法，在读取和设定值的时候触发。vue中的数据绑定就是通过这个来实现的。

1. 直接在对象内使用

get用法

var user = {
    info: {
        name: "张三"
    },
    get name(){
        return this.info.name;
    }
}
    console.log(user.info.name) // '张三'
    console.log(user.name) // '张三'

作用：
(1). 在对象内属性嵌套层级过多时，可以直接在对象下读取到对应属性，简化调用；
(2). 在get时可以任意设置属性名，可以不暴露组件内部属性名。

set用法

var user = {
    info: {
        name: "张三"
    },
    set name(val){
        console.log('我改名了');
        this.info.name = val;
    }
}
    console.log(user.name) // '张三'

    user.name = '李四'; // '我改名了'
    console.log(user.name) // '李四'

作用：
(1). 在对象内属性嵌套层级过多时，可以直接在对象下设置到对应属性，简化层级；
(2). set方法内的逻辑在赋值时会自动执行，可以监听属性值的改变

2. 使用Object.defineProperty()

方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineproperty( object，‘ propName ’ ，descriptor)；

参数：

object ：要定义或修改属性的对象；
propName ：要定义或修改的属性的名称；
descriptor：要定义或修改的属性描述符。

var user = {
    user_name: '张三'
}

Object.defineProperty(user, 'name', {
    get(){
        return user.user_name
    },
    set(val){
        console.log('我改名了');
        user.user_name = val
    }

})

console.log(user.name) // '张三'
user.name = '王二'; // '我改名了'

console.log(user.name) // '王二'
console.log(user.user_name) // '王二'

作用：
set方法可以监听对应属性值的改变，vue的数据动态绑定就是通过这个方法实现的，监听到vue实例中的data属性发生改变时，在set方法中触发模版重新渲染逻辑。

3. 使用Object.defineProperties()

var user = {
    name: '张三'
}

Object.defineProperties(user, {
    nameGet: {
        value: function() {
            console.log('读取');
            return this.name;
        }
    },
    nameSet: {
        value: function(name) {
            console.log('设置');
            this.name = name;
        }
    }
 

})

console.log(user.nameGet) // '读取'  '张三'
user.nameSet = '王二'; // '设置'

console.log(user.nameSet) // '王二'

作用：
和方法1直接在对象中设置效果和原理相似

最后编辑于：2022.11.03 16:31:52