（翻译）使用javascript中的proxy（代理）

你的名字 2022-12-27 14:26 136阅读 0赞

# （翻译）使用javascript中的proxy（代理） #

我最近一直在研究javascript中的proxy，我对它的能力感到惊讶。`Proxy`允许你改变语言的基本结构（像`object`，`arrays`，`functions`…）

下面是使用javascript代理的几个例子。

### 对象冻结 ###

我们可以使用几行简单的代码来阻止对对象的改变操作，这本质上是冻结对象

你也可以冻结`arrays`，`Map`，`WeakMap`，`Set`

### 追踪对象变化 ###

`Proxy`能改追踪对象的变化，这本质上是维护历史记录

历史对象将包含对对象所做更改的快照

[
       { 
         name: 'Saitama',
         age: 25,
         class: 'B',
         race: 'Human',
         heroName: 'Caped Baldy'
       },
       { 
         name: 'Genos',
         age: 25,
         class: 'B',
         race: 'Human',
         heroName: 'Caped Baldy'
       },
       { 
         name: 'Genos',
         age: 25,
         class: 'C',
         race: 'Human',
         heroName: 'Caped Baldy'
       }
     ]

同样，你也可以跟踪函数被应用触发器调用的次数

### 不区分大小写的属性访问 ###

const caseInsensitive = obj =>
       new Proxy(obj, { 
         get: function(target, key) { 
           // 为了简单起见，我假设属性的键值默认为小写
           return Reflect.get(target, key.toLowerCase());
         },
       });
    
     const proxiedObject = caseInsensitive(hero);
     console.log(proxiedObject.name); // saitama
     console.log(proxiedObject.NAME); // saitama

### 处理不存在的属性 ###

你可以通过下面的代码轻松的处理未定义的属性

更多的使用`Proxy`的例子在这个，你可以找到更多很棒的用法 https://github.com/mikaelbr/awesome-es2015-proxy

### 原文链接 ###

[Using javascript proxy][]

[Using javascript proxy]: https://dev.to/rafi993/using-javascript-proxies-d0b