[ES6] Proxy & Reflect

Proxy 与 Reflect 是 ES6 为了操作对象引入的 API

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作

Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的

Proxy

一个 Proxy 对象由两个部分组成： target 、 handler 。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。

let target = {
  name: "Tom",
  age: 24
};
let handler = {
  get: function (target, key) {
    console.log("getting " + key);
    return target[key]; // 不是 target.key
  },
  set: function (target, key, value) {
    console.log("setting " + key);
    target[key] = value;
  }
};
let proxy = new Proxy(target, handler);
proxy.name; // 实际执行 handler.get
// getting name
proxy.age = 25; // 实际执行 handler.set
// setting age
// 25

// target 可以为空对象
let targetEpt = {};
let proxyEpt = new Proxy(targetEpt, handler);
// 调用 get 方法，此时目标对象为空，没有 name 属性
proxyEpt.name; // getting name
// 调用 set 方法，向目标对象中添加了 name 属性
proxyEpt.name = "Tom";
// setting name
// "Tom"
// 再次调用 get ，此时已经存在 name 属性
proxyEpt.name;
// getting name
// "Tom"

// 通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相影响
targetEpt;
// {name: "Tom"}

// handler 对象也可以为空，相当于不设置拦截操作，直接访问目标对象
let targetEmpty = {};
let proxyEmpty = new Proxy(targetEmpty, {});
proxyEmpty.name = "Tom";
targetEmpty; // {name: "Tom"}

实例方法

get(target, propKey, receiver)

用于 target 对象上 propKey 的读取操作

let exam = {
  name: "Tom",
  age: 24
};
//定义get
let proxy = new Proxy(exam, {
  get(target, propKey, receiver) {
    console.log("Getting " + propKey);
    return target[propKey];
  }
});
//使用get
proxy.name;
// Getting name
// "Tom"

get() 方法可以继承

let proxy = new Proxy(
  {},
  {
    get(target, propKey, receiver) {
      // 实现私有属性读取保护
      if (propKey[0] === "_") {
        throw new Error(`Invalid attempt to get private  "${propKey}"`);
      }
      console.log("Getting " + propKey);
      return target[propKey];
    }
  }
);

let obj = Object.create(proxy);
obj.name; // Getting name

set(target, propKey, value, receiver)

用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性，不可写且不可配置，那么 set 方法将不起作用。

• target: 表示目标对象
• propKey: 表示目标对象上要赋值的属性
• value: 表示目标对象上要设置的属性的值
• receiver: 表示原始操作行为所在对象,一般是 Proxy 实例本身

//定义 set
let validator = {
  set: function (obj, prop, value) {
    if (prop === "age") {
      if (!Number.isInteger(value)) {
        throw new TypeError("The age is not an integer");
      }
      if (value > 200) {
        throw new RangeError("The age seems invalid");
      }
    }
    // 对于满足条件的 age 属性以及其他属性，直接保存
    obj[prop] = value;
  }
};
let proxy = new Proxy({}, validator);
proxy.age = 100;
proxy.age; // 100
proxy.age = "words"; // 报错
proxy.age = 300; // 报错

receiver 的使用示例：

const handler = {
  set: function (obj, prop, value, receiver) {
    obj[prop] = receiver;
  }
};
const proxy = new Proxy({}, handler);
//使用 set
proxy.name = "Tom";
proxy.name === proxy; // true

const exam = {};
Object.setPrototypeOf(exam, proxy);
exam.name = "Tom";
exam.name === exam; // true

注意，严格模式下，set 代理如果没有返回 true，就会报错。

函数操作

apply(target, ctx, args)

用于拦截函数的调用 call 和 reply 操作。

• target 表示目标对象
• ctx 表示目标对象上下文
• args 表示目标对象的参数数组。

function sub(a, b) {
  return a - b;
}
let handler = {
  apply: function (target, ctx, args) {
    console.log("handle apply");
    console.log(arguments);
    //[Arguments] { '0': [Function: sub], '1': undefined, '2': [ 2, 1 ] }
    return Reflect.apply(...arguments);
  }
};
let proxy = new Proxy(sub, handler);
proxy(2, 1);
// handle apply
// 1

has(target, propKey)

用于拦截 HasProperty 操作，即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截。此方法不判断一个属性是对象自身的属性，还是继承的属性。

let handler = {
  has: function (target, propKey) {
    console.log("handle has");
    return propKey in target;
  }
};
let exam = { name: "Tom" };
let proxy = new Proxy(exam, handler);
"name" in proxy; // handle has
// true

注意：此方法不拦截 for … in 循环。

construct(target, args)

