【我不熟悉的javascript】01. 使用new Proxy功能，自定义object的setter 和getter

 每日鸡汤，每个你想要学习的念头都是未来的你向自己求救

目录

前言

setter和getter到底是个啥

​编辑使用场景

一、使用proxy代理一个对象

二、两个静态方法

1. Reflect.set(target, key, value, receiver) 

2. Reflect.get(target, key, receiver)

3.更多方法

总结

---

前言

这个适用于一个单独的js或者ts 文件，如果在vue文件里面你完全可以用vue的 computed 中的getter和setter, 可以在setter写你想要执行的操作。

setter和getter到底是个啥

（1）set 意为 设置，所以setter 可以理解为设置值的方法，既然是设置值，肯定参数至少有一个【新值】；

（2）get 意为 获取，所以getter 可以理解为获取值的方法，这个方法可以没有参数；

我们可以为任意一个对象设置setter 和getter

const obj = {
    name: 'a',
    // set和get的方法名可以相同也可以不同
    set changeName(newVal) { 
        console.log('setter调用')
        this.name = newVal
    },
    get getName() {
        console.log('getter 调用')
        return this.name
    }
}   
obj.name = 'new val'
console.log(obj)

使用场景

项目： vue2项目

需求：有一个对象

obj = {
    name: 'csdn',
    age: '110'
}

我在修改对象obj.name 之后，需要调用afterChangeName方法，来执行一系列A操作、

在修改对象obj.age之后，需要调用afterChangeAge方法 ，来执行一系列B操作

而且修改两个字段的频率比较高，假设我们直接写会是这样：

const obj = {
    name: 'csdn',
    age: 12
}

function afterChangeName() {
   // 一系列A操作
}
function afterChangeAge() {
   // 一系列B操作
}

// 入口方法
function main() {
    // ...一系列操作
    obj.name  = 'new name'
    afterChangeName()
    
    // 又...一系列操作
    obj.name  = 'new name'
    afterChangeName()

     // 又...一系列操作
    obj.name  = 'new name'
    afterChangeName()

}

在每次修改name 的时候都需要执行 afterChangeName方法，写好多遍，很麻烦，我们当然可以把修改 obj.name 的逻辑放在 afterChangeName 方法中，但是那么整个功能的逻辑就不是很清晰了。

所以我们可以使用代理 proxy ，代理整个对象，就是监控到对象obj的属性name 变化就执行afterChangeName 操作，给人一种自动执行的感觉，很好用。

代理之后，在应用的时候，只需要修改obj.name就行了，不用手动调用afterChangeName方法了，这也是vue3响应式实现的原理。

一、使用proxy代理一个对象

上述例子，我们用proxy代理object，在这个name设置值，即执行obj.name = 'csdn'的时候，就会触发代理中的setter方法，我们只需要将afterChangeName方法的操作放在setter函数中即可

const obj = new Proxy ({

    name: ''// 这是第一个参数， new proxy的第一个花括号中是一个object,就是下面的target
}, {

    set: (target, property, value, reciver) => {
         // setter中执行各种操作，存储等
         // afterChangeName() 
        return Reflect.set(target, property, value) //todo 这是赋值操作
    },
    
    get: (target, property, reciver) => {
        // 可以这样写
        // if (property === 'name') {
        //     return '更改后的name 的值';    
        // }
        // 建议这样写
        return Reflect.get(traget, property)
    }

})

console.log(obj.name) // 更改后的name 的值

二、两个静态方法

1. Reflect.set(target, key, value, receiver) 

receiver：如果遇到 setter，receiver则为setter调用时的this值。

其实就是给一个对象的属性设置值，类似于obj.key = value，就是这么简单，只是人家是函数的形式。你可以继续选择还用普通的对象的设置值的方法。

但是，代理「proxy」作为一个新的语法，给配一个新的方法，最好是配套使用他的新方法，让它骄傲一下，不足为过吧。

而且使用这个方法的好处是什么？他有boolean类型的返回值，可以返回属性的值是否设置成功。

2. Reflect.get(target, key, receiver)

同理，是和Reflect.set配套的获取的方法

3.更多方法

总结

代理是很好用的方法，虽然其实我们用的不是很多，但是理解了代理的使用方法之后，我们再去学习vue的响应式原理，就很容易搞懂了，vue3的响应式原理就是代理。