代理和反射

代理 Proxy

可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。

代理是目标对象的抽象

创建代理

代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象

// 1. 目标对象
const target = {
  id: 'target'
};
// 2. 处理程序对象
const handler = {};

// 3. 创建代理对象
const proxy = new Proxy(target, handler);

// id 属性会访问同一个值 
console.log(target);  // target 
console.log(proxy);   // target 

// 给目标属性赋值会反映在两个对象上 
// 因为两个对象访问的是同一个值 
target.id = 'foo';
console.log(target.id); // foo 
console.log(proxy.id);  // foo 

// 给代理属性赋值会反映在两个对象上 
// 因为这个赋值会转移到目标对象 
proxy.id = 'bar';
console.log(target.id); // bar 
console.log(proxy.id);  // bar 

// hasOwnProperty() 方法在两个地方 
// 都会应用到目标对象 
console.log(target.hasOwnProperty('id')); // true 
console.log(proxy.hasOwnProperty('id'));  // true 

// 严格相等可以用来区分代理和目标 
console.log(target === proxy); // false

捕获器 trap

捕获器就是在处理程序对象 (handler) 中定义的“基本操作的拦截器”

// 目标对象
const target = {
  foo: 'bar'
};

// 处理程序对象
const handler = {
  // 定义一个 get() 捕获器，捕获器在处理程序对象中以方法名为键
  get() {
    return 'handler override';
  }
};

// 创建代理对象
const proxy = new Proxy(target, handler); 

console.log(target.foo);  // bar 
console.log(proxy.foo);   // handler override

// get() 捕获器会接收到目标对象、要查询的属性和代理对象三个参数
get(trapTarget, property, receiver) {};

有了三个参数，重建被捕获方法的原始行为

// 重建被捕获方法的原始行为
const target = {
  foo: 'bar'
};
const handler = {
  get(trapTarget, property, receiver) {
    return trapTarget[property];
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo);  // bar 
console.log(target.foo); // bar

反射 Reflect

处理程序对象中所有可以捕获的方法都有对应的反射（Reflect）API 方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。
反射可以更方便程序员重建被捕获方法的原始行为 (修改捕获方法)

// 目标对象
const target = {
  foo: 'bar'
};

// 处理程序对象
const handler = {
  get() {
    console.log(...arguments); // { foo: 'bar' } foo { foo: 'bar' }
    // 目标对象，查询的属性，代理对象
    return Reflect.get(...arguments);
  }
};

// 创建代理对象
const proxy = new Proxy(target, handler);

console.log(proxy.foo);   // bar 
console.log(target.foo);  // bar 

// 简写
const proxy = new Proxy(target, Reflect);

// 使用反射重建被捕获方法的原始行为
const target = {
  foo: 'bar',
  baz: 'qux'
};

const handler = {
  get(trapTarget, property, receiver) {
    let decoration = '';
    if (property === 'foo') {
      decoration = '!!!';
    }
    return Reflect.get(...arguments) + decoration;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.foo);   // bar!!! 
console.log(target.foo);  // bar 
console.log(proxy.baz);   // qux 
console.log(target.baz);  // qux

代理捕获器与反射方法

代理可以捕获 13 种不同的基本操作

get(target, property, receiver)
set(target, property, value, receiver)
has(target, property)
defineProperty(target, property, descriptor)
getOwnPropertyDescriptor()
deleteProperty()
ownKeys()
getPrototypeOf()
setPrototypeOf()
isExtensible()
preventExtensions()
apply()
construct()

代理模式

1️⃣ 跟踪属性访问

通过捕获 get、set 和 has 等操作，可以知道对象属性什么时候被访问、被查询

const user = {
  name: 'Jake'
};

const proxy = new Proxy(user, {
  get(target, property, receiver) {
    console.log(`Getting ${property}`);
    return Reflect.get(...arguments);
  },
  set(target, property, value, receiver) {
    console.log(`Setting ${property}=${value}`);
    return Reflect.set(...arguments);
  }
});

proxy.name;     // Getting name
proxy.age = 27; // Setting age=27

2️⃣ 隐藏属性

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举

const hiddenProperties = ['foo', 'bar'];
const targetObject = {
  foo: 1,
  bar: 2,
  baz: 3
};
const proxy = new Proxy(targetObject, {
  get(target, property) {
    if (hiddenProperties.includes(property)) {
      return undefined;
    } else {
      return Reflect.get(...arguments);
    }
  },
  has(target, property) {
    if (hiddenProperties.includes(property)) {
      return false;
    } else {
      return Reflect.has(...arguments);
    }
  }
});
// get()
console.log(proxy.foo);  // undefined
console.log(proxy.bar);  // undefined
console.log(proxy.baz);  // 3 
// has()
console.log('foo' in proxy);  // false
console.log('bar' in proxy);  // false
console.log('baz' in proxy);  // true

3️⃣ 属性验证

4️⃣ 函数与构造函数参数验证

5️⃣ 数据绑定与可观察对象

通过代理可以把运行时中原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作

// 把 userList 和 User关联起来，每次创建 User 实例的时候，都会把这个实例添加到 userList 数组中
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('John');
new proxy('Jacob');
new proxy('Mike');
console.log(userList);
// [User { name_: 'John' }, User { name_: 'Jacob' }, User { name_: 'Mike' }]

把集合绑定到一个事件分派程序，每次插入新实例时都会发送消息

const userList = [];

function emit(newValue) {
  console.log(newValue);
}

const proxy = new Proxy(userList, {
  set(target, property, value, receiver) {
    const result = Reflect.set(...arguments);
    // Vue 3 就是在这里执行解析模板的操作吧
    if (result) {
      emit(Reflect.get(target, property, receiver));
    }
    return result;
  }
});

proxy.push('John'); // 会有两行输出，解释如下：
// John   第一次 set 数组对象的 0 属性，value 为 "John"
// 1      第二次 set 数组对象的 length 属性，value 为 "1"
proxy.push('Jacob');
// Jacob  第一次 set 数组对象的 1 属性，value 为 "Jacob"
// 2      第二次 set 数组对象的 length 属性，value 为 "2"

代理和反射 ​

代理 Proxy ​

创建代理 ​

捕获器 trap ​

反射 Reflect ​

代理捕获器与反射方法 ​

代理模式 ​

代理和反射

代理 Proxy

创建代理

捕获器 trap

反射 Reflect

代理捕获器与反射方法

代理模式