用于拦截 new 命令,返回值必须为对象

let handler = {
  construct: function (target, args, newTarget) {
    console.log("handle construct");
    return Reflect.construct(target, args, newTarget);
  }
};
class Exam {
  constructor(name) {
    this.name = name;
  }
}
let ExamProxy = new Proxy(Exam, handler);
let proxyObj = new ExamProxy("Tom");
console.log(proxyObj);
// handle construct
// exam {name: "Tom"}

deleteProperty(target, propKey)

用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除。

defineProperty(target, propKey, propDesc)

用于拦截 Object.defineProperty, 若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性。

let handler = {
  defineProperty: function (target, propKey, propDesc) {
    console.log("handle defineProperty");
    return true;
  }
};
let target = {};
let proxy = new Proxy(target, handler);
proxy.name = "Tom";
// handle defineProperty
target; // 理论:{name: "Tom"} 实际 :{}

// defineProperty 返回值为 false，添加属性操作无效
let handler1 = {
  defineProperty: function (target, propKey, propDesc) {
    console.log("handle defineProperty");
    return false;
  }
};
let target1 = {};
let proxy1 = new Proxy(target1, handler1);
proxy1.name = "Jerry";
target1; // {}

这里限定是有限制的，如果设置 set 方法，defineProperty 的返回值没有作用

getOwnPropertyDescriptor(target, propKey)

用于拦截 Object.getOwnPropertyDescriptor() 返回值为属性描述对象或者 undefined 。

let handler = {
  getOwnPropertyDescriptor: function (target, propKey) {
    return Object.getOwnPropertyDescriptor(target, propKey);
  }
};
let target = { name: "Tom" };
let proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, "name");
// {value: "Tom", writable: true, enumerable: true, configurable: true}
Object.getOwnPropertyDescriptor(target, "name");
// {value: "Tom", writable: true, enumerable: true, configurable: true}

原型属性

getPrototypeOf(target)

主要用于拦截获取对象原型的操作，所以所有用于获取对象原型的操作(方法或属性)均会被 getPrototypeOf(target)影响。以下是受到影响的操作：

• Object.prototype.proto
• Object.prototype.isPrototypeOf()
• Object.getPrototypeOf()
• Reflect.getPrototypeOf()
• instanceof

let exam = {};
let proxy = new Proxy(
  {},
  {
    getPrototypeOf: function (target) {
      return exam;
    }
  }
);
Object.getPrototypeOf(proxy); // {}

注意，返回值必须是对象或者 null ，否则报错。另外，如果目标对象不可扩展（non-extensible），getPrototypeOf 方法必须返回目标对象的原型对象。

let proxy = new Proxy(
  {},
  {
    getPrototypeOf: function (target) {
      return true;
    }
  }
);
Object.getPrototypeOf(proxy);
// TypeError: 'getPrototypeOf' on proxy: trap returned neither object nor null

isExtensible(target)

用于拦截 Object.isExtensible 操作，Object.isExtensible 操作受到该方法影响

该方法只能返回布尔值，否则返回值会被自动转为布尔值。

let proxy = new Proxy(
  {},
  {
    isExtensible: function (target) {
      return true;
    }
  }
);
Object.isExtensible(proxy); // true

注意：它的返回值必须与目标对象的 isExtensible 属性保持一致，否则会抛出错误。

let proxy = new Proxy(
  {}, //本身可扩展
  {
    isExtensible: function (target) {
      return false;
    }
  }
);
Object.isExtensible(proxy);
// TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')

ownKeys(target)

用于拦截对象自身属性的读取操作，所有读取对象属性的操作均受到该方法影响。主要包括以下操作：

• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Object.keys()
• or…in

以上操作的返回值会受到 ownKeys 方法的影响

方法返回的数组成员，只能是字符串或 Symbol 值，否则会报错。

若目标对象中含有不可配置的属性，则必须将这些属性在结果中返回，否则就会报错。

若目标对象不可扩展，则必须全部返回且只能返回目标对象包含的所有属性，不能包含不存在的属性，否则也会报错。

let proxy = new Proxy(
  {
    name: "Tom",
    age: 24
  },
  {
    ownKeys(target) {
      return ["name"];
    }
  }
);
Object.keys(proxy); // [ 'name' ]
// 返回结果中，三类属性会被过滤：
// - 目标对象上没有的属性
// - 属性名为 Symbol 值的属性
// - 不可遍历的属性

