JavaScript 高级程序设计（第 4 版）- 代理和反射

ES6 新增的代理和反射提供了拦截并向基本操作嵌入额外行为的能力。即可以给目标对象定义一个关联的代理对象，而该代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。

# 代理基础

# 创建空代理

代码语言：javascript复制

const target = {
  id: 'target'
};
const handler = {};
const proxy = new Proxy(target, handler);

// id 属性会访问同一个值
console.log(target.id); // target
console.log(proxy.id); // 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

// Proxy.prototype是 undefined，因此不能使用instanceof
// 严格相等可以用来区分代理和目标
console.log(target === proxy); // false

# 定义捕获器

捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。

代码语言：javascript复制

const target = {
  foo: 'bar'
};
const handler = {
  // 捕获器在处理程序对象中以方法名为键
  get() {
    return 'handler override';
  }
};

// 当通过代理对象执行get()操作时，就会触发定义的get()捕获器。
// proxy[property]、proxy.property或Object.create(proxy)[property]等操作都会触发基本的get()操作以获取属性
const proxy = new Proxy(target, handler);

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

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

console..log(Object.create(target)['foo']); // bar
console.log(Object.create(proxy)['foo']); // handler override

# 捕获器参数和反射API

所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。如get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数。

代码语言：javascript复制

const target = {
  foo: 'bar'
};
const handler = {
  get(trapTarget, property, receiver) {
    console.log(trapTarget === target);
    console.log(property);
    console.log(receiver === proxy);
  }
};
const proxy = new Proxy(target, handler);

proxy.foo;
// true
// foo
// true

可以通过调用全局Reflect对象上的同名方法来进行重建，处理程序对象中所有可以捕获的方法都有对应的反射API方法。这些方法与捕获器拦截的方法具有相同的名称和函数签名，而且也具有与被拦截方法相同的行为。

代码语言：javascript复制

const target = {
  foo: 'bar'
};
const handler = {
  get() {
    return Reflect.get(...arguments);
  }
  // 也可以直接简写
  // get: Reflect.get 
};
const proxy = new Proxy(target, handler);
console.log(proxy.foo); // bar
console.log(target.foo); // bar

如果要创建一个可以捕获所有方法，然后将每个方法转发给对应反射API的空代理，那么甚至可以不需要定义处理程序对象

代码语言：javascript复制

const target = {
  foo: 'bar'
};
const proxy = new Proxy(target, Reflect);
console.log(proxy.foo); // bar
console.log(target.foo); // bar

Reflect API为开发者准备好了样板代码，在此基础上开发者可以使用最少的代码修改捕获的方法

代码语言：javascript复制

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

# 捕获器不变式

每个捕获的方法都知道目标对象上下文、捕获函数签名，而捕获处理程序的行为必须遵循“捕获器不变式”。捕获器不变式因为方法不同而异，但通常都会防止捕获器定义出现过于反常的行为。（如目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出TypeError）

# 可撤销代理

Proxy暴露revocable()方法，支持撤销代理对象与目标对象的关联。撤销代理操作不可逆。

代码语言：javascript复制

const target = {
  foo: 'bar'
};
const handler = {
  get() {
    return 'intercepted';
  }
};
// 撤销函数和代理对象是在实例化时同时生成的
const { proxy, revoke } = Proxy.revocable(target, handler);

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

revoke();

console.log(proxy.foo); // TypeError

# 实用反射API

# 反射API与对象API

• 反射API并不限于捕获处理程序
• 大多数反射API方法在Object类型上有对应的方法
• Object上的方法适用于通用程序，而反射方法适用于细粒度的对象控制与操作

# 状态标记

• 很多反射方法返回称作“标记状态”的布尔值，表示意图执行的操作是否成功
  • Reflect.defineProperty()
  • Reflect.preventExtensions()
  • Reflect.setPrototypeOf()
  • Reflect.set()
  • Reflect.deleteProperty()

代码语言：javascript复制

const o = {};
// 初始代码
try {
  Object.defineProperty(o, 'foo', 'bar');
  console.log('success');
} catch (e) {
  console.log('failure');
}
// 重构
if (Reflect.defineProperty(o, 'foo', { value: 'bar' })) {
  console.log('success');
} else {
  console.log('failure');
}

# 用一等函数替代操作符

• 以下反射方法提供只有通过操作符才能完成的操作
  • Reflect.get(): 替代对象属性访问操作符
  • Reflect.set(): 替代=赋值操作符
  • Reflect.has(): 替代in操作符或with()
  • Reflect.deleteProperty(): 替代delete
  • Reflect.constructor()：替代new

# 安全地应用函数

在通过apply调用函数时，被调用的函数可能也定义了自己的apply属性，为了绕过该问题，可以使用Function原型的apply，但代码复杂。此时可以使用Reflect来避免

代码语言：javascript复制

Function.prototype.apply.call(myFunc, thisVal, arguments);

Reflect.apply(myFunc, thisVal, arguments);

# 代理另一个代理

代理和拦截反射API的操作，即完全可以创建一个代理，通过它去代理另一个代理。

代码语言：javascript复制

const target = {
  foo: 'bar'
};
const firstProxy = new Proxy(target, {
  get() {
    console.log('first proxy');
    return Reflect.get(...arguments);
  }
});
const secondProxy = new Proxy(target, {
  get() {
    console.log('second proxy');
    return Reflect.get(...arguments);
  }
});
console.log(secondProxy.foo);
// second proxy
// first proxy
// bar

# 代理的问题与不足

• 代理中的this
• 代理与内部槽位
  • 有些ES内置类型可能会依赖代理无法控制的机制，结果导致在代理上调用某些方法会出错
  • 如Date类型，Date类型方法的执行依赖this值上的内部槽位[[NumberDate]],代理对象上不存在这个内部槽位，而且该内部槽位的值也不能太过普通的get()和set()操作访问到，于是代理拦截后本应转发给目标对象的方法会抛出TypeError

# 代理模式

# 跟踪属性访问

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

# 隐藏属性

代码语言：javascript复制

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);
    }
  }
});

# 属性验证

代码语言：javascript复制

const target = {
  onlyNumbersGoHere: 0
};
const proxy = new Proxy(target, {
  set(target, property, value) {
    if (typeof value !== "number") {
      return false;
    } else {
      return Reflect.set(...arguments);
    }
  }
});

# 函数与构造函数参数验证

• 让函数只接受某种类型的值

代码语言：javascript复制

function median(...nums) {
  return nums.sort()[Math.floor(nums.length / 2)];
}
const proxy = new Proxy(median, {
  apply(target, thisArg, argumentsList) {
    for(const arg of argumentsList) {
      if (typeof arg !== 'number') {
        throw 'Non-number argument provided';
      }
    }
    return Reflect.apply(...arguments);
  }
});

• 要求实例化时必须给构造函数传参

代码语言：javascript复制

class User {
  constructor(id) {
    this.id_ = id;
  }
}
const proxy = new Proxy(User, {
  construct(target, argumentsList, newTarget) {
    if (argumentsList[0] === undefined) {
      throw 'User cannot be instantiated without id';
    } else {
      return Reflect.construct(...arguments);
    }
  }
});

# 数据绑定与可观察对象

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

代码语言：javascript复制

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;
  }
});

javascript 程序设计 代理 对象 反射

0 人点赞