HUA

Proxy

基本概念

Proxy(代理) 是 ES6 中新增的一个特性。Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。
使用 Proxy 的好处是：对象只需关注于核心逻辑，一些非核心的逻辑 （如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）可以让 Proxy 来做。 从而达到关注点分离，降级对象复杂度的目的。

api 有哪些？

var p = new Proxy(target, handler);
其中，target 为被代理对象。handler 是一个对象，其声明了代理 target 的一些操作。p 是代理后的对象。当外界每次对 p 进行操作时，就会执行 handler 对象上的一些方法。

handler 能代理的一些常用的方法如下：

  • handler.getPrototypeOf(): Object.getPrototypeOf 方法的捕捉器。

  • handler.setPrototypeOf(): Object.setPrototypeOf 方法的捕捉器。

  • handler.isExtensible(): Object.isExtensible 方法的捕捉器。

  • handler.preventExtensions(): Object.preventExtensions 方法的捕捉器。

  • handler.getOwnPropertyDescriptor(): Object.getOwnPropertyDescriptor 方法的捕捉器。

  • handler.defineProperty(): Object.defineProperty 方法的捕捉器。

  • handler.has(): in 操作符的捕捉器。

  • handler.get(): 属性读取操作的捕捉器。

  • handler.set(): 属性设置操作的捕捉器。

  • handler.deleteProperty(): delete 操作符的捕捉器。

  • handler.ownKeys(): Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。

  • handler.apply(): 函数调用操作的捕捉器。

  • handler.construct(): new 操作符的捕捉器。
    …

基础使用

 1var target = {
 2   name: 'obj'
 3 };
 4 var logHandler = {
 5   get: function(target, key) {
 6     console.log(`${key} 被读取`);
 7     return target[key];
 8   },
 9   set: function(target, key, value) {
10     console.log(`${key} 被设置为 ${value}`);
11     target[key] = value;
12   }
13 };
14var targetWithLog = new Proxy(target, logHandler);
15targetWithLog.name;             // 控制台输出：name 被读取
16targetWithLog.name = 'others';  // 控制台输出：name 被设置为 others
17console.log(target.name);       // 控制台输出: others

使用示例 - 实现虚拟属性

 1var person = {
 2  fisrsName: '张',
 3  lastName: '小白'
 4};
 5var proxyedPerson = new Proxy(person, {
 6  get: function (target, key) {
 7    if(key === 'fullName'){
 8      return [target.fisrsName, target.lastName].join(' ');
 9    }
10    return target[key];
11  },
12  set: function (target, key, value) {
13    if(key === 'fullName'){
14      var fullNameInfo = value.split(' ');
15      target.fisrsName = fullNameInfo[0];
16      target.lastName = fullNameInfo[1];
17    } else {
18      target[key] = value;
19    }
20  }
21});
22
23console.log('姓:%s, 名:%s, 全名: %s', proxyedPerson.fisrsName, proxyedPerson.lastName, proxyedPerson.fullName);// 姓:张, 名:小白, 全名: 张 小白
24proxyedPerson.fullName = '李 小露';
25console.log('姓:%s, 名:%s, 全名: %s', proxyedPerson.fisrsName, proxyedPerson.lastName, proxyedPerson.fullName);// 姓:李, 名:小露, 全名: 李 小露

使用示例 - 实现私有变量

下面的 demo 实现了真正的私有变量。代理中把以 _ 开头的变量都认为是私有的。

 1var api = {
 2  _secret: 'xxxx',
 3  _otherSec: 'bbb',
 4  ver: 'v0.0.1'
 5};
 6
 7api = new Proxy(api, {
 8  get: function(target, key) {
 9    // 以 _ 下划线开头的都认为是 私有的
10    if (key.startsWith('_')) {
11      console.log('私有变量不能被访问');
12      return false;
13    }
14    return target[key];
15  },
16  set: function(target, key, value) {
17    if (key.startsWith('_')) {
18      console.log('私有变量不能被修改');
19      return false;
20    }
21    target[key] = value;
22  },
23  has: function(target, key) {
24    return key.startsWith('_') ? false : (key in target);
25  }
26});
27
28api._secret; // 私有变量不能被访问
29console.log(api.ver); // v0.0.1
30api._otherSec = 3; // 私有变量不能被修改
31console.log('_secret' in api); //false
32console.log('ver' in api); //true

使用示例 - 抽离校验模块

 1function Animal() {
 2  return createValidator(this, animalValidator);
 3}
 4var animalValidator = {
 5  name: function(name) {
 6    // 动物的名字必须是字符串类型的
 7    return typeof name === 'string';
 8  }
 9};
10
11function createValidator(target, validator) {
12  return new Proxy(target, {
13    set: function(target, key, value) {
14      if (validator[key]) {
15        // 符合验证条件
16        if (validator[key](value)) {
17          target[key] = value;
18        } else {
19          throw Error(`Cannot set ${key} to ${value}. Invalid.`);
20        }
21      } else {
22        target[key] = value
23      }
24    }
25  });
26}
27
28var dog = new Animal();
29dog.name = 'dog';
30console.log(dog.name);
31dog.name = 123; // Uncaught Error: Cannot set name to 123. Invalid.