let target = {
  name: "Tom",
  [Symbol.for("age")]: 24
};
// 添加不可遍历属性 'gender'
Object.defineProperty(target, "gender", {
  enumerable: false,
  configurable: true,
  writable: true,
  value: "male"
});
let handler = {
  ownKeys(target) {
    return ["name", "parent", Symbol.for("age"), "gender"];
  }
};
let proxy = new Proxy(target, handler);
Object.keys(proxy); // ['name']

preventExtensions(target)

拦截 Object.preventExtensions 操作。

该方法必须返回一个布尔值，否则会自动转为布尔值。

// 只有目标对象不可扩展时（即 Object.isExtensible(proxy) 为 false ），
// proxy.preventExtensions 才能返回 true ，否则会报错
var proxy = new Proxy(
  {},
  {
    preventExtensions: function (target) {
      return true;
    }
  }
);
Object.preventExtensions(proxy);
// 由于 proxy.preventExtensions 返回 true，此处也会返回 true，但是proxy的target对象是可扩展的， 因此会报错 TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible

// 解决方案
var proxy = new Proxy(
  {},
  {
    preventExtensions: function (target) {
      // 返回前先调用 Object.preventExtensions
      Object.preventExtensions(target);
      return true;
    }
  }
);
Object.preventExtensions(proxy);
// Proxy {}

setPrototypeOf

主要用来拦截 Object.setPrototypeOf 方法。

返回值必须为布尔值，否则会被自动转为布尔值。

若目标对象不可扩展，setPrototypeOf 方法不得改变目标对象的原型。

let proto = {};
let proxy = new Proxy(function () {}, {
  setPrototypeOf: function (target, proto) {
    console.log("setPrototypeOf");
    return true;
  }
});
Object.setPrototypeOf(proxy, proto);
// setPrototypeOf

Proxy.revocable()

用于返回一个可取消的 Proxy 实例

let { proxy, revoke } = Proxy.revocable({}, {});
proxy.name = "Tom";
revoke();
proxy.name;
// TypeError: Cannot perform 'get' on a proxy that has been revoked

Reflect

ES6 中将 Object 的一些明显属于语言内部的方法移植到了 Reflect 对象上（当前某些方法会同时存在于 Object 和 Reflect 对象上），未来的新方法会只部署在 Reflect 对象上。

Reflect 对象对某些方法的返回结果进行了修改，使其更合理。

Reflect 对象使用函数的方式实现了 Object 的命令式操作。

静态方法

Reflect.get(target, name, receiver)

查找并返回 target 对象的 name 属性。

let exam = {
  name: "Tom",
  age: 24,
  get info() {
    return this.name + this.age;
  }
};
Reflect.get(exam, "name"); // "Tom"

// 当 target 对象中存在 name 属性的 getter 方法， getter 方法的 this 会绑定  receiver
let receiver = {
  name: "Jerry",
  age: 20
};
Reflect.get(exam, "info", receiver); // Jerry20

// 当 name 为不存在于 target 对象的属性时，返回 undefined
Reflect.get(exam, "birth"); // undefined

// 当 target 不是对象时，会报错
Reflect.get(1, "name"); // TypeError

注意，get 非简单 name 属性时的写法，例如上面的 info 函数属性

Reflect.set(target, name, value, receiver)

将 target 的 name 属性设置为 value。返回值为 boolean ，true 表示修改成功，false 表示失败。当 target 为不存在的对象时，会报错。

let exam = {
  name: "Tom",
  age: 24,
  set info(value) {
    return (this.age = value);
  }
};
exam.age; // 24
Reflect.set(exam, "age", 25); // true
exam.age; // 25

// value 为空时会将 name 属性清除
Reflect.set(exam, "age"); // true
exam; //{ name: 'Tom', age: undefined, info: [Setter] }
exam.age; // undefined

// 当 target 对象中存在 name 属性 setter 方法时，setter 方法中的 this 会绑定 receiver , 所以实际修改的是 receiver 的属性,
let receiver = {
  age: 18
};
Reflect.set(exam, "info", 1, receiver); // true
receiver; //{ age: 1 }
receiver.age; // 1

let receiver1 = {
  name: "oppps"
};
Reflect.set(exam, "info", 1, receiver1);
receiver1; //{ name: 'oppps', age: 1 }
receiver1.age; // 1

Reflect.has(obj, name);

是 name in obj 指令的函数化，用于查找 name 属性在 obj 对象中是否存在。返回值为 boolean。如果 obj 不是对象则会报错 TypeError。

let exam = {
  name: "Tom",
  age: 24
};
Reflect.has(exam, "name"); // true

Reflect.deleteProperty(obj, property)

是 delete obj[property] 的函数化，用于删除 obj 对象的 property 属性，返回值为 boolean。如果 obj 不是对象则会报错 TypeError。

