面试官：你是怎么理解ES6中Proxy的？使用场景?

心已赠人 2022-11-19 09:53 210阅读 0赞

![format_png][]

## 一、介绍 ##

**定义：** 用于定义基本操作的自定义行为

**本质：** 修改的是程序默认形为，就形同于在编程语言层面上做修改，属于元编程`(meta programming)`

元编程（Metaprogramming，又译超编程，是指某类计算机程序的编写，这类计算机程序编写或者操纵其它程序（或者自身）作为它们的数据，或者在运行时完成部分本应在编译时完成的工作

一段代码来理解

#!/bin/bash
    # metaprogram
    echo '#!/bin/bash' >program
    for ((I=1; I<=1024; I++)) do
        echo "echo $I" >>program
    done
    chmod +x program

这段程序每执行一次能帮我们生成一个名为`program`的文件，文件内容为1024行`echo`，如果我们手动来写1024行代码，效率显然低效

*  元编程优点：与手工编写全部代码相比，程序员可以获得更高的工作效率，或者给与程序更大的灵活度去处理新的情形而无需重新编译

`Proxy` 亦是如此，用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

## 二、用法 ##

`Proxy`为 构造函数，用来生成 `Proxy`实例

var proxy = new Proxy(target, handler)

### 参数 ###

`target`表示所要拦截的目标对象（任何类型的对象，包括原生数组，函数，甚至另一个代理））

`handler`通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 `p` 的行为

### handler解析 ###

关于`handler`拦截属性，有如下：

*  get(target,propKey,receiver)：拦截对象属性的读取
 *  set(target,propKey,value,receiver)：拦截对象属性的设置
 *  has(target,propKey)：拦截`propKey in proxy`的操作，返回一个布尔值
 *  deleteProperty(target,propKey)：拦截`delete proxy[propKey]`的操作，返回一个布尔值
 *  ownKeys(target)：拦截`Object.keys(proxy)`、`for...in`等循环，返回一个数组
 *  getOwnPropertyDescriptor(target, propKey)：拦截`Object.getOwnPropertyDescriptor(proxy, propKey)`，返回属性的描述对象
 *  defineProperty(target, propKey, propDesc)：拦截`Object.defineProperty(proxy, propKey, propDesc）`，返回一个布尔值
 *  preventExtensions(target)：拦截`Object.preventExtensions(proxy)`，返回一个布尔值
 *  getPrototypeOf(target)：拦截`Object.getPrototypeOf(proxy)`，返回一个对象
 *  isExtensible(target)：拦截`Object.isExtensible(proxy)`，返回一个布尔值
 *  setPrototypeOf(target, proto)：拦截`Object.setPrototypeOf(proxy, proto)`，返回一个布尔值
 *  apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作
 *  construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作

### Reflect ###

若需要在`Proxy`内部调用对象的默认行为，建议使用`Reflect`，其是`ES6`中操作对象而提供的新 `API`

基本特点：

*  只要`Proxy`对象具有的代理方法，`Reflect`对象全部具有，以静态方法的形式存在
 *  修改某些`Object`方法的返回结果，让其变得更合理（定义不存在属性行为的时候不报错而是返回`false`）
 *  让`Object`操作都变成函数行为

下面我们介绍`proxy`几种用法：

### get() ###

`get`接受三个参数，依次为目标对象、属性名和 `proxy` 实例本身，最后一个参数可选

var person = {
      name: "张三"
    };
    
    var proxy = new Proxy(person, {
      get: function(target, propKey) {
        return Reflect.get(target,propKey)
      }
    });
    
    proxy.name // "张三"

`get`能够对数组增删改查进行拦截，下面是试下你数组读取负数的索引

function createArray(...elements) {
      let handler = {
        get(target, propKey, receiver) {
          let index = Number(propKey);
          if (index < 0) {
            propKey = String(target.length + index);
          }
          return Reflect.get(target, propKey, receiver);
        }
      };
    
      let target = [];
      target.push(...elements);
      return new Proxy(target, handler);
    }
    
    let arr = createArray('a', 'b', 'c');
    arr[-1] // c

注意：如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则会报错

const target = Object.defineProperties({}, {
      foo: {
        value: 123,
        writable: false,
        configurable: false
      },
    });
    
    const handler = {
      get(target, propKey) {
        return 'abc';
      }
    };
    
    const proxy = new Proxy(target, handler);
    
    proxy.foo
    // TypeError: Invariant check failed

### set() ###

`set`方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 `Proxy` 实例本身

假定`Person`对象有一个`age`属性，该属性应该是一个不大于 200 的整数，那么可以使用`Proxy`保证`age`的属性值符合要求

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 person = new Proxy({}, validator);
    
    person.age = 100;
    
    person.age // 100
    person.age = 'young' // 报错
    person.age = 300 // 报错

如果目标对象自身的某个属性，不可写且不可配置，那么`set`方法将不起作用

const obj = {};
    Object.defineProperty(obj, 'foo', {
      value: 'bar',
      writable: false,
    });
    
    const handler = {
      set: function(obj, prop, value, receiver) {
        obj[prop] = 'baz';
      }
    };
    
    const proxy = new Proxy(obj, handler);
    proxy.foo = 'baz';
    proxy.foo // "bar"

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

'use strict';
    const handler = {
      set: function(obj, prop, value, receiver) {
        obj[prop] = receiver;
        // 无论有没有下面这一行，都会报错
        return false;
      }
    };
    const proxy = new Proxy({}, handler);
    proxy.foo = 'bar';
    // TypeError: 'set' on proxy: trap returned falsish for property 'foo'

### deleteProperty() ###

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