Reflect

概念

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handler 的方法相同。Reflect 不是一个函数对象，因此它是不可构造的。

与大多数全局对象不同 Reflect 并非一个构造函数，所以不能通过 new 运算符对其进行调用，或者将 Reflect 对象作为一个函数来调用。Reflect 的所有属性和方法都是静态的（就像 Math 对象）。

api 有哪些？

  • Reflect.apply(target, thisArgument, argumentsList): 对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似。

    • 举例
     1const ages = [11, 33, 12, 54, 18, 96];
 2
 3// 旧写法
 4const youngest = Math.min.apply(Math, ages);
 5const oldest = Math.max.apply(Math, ages);
 6const type = Object.prototype.toString.call(youngest);
 7
 8// 新写法
 9const youngest = Reflect.apply(Math.min, Math, ages);
10const oldest = Reflect.apply(Math.max, Math, ages);
11const type = Reflect.apply(Object.prototype.toString, youngest, []);

  • Reflect.construct(target, argumentsList[, newTarget]): 对构造函数进行 new 操作，相当于执行 new target(…args)。

    • Reflect.construct方法等同于new target(…args)，这提供了一种不使用new，来调用构造函数的方法。
     1function Greeting(name) {
 2  this.name = name;
 3}
 4
 5// new 的写法
 6const instance = new Greeting('张三');
 7
 8// Reflect.construct 的写法
 9const instance = Reflect.construct(Greeting, ['张三']);

  • Reflect.defineProperty(target, propertyKey, attributes): 和 Object.defineProperty() 类似。如果设置成功就会返回 true

  • Reflect.deleteProperty(target, propertyKey): 作为函数的delete操作符，相当于执行 delete target[name]。该方法返回一个布尔值。

    • Reflect.deleteProperty方法等同于delete obj[name]，用于删除对象属性。
     1const myObj = { foo: 'bar' };
 2
 3// 旧写法
 4delete myObj.foo;
 5
 6// 新写法
 7Reflect.deleteProperty(myObj, 'foo');

    该方法返回一个布尔值。如果删除成功或删除的属性不存在，则返回true，如果删除失败，删除的属性依然还在，则返回false。

  • Reflect.get(target, propertyKey[, receiver]): 获取对象身上某个属性的值，类似于 target[name]。

    • Reflect.get方法查找并返回target的name属性，如果没有，则返回undefined。
     1var myObject = {
 2  foo: 1,
 3  bar: 2,
 4  get baz() {
 5    return this.foo + this.bar;
 6  },
 7}
 8
 9Reflect.get(myObject, 'foo') // 1
10Reflect.get(myObject, 'bar') // 2
11Reflect.get(myObject, 'baz') // 3
    • 读取函数的this绑定的receiver
     1var myObject = {
 2  foo: 1,
 3  bar: 2,
 4  get baz() {
 5    return this.foo + this.bar;
 6  },
 7};
 8
 9var myReceiverObject = {
10  foo: 4,
11  bar: 4,
12};
13
14Reflect.get(myObject, 'baz', myReceiverObject) // 8
    • 如果第一个参数不是对象，则Reflect.get则会报错。

  • Reflect.getOwnPropertyDescriptor(target, propertyKey): 类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符，否则返回 undefined。

  • Reflect.getPrototypeOf(target): 类似于 Object.getPrototypeOf()。

  • Reflect.has(target, propertyKey): 判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。

    • Reflect.has对应 name in obj 里面的in操作
     1var myObject = {
 2  foo: 1,
 3};
 4
 5// 旧写法
 6'foo' in myObject // true
 7
 8// 新写法
 9Reflect.has(myObject, 'foo') // true

    如果第一个参数不是对象，Reflect.has和in都会报错。

  • Reflect.isExtensible(target): 类似于 Object.isExtensible().

  • Reflect.ownKeys(target): 返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable 影响).

  • Reflect.preventExtensions(target): 类似于 Object.preventExtensions()。返回一个Boolean。

  • Reflect.set(target, propertyKey, value[, receiver]): 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。

    • Reflect.set方法设置target对象的name属性等于value。
     1var myObject = {
 2    foo: 1,
 3    set bar(value) {
 4      return this.foo = value;
 5    },
 6}
 7
 8myObject.foo // 1
 9
10Reflect.set(myObject, 'foo', 2);
11myObject.foo // 2
12
13Reflect.set(myObject, 'bar', 3)
14myObject.foo // 3
    • 如果name属性设置的赋值函数，则赋值函数的this绑定receiver。
     1var myObject = {
 2    foo: 4,
 3    set bar(value) {
 4      return this.foo = value;
 5    },
 6};
 7
 8var myReceiverObject = {
 9  foo: 0,
10};
11
12Reflect.set(myObject, 'bar', 1, myReceiverObject);
13myObject.foo // 4
14myReceiverObject.foo // 1

  • Reflect.setPrototypeOf(target, prototype): 设置对象原型的函数。返回一个 Boolean，如果更新成功，则返回 true。

个人笔记记录 2021 ~ 2025