代理与反射(二)

使用代理模式可以实现一些有用的功能。

捕获操作

通过添加对应捕获器，就可以捕获get、set、has等操作，可以监控这个对象何时在何处被访问过，并且能在访问、修改前干想干的事，并通过反射重新实现原功能。

const user = {
  name: 'clz'
}


const proxy = new Proxy(user, {
  get(target, property, receiver) {
    console.log(`访问 ${property}`)
    return Reflect.get(...arguments)
  },
  set(target, property, value, receiver) {
    console.log(`设置 ${property}=${value}`)
    return Reflect.set(...arguments)
  }
})

console.log(proxy.name)
proxy.age = 21

这里有一个需要小小注意的点：通过代理对象的操作才会被捕获，而直接操作目标对象的操作不会被捕获。

const user = {
  name: 'clz'
}


const proxy = new Proxy(user, {
  get(target, property, receiver) {
    console.log(`访问 ${property}`)
    return Reflect.get(...arguments)
  }
})

console.log(proxy.name)
console.log(user.name)

隐藏属性

因为代理的内部实现对于外部的代码来说是不可见的，所以想要隐藏目标对象上的属性也很容易实现。我们上面说过，需要通过反射来实现原功能，但是我们也可以不实现原功能，而是返回其他值。

const user = {
  name: 'clz',
  age: 21
};


const proxy = new Proxy(user, {
  get(target, property, receiver) {
    if (property === 'name') {
      // 隐藏name属性
      return undefined;
    }
    return Reflect.get(...arguments)
  }
});

console.log(user)
console.log(user.name)
console.log(user.age)

console.log('%c%s', 'font-size:24px;color:red', '=================')

console.log(proxy)
console.log(proxy.name)
console.log(proxy.age)

从上图，我们可以知道，直接访问目标对象、目标对象属性以及访问代理对象都能能到一样的结果。但是，通过代理访问 name属性会得到 undefined，因为我们在捕获操作中进行了隐藏属性。

验证

属性验证

因为所有的赋值操作都会触发set捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值，不通过验证，直接return false即可拒绝赋值。

const user = {
  name: 'clz',
  age: 21
};


const proxy = new Proxy(user, {
  set(target, property, value) {
    if (typeof value !== 'number') {
      console.log('不是number类型，拒绝赋值')
      return false;
    } else {
      return Reflect.set(...arguments);
    }
  }
});

proxy.age = 999;
console.log(proxy.age);

proxy.age = '111';
console.log(proxy.age);

当我们返回 false时，即不通过验证，就可以不进行原始行为的实现，

函数参数验证

和验证对象属性类似，也可以对函数的参数进行审查。

首先，函数也是能使用代理的。apply捕获器会在调用函数时被调用。

function fn() { }

const proxy = new Proxy(fn, {
    apply() {
        console.log('调用函数')
    }
});

proxy(1, 2, 3, 4, 5)

所以我们应该在 apply捕获器中进行操作验证。

function mysort(...nums) {
  return nums.sort((a, b) => a - b);
}


// 在`apply`捕获器中进行参数验证
const proxy = new Proxy(mysort, {
  apply(target, thisArg, argumentsList) {
    // target: 目标对象
    // thisArg: 调用函数时的this参数
    // argumentsList: 调用函数时的参数列表

    for (const arg of argumentsList) {
      if (typeof arg !== 'number') {
        throw '函数参数必须为number';
      }
    }

    return Reflect.apply(...arguments);
  }
});

let fin = proxy(2, 1, 6, 3, 4, 3);
console.log(fin);

fin = proxy(2, 1, 'hello', 3, 4, 3);
console.log(fin);

构造函数同理，只是构造函数是通过constructor捕获器来实现代理。

function Person(name) {
  this.name = name
}

const proxy = new Proxy(Person, {
  construct() {
    console.log(123)
    return Reflect.construct(...arguments)
  }
});

const p = new proxy('clz')
console.log(p)

数据绑定

通过代理可以把原本运行中不相关的部分联系到一起。

例子：将被代理的类绑定到一个全局的实例集合，将所有创建的实例都添加到这个集合中。`

const userList = []

class User {
    constructor(name) {
        this.name_ = name;
    }
}

const proxy = new Proxy(User, {
    construct() {
        const newUser = Reflect.construct(...arguments)
        userList.push(newUser)
        return newUser
    }
})


new proxy('clz')
new proxy('czh')

console.log(userList)

事件分发程序

在开始之前，先来一个小问题。

    const nums = []

    const proxy = new Proxy(nums, {
      set(target, property, value, receiver) {
        console.log('setting')

        return Reflect.set(...arguments)
      }
    })

    proxy.push(1)

上面的代码会打印两次setting。

这是为什么呢？

让我们把它每一轮修改的属性打印出来，研究一下。

const nums = []

const proxy = new Proxy(nums, {
  set(target, property, value, receiver) {
    console.log('setting')

    console.log(property)

    return Reflect.set(...arguments)
  }
})

proxy.push(1)

我们可以发现，第一次是0，第二次是 length。也就是说，push实际上是分成两个阶段的，第一轮先修改数组，第二轮再修改数组长度，所以会打印两轮。(没有找到权威的解释，实践测试得出的结论，有问题可评论)

回到正题：可以把集合绑定给一个事件分发程序，实现每次插入新实例时，都会发送消息。

const nums = []

function emit(newValue) {
  console.log('有新数据，新数据是', newValue)
}


const proxy = new Proxy(nums, {
  set(target, property, value, receiver) {
    const result = Reflect.set(...arguments)
    // Reflect.set返回boolean值，该值指示该属性是否已成功设置

    if (result) {
      // 如果被成功设置了，调用事件分派函数，把新插入的值作为参数传过去

      emit(Reflect.get(target, property, receiver))
    }

    return result
  }
})

proxy.push(111)
proxy.push(222)
console.log(proxy)

这里可以发现，我们 push两条数据，但是会触发事件分发程序4次，这是为什么？

这就是这一小节上面讲的，push实际上是分成两个阶段的，第一轮先修改数组，第二轮再修改数组长度。

所以，我们不应该只是判断是否被成功设置，还应该判断属性是不是 length。

if (result && property !== 'length') {
  // 如果被成功设置了，调用事件分派函数，把新插入的值作为参数传过去

  emit(Reflect.get(target, property, receiver))
}