var handler = {
      deleteProperty (target, key) {
        invariant(key, 'delete');
        Reflect.deleteProperty(target,key)
        return true;
      }
    };
    function invariant (key, action) {
      if (key[0] === '_') {
        throw new Error(`无法删除私有属性`);
      }
    }
    
    var target = { _prop: 'foo' };
    var proxy = new Proxy(target, handler);
    delete proxy._prop
    // Error: 无法删除私有属性

注意，目标对象自身的不可配置（configurable）的属性，不能被`deleteProperty`方法删除，否则报错

### 取消代理 ###

Proxy.revocable(target, handler);

## 三、使用场景 ##

`Proxy`其功能非常类似于设计模式中的代理模式，常用功能如下：

*  拦截和监视外部对对象的访问
 *  降低函数或类的复杂度
 *  在复杂操作前对操作进行校验或对所需资源进行管理

使用 `Proxy` 保障数据类型的准确性

let numericDataStore = { count: 0, amount: 1234, total: 14 };
    numericDataStore = new Proxy(numericDataStore, {
        set(target, key, value, proxy) {
            if (typeof value !== 'number') {
                throw Error("属性只能是number类型");
            }
            return Reflect.set(target, key, value, proxy);
        }
    });
    
    numericDataStore.count = "foo"
    // Error: 属性只能是number类型
    
    numericDataStore.count = 333
    // 赋值成功

声明了一个私有的 `apiKey`，便于 `api` 这个对象内部的方法调用，但不希望从外部也能够访问 `api._apiKey`

let api = {
        _apiKey: '123abc456def',
        getUsers: function(){ },
        getUser: function(userId){ },
        setUser: function(userId, config){ }
    };
    const RESTRICTED = ['_apiKey'];
    api = new Proxy(api, {
        get(target, key, proxy) {
            if(RESTRICTED.indexOf(key) > -1) {
                throw Error(`${key} 不可访问.`);
            } return Reflect.get(target, key, proxy);
        },
        set(target, key, value, proxy) {
            if(RESTRICTED.indexOf(key) > -1) {
                throw Error(`${key} 不可修改`);
            } return Reflect.get(target, key, value, proxy);
        }
    });
    
    console.log(api._apiKey)
    api._apiKey = '987654321'
    // 上述都抛出错误

还能通过使用`Proxy`实现观察者模式

观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行

`observable`函数返回一个原始对象的 `Proxy` 代理，拦截赋值操作，触发充当观察者的各个函数

const queuedObservers = new Set();
    
    const observe = fn => queuedObservers.add(fn);
    const observable = obj => new Proxy(obj, {set});
    
    function set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      queuedObservers.forEach(observer => observer());
      return result;
    }

观察者函数都放进`Set`集合，当修改`obj`的值，在会`set`函数中拦截，自动执行`Set`所有的观察者

## 参考文献 ##

*  https://es6.ruanyifeng.com/\#docs/proxy
 *  https://vue3js.cn/es6

面试官VUE系列已完结：33／33

面试官ES6系列更新中: 8/10

[面试官：说说var、let、const之间的区别][var_let_const]

[面试官：ES6中数组新增了哪些扩展?][ES6]

[面试官：ES6中对象新增了哪些扩展?][ES6 1]

[面试官：ES6中函数新增了哪些扩展?][ES6 2]

[面试官：ES6中新增的Set、Map两种数据结构怎么理解?][ES6_Set_Map]

[面试官：你是怎么理解ES6中 Promise的？使用场景？][ES6_ Promise]

[面试官：怎么理解ES6中 Generator的？使用场景？][ES6_ Generator]

篇副有限，扫下方二维码查看往期

![format_png 1][]

[format_png]: /images/20221119/a445a93206754deda52431a3fb14e3bb.png
[var_let_const]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c46bcb674d7d9620c5615104d5a9ebcad9cff446bcfb1b1d5e9c5f1eb34d954790e79293&idx=1&mid=2247484989&scene=21&sn=f44145efa3a928e6bcaf714da233b19e#wechat_redirect
[ES6]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c435cb674d23fe800d6bb61c4ab0dd0a5331a24de5ecf0c11b2e3073e1e64ae50f201e4b&idx=2&mid=2247485027&scene=21&sn=1f79f8eca688153c5d8c9ef500b6b8bc#wechat_redirect
[ES6 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c42dcb674d3ba096c518074f28ee25b60154796ed2bfdeb2b57abbf1853f4b49d1885f84&idx=1&mid=2247485051&scene=21&sn=8986b5341897589a3456e76e8909fdcc#wechat_redirect
[ES6 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c4c7cb674dd170b612f8163c37efa0e33ad4960b4df318439d1af630a18fcb9c42dbd2c8&idx=1&mid=2247485073&scene=21&sn=e2902ebeeead48faaadc27327a24427c#wechat_redirect
[ES6_Set_Map]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c4ffcb674de9c404261d0977f8685815918082fc189ea8cf9ae4acb5bc71f5cb501c385c&idx=1&mid=2247485097&scene=21&sn=e0fb0e9ebdd87ed9f2cfca0193931120#wechat_redirect
[ES6_ Promise]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c4afcb674db92fcc02f55bdd76bfb5a09892fb4d46e278057841e19c506d39c4ffb38601&idx=2&mid=2247485177&scene=21&sn=21f2d4521bc054d5d53acc31db4c3922#wechat_redirect
[ES6_ Generator]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c55dcb674c4bb6dbb864233c0dad43b4fb09dfc54775978319888ae3f6ff5454aeba7e1a&idx=1&mid=2247485195&scene=21&sn=f0c7f093abb606c01232c80e1ad0c89e#wechat_redirect
[format_png 1]: /images/20221119/9e20dc653db64da58b0a409a120614d0.png