ECMAScript 6（19）Reflect

向右看齐 2021-07-26 13:27 349阅读 0赞

# Reflect #

## 1. 是什么? ##

1.  一种操作对象的新的API
2.  原Object所有属性方法，新API都有(原来那一套存在缺陷)
3.  返回值更加合理（失败返回false而不是抛错）；
4.  函数式调用（而非属性式）
5.  在使用Proxy时，使用本方法效果比直接通过对象属性调用效果更好

## 2. 怎么用? ##

### 2.1 读取 ###

> Reflect.get(target, propertyKey\[, receiver\]) 
> 
> //  参数理解 target目标对象  propertyKey目标对象的属性 receiver遇见getter时，将getter的this指向他

参数1,2比较好理解

let people = {
        _name:'xiaoming',
        get name() {
        return this._name
        }
    }
    
    Reflect.get(people, "_name")  // xiaoming
    Reflect.get(people, "name")  // xiaoming

参数3

###  2.2 写 ###

> Reflect.set(target, propertyKey, value\[, receiver\])
> 
> // value 是要写入的属性值,其他参数和get一样

### 3 观察者模式 ###

// 存储观察者函数，用数组也可以,属性一旦变化就依次执行这里面函数
    const queuedObservers = new Set();
    
    // 把要执行的函数添加到上面定义的列表里面
    const observe = fn => queuedObservers.add(fn);
    
    // 定义observable函数，将该对象添加代理后返回proxy实例
    const observable = obj => new Proxy(obj, {set});
    
    // handler，执行时会调用观察者里函数列表里的每个观察者
    // 主要就是proxy里面的set方法
    function set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      queuedObservers.forEach(observer => observer());
      return result;
    }
    
    // 对对象进行代理绑定,创建proxy对象
    const person = observable({
        name: '张三',
        age: 20
    });
    
    // 定义要执行的函数
    function print() {
        console.log(`${person.name}, ${person.age}`)
    }
    // 将函数添加到观察者函数列表里面
    observe(print)
    
    person.name = '李四'
    // 李四,20

有点不好理解,简单来说就是通过Proxy的 set方法监听到属性变化, 就执行相应函数, 主要还是Proxy