let exam = {
  name: "Tom",
  age: 24
};
Reflect.deleteProperty(exam, "name"); // true
exam; // {age: 24}
// property 不存在时，也会返回 true
Reflect.deleteProperty(exam, "name"); // true

Reflect.construct(obj, args)

等同于 new target(…args)。

function exam(name) {
  this.name = name;
}
Reflect.construct(exam, ["Tom"]); // exam {name: "Tom"}

Reflect.getPrototypeOf(obj)

用于读取 obj 的 proto 属性。在 obj 不是对象时不会像 Object 一样把 obj 转为对象，而是会报错。

class Exam {}
let obj = new Exam();
Reflect.getPrototypeOf(obj) === Exam.prototype; // true

Reflect.setPrototypeOf(obj, newProto)

用于设置目标对象的 prototype。

let obj = {};
Reflect.setPrototypeOf(obj, Array.prototype); // true

Reflect.apply(func, thisArg, args)

等同于 Function.prototype.apply.call(func, thisArg, args) 。

• func 表示目标函数；若目标函数无法调用，会抛出 TypeError 。
• thisArg 表示目标函数绑定的 this 对象；
• args 表示目标函数调用时传入的参数列表，可以是数组或类似数组的对象。

Reflect.apply(Math.max, Math, [1, 3, 5, 3, 1]); // 5

Reflect.defineProperty(target, propertyKey, attributes)

用于为目标对象定义属性。如果 target 不是对象，会抛出错误。

let myDate = {};
Reflect.defineProperty(myDate, "now", {
  value: () => Date.now()
}); // true
myDate.now; //Function: value]
myDate.now(); //1681460333577
myDate; //{}

const student = {};
Reflect.defineProperty(student, "name", { value: "Mike" }); // true
student.name; // "Mike"
console.log(student); //{}

myDate.now(); //1681460333579

当使用 defineProperty 定义目标对象属性的时候，可以设置属性值,打印属性,但是当直接 console.log 的时候却没有打印属性？！！！！对于这个还不是很理解

Reflect.getOwnPropertyDescriptor(target, propertyKey)

用于得到 target 对象的 propertyKey 属性的描述对象。在 target 不是对象时，会抛出错误表示参数非法，不会将非对象转换为对象。

var exam = {};
Reflect.defineProperty(exam, "name", {
  value: true,
  enumerable: false
});
Reflect.getOwnPropertyDescriptor(exam, "name");
// { configurable: false, enumerable: false, value: true, writable:false}

// propertyKey 属性在 target 对象中不存在时，返回 undefined
Reflect.getOwnPropertyDescriptor(exam, "age"); // undefined

Reflect.isExtensible(target)

用于判断 target 对象是否可扩展。返回值为 boolean 。如果 target 参数不是对象，会抛出错误。

let exam = {};
Reflect.isExtensible(exam); // true

Reflect.preventExtensions(target)

用于让 target 对象变为不可扩展。如果 target 参数不是对象，会抛出错误。

let exam = {};
Reflect.preventExtensions(exam); // true

Reflect.ownKeys(target)

用于返回 target 对象的所有属性，等同于 Object.getOwnPropertyNames 与 Object.getOwnPropertySymbols 之和。

var exam = {
  name: 1,
  [Symbol.for("age")]: 4
};
Reflect.ownKeys(exam); // ["name", Symbol(age)]

组合使用

Reflect 对象的方法与 Proxy 对象的方法是一一对应的。所以 Proxy 对象的方法可以通过调用 Reflect 对象的方法获取默认行为，然后进行额外操作。

let exam = {
  name: "Tom",
  age: 24
};
let handler = {
  get: function (target, key) {
    console.log("getting " + key);
    return Reflect.get(target, key);
  },
  set: function (target, key, value) {
    console.log("setting " + key + " to " + value);
    Reflect.set(target, key, value);
  }
};
let proxy = new Proxy(exam, handler);
proxy.name = "Jerry"; // setting name to Jerry
proxy.name; // getting name
// "Jerry"

使用场景拓展

观察者模式

实现:

// 定义 Set 集合
const queuedObservers = new Set();
// 把观察者函数都放入 Set 集合中
const observe = (fn) => queuedObservers.add(fn);

function set(target, key, value, receiver) {
  // 获取对象的赋值操作
  const result = Reflect.set(target, key, value, receiver);
  // 执行所有观察者
  queuedObservers.forEach((observer) => observer());
  // 执行赋值操作
  return result;
}

// observable 返回原始对象的代理，拦截赋值操作
const observable = (obj) => new Proxy(obj, { set });