你不知道的JavaScript（十二）：元编程 - 代理、Reflect API

太过爱你忘了你带给我的痛 2024-04-03 08:06 105阅读 0赞

#### 你不知道的JavaScript - 下 - 元编程 - 代理、Reflect API ####

*  元编程 - 代理
 *   *  使用代理
     *   *  代理在先
         *  代理在后
         *  \`No Such Property/Method\`
         *  代理 \`hack\` \`\[\[Prototype\]\]\` 链
 *  元编程 - Reflect API
 *   *  属性排序

## 元编程 - 代理 ##

<table> 
 <thead> 
  <tr> 
   <th>目标对象 / 函数代理上可以定义的处理函数</th> 
   <th>如何 / 何时被触发</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>get(..)</code></td> 
   <td>通过 <code>[[Get]]</code>，在代理上访问一个属性（<code>Reflect.get(..)</code>、. 属性运算符或 <code>[ .. ]</code> 属性运算符）</td> 
  </tr> 
  <tr> 
   <td><code>set(..)</code></td> 
   <td>通过 <code>[[Set]]</code>，在代理上设置一个属性值（<code>Reflect.set(..)</code>、赋值运算符 = 或目标为对象属性的解构赋值）</td> 
  </tr> 
  <tr> 
   <td><code>deleteProperty(..)</code></td> 
   <td>通过 <code>[[Delete]]</code>， 从代理对象上删除一个属性（<code>Reflect.deleteProperty(..)</code> 或 <code>delete</code>）</td> 
  </tr> 
  <tr> 
   <td><code>apply(..)</code>（如果目标为函数）</td> 
   <td>通过 <code>[[Call]]</code>，将代理作为普通函数 / 方 法 调 用（<code>Reflect.apply(..)</code>、<code>call(..)</code>、<code>apply(..)</code> 或 <code>(..)</code> 调用运算符）</td> 
  </tr> 
  <tr> 
   <td><code>construct(..)</code>（如果目标为构造函数）</td> 
   <td>通过 <code>[[Construct]]</code>，将代理作为构造函数调用（<code>Reflect.construct(..)</code> 或 <code>new</code>）</td> 
  </tr> 
  <tr> 
   <td><code>getOwnPropertyDescriptor(..)</code></td> 
   <td>通过 <code>[[GetOwnProperty]]</code>，从代理中提取一个属性描述符（<code>Object.getOwnPropertyDescriptor(..)</code> 或 <code>Reflect.getOwnPropertyDescriptor(..)</code>）</td> 
  </tr> 
  <tr> 
   <td><code>defineProperty(..)</code></td> 
   <td>通过 <code>[[DefineOwnProperty]]</code>，在代理上设置一个属性描述符（<code>Object.defineProperty(..)</code> 或 <code>Reflect.defineProperty(..)</code>）</td> 
  </tr> 
  <tr> 
   <td><code>getPrototypeOf(..)</code></td> 
   <td>通过 <code>[[GetPrototypeOf]]</code>，得到代理的 <code>[[Prototype]]</code>（<code>Object.getPrototypeOf(..)</code>、<code>Reflect.getPrototypeOf(..)</code>、<code>__proto__</code>、<code>Object#isPrototypeOf(..)</code> 或 <code>instanceof</code>）</td> 
  </tr> 
  <tr> 
   <td><code>setPrototypeOf(..)</code></td> 
   <td>通过 <code>[[SetPrototypeOf]]</code>，设置代理的 <code>[[Prototype]]</code>（<code>Object.setPrototypeOf(..)</code>、<code>Reflect.setPrototypeOf(..)</code> 或 <code>__proto__</code>）</td> 
  </tr> 
  <tr> 
   <td><code>preventExtensions(..)</code></td> 
   <td>通过 <code>[[PreventExtensions]]</code>，使得代理变成不可扩展的（<code>Object.prevent Extensions(..)</code> 或 <code>Reflect.preventExtensions(..)</code>）</td> 
  </tr> 
  <tr> 
   <td><code>isExtensible(..)</code></td> 
   <td>通过 <code>[[IsExtensible]]</code>，检测代理是否可扩展（<code>Object.isExtensible(..)</code> 或 <code>Reflect.isExtensible(..)</code>）</td> 
  </tr> 
  <tr> 
   <td><code>ownKeys(..)</code></td> 
   <td>通过 <code>[[OwnPropertyKeys]]</code>，提取代理自己的属性和 / 或符号属性（<code>Object.keys(..)</code>、<code>Object.getOwnPropertyNames(..)</code>、<code>Object.getOwnSymbolProperties(..)</code>、<code>Reflect.ownKeys(..)</code> 或 <code>JSON.stringify(..)</code>）</td> 
  </tr> 
  <tr> 
   <td><code>enumerate(..)</code></td> 
   <td>通过 <code>[[Enumerate]]</code>，取得代理拥有的和“继承来的”可枚举属性的迭代器（<code>Reflect.enumerate(..)</code> 或 <code>for..in</code>）</td> 
  </tr> 
  <tr> 
   <td><code>has(..)</code></td> 
   <td>通过 <code>[[HasProperty]]</code>，检查代理是否拥有或者“继承了”某个属性（<code>Reflect.has(..)</code>、<code>Object#hasOwnProperty(..)</code> 或 <code>"prop" in obj</code>）</td> 
  </tr> 
 </tbody> 
</table>

*  代理局限性(对原对象的一些操作)
    
        typeof obj; 
        String(obj);
        obj + ""; 
        obj == proxyObj; 
        obj === proxyObj;
 *  可取消代理
    
        let obj = {
              
            name: 'Lee',
            age: 18
        };
        
        let handler = {
              
            /**
             * target       对象的引用-obj
                * p            对象内的属性名-key
                * receiver     self/接收者/代理
                */
            get(target, p, receiver) {
              
                console.log('【get】---> ', target, p, receiver);
                // Reflect.get 转发，
                return Reflect.get(target, p, receiver);
            },
        
            /**
             * 在设定属性值（不管是新增的还是更新已有的）时由默认 set(..) 处理函数的步骤触发的
                */
            getOwnPropertyDescriptor(target, p) {
              
                console.log('【getOwnPropertyDescriptor】---> ', target, p);
                return Object.getOwnPropertyDescriptor(target, p);
            },
        
            /**
             * 在设定属性值（不管是新增的还是更新已有的）时由默认 set(..) 处理函数的步骤触发的
                */
            defineProperty(target, property, attributes) {
              
                console.log('【defineProperty】---> ', target, property, attributes);
                return Object.defineProperty(target, property, attributes);
            }
        };
        
        let {
               proxy, revoke } = Proxy.revocable(obj, handler);
        
        proxy;
        proxy.name;
        proxy.name = 'Tom';
        
        // 可取消代理
        revoke();
        proxy;
        proxy.name; // Error
        proxy.name = 'Tom'; // Error

### 使用代理 ###

> 通常可以把代理看作是对目标对象的“包装”。在这种意义上，代理成为了代码交互的主要对象，而实际目标对象保持隐藏 / 被保护的状态

#### 代理在先 ####

*  代理与目标交流

![在这里插入图片描述][4a0a3d15c4a94a3f88728d1addf895e5.png_pic_center]  
![在这里插入图片描述][03ef1d456edc4d7a8734f7a96c30fece.png_pic_center]

#### 代理在后 ####

*  目标与代理交流

> 这里直接与 `obj` 而不是 `prxoy` 交流。当调用 `logKey(..)` 的时候，它在 `obj`上被找到并直接使用。
> 
> 但是当我们试图访问像 `everyone()` 这样的方法的时候，这个函数在 `obj` 上并不存在。

#### `No Such Property/Method` ####

> 当试着访问或设置一个还不存在的属性时，默认情况下对象不是非常具有防御性。
> 
> 所以你可能希望预先定义好一个对象的所有属性 / 方法之后，访问不存在的属性名时能够抛出一个错误。

*  代理在前设计：
    
        let obj = {
              
            a: 1,
            foo() {
              
                console.log("a:", this.a);
            }
        };
        let proxyObj = new Proxy(obj, {
              
            get(target, p, receiver) {
              
                if (Reflect.has(target, p)) {
              
                    return Reflect.get(target, p, receiver);
                } else {
              
                    throw "No such property/method!";
                }
            },
            set(target, p, newValue, receiver) {
              
                if (Reflect.has(target, p)) {
              
                    return Reflect.set(target, p, newValue, receiver);
                } else {
              
                    throw "No such property/method!";
                }
            }
        });
        
        proxyObj.a = 3;
        proxyObj.foo(); // a: 3 
        
        proxyObj.b = 4; // Error: Uncaught No such property/method!
        proxyObj.bar(); // Error: Uncaught No such property/method!
 *  代理在后设计：
    
        let obj = {
              
            a: 1,
            foo() {
              
                console.log("a:", this.a);
            }
        };
        
        let proxy = new Proxy({
              }, {
              
            get() {
              
                throw "No such property/method!";
            },
            set() {
              
                throw "No such property/method!";
            }
        });
        
        // 设定 obj 回退到 proxy
        Object.setPrototypeOf(obj, proxy);
        
        obj.a = 3;
        obj.foo(); // a: 3 
        
        obj.b = 4; // Error: Uncaught No such property/method!
        obj.bar(); // Error: Uncaught No such property/method!

#### 代理 `hack` `[[Prototype]]` 链 ####

> `[[Prototype]]` 机制运作的主要通道是 `[[Get]]` 运算。当直接对象中没有找到一个属性的时候，`[[Get]]` 会自动把这个运算转给 `[[Prototype]]` 对象处理。

> 使用代理的 `get(..)` 来模拟或扩展这个 `[[Prototype]]` 机制的概念，通过 `[[Prototype]]` 连成环状（或者，至少看起来是这样！）。实际上并不能创建一个真正的 \[\[Prototype\]\] 环，因为引擎会抛出错误。但是可以用代理模拟！

## 元编程 - Reflect API ##

> Reflect 对象是一个平凡对象（就像 Math），不像其他内置原生值一样是函数 / 构造器

*  访问 / 查看一个对象键

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Reflect.ownKeys(..)</code></td> 
   <td>返回所有“拥有”的（不是“继承”的）键的列表，就像 <code>Object.getOwnPropertyNames(..)</code> 和 <code>Object.getOwnPropertySymbols(..)</code> 返回的一样</td> 
  </tr> 
  <tr> 
   <td><code>Reflect.enumerate(..)</code></td> 
   <td>返回一个产生所有（拥有的和“继承的”）可枚举的（<code>enumerable</code>）非符号键集合的迭代器。本质上说，这个键的集合和 <code>foo..in</code> 循环处理的那个键的集合是一样的</td> 
  </tr> 
  <tr> 
   <td><code>Reflect.has(..)</code></td> 
   <td>实质上和 <code>in</code> 运算符一样，用于检查某个属性是否在某个对象上或者在它的 <code>[[Prototype]]</code> 链上。比如，<code>Reflect.has(o, "foo")</code> 实质上就是执行 <code>foo" in o</code></td> 
  </tr> 
 </tbody> 
</table>

*  函数调用和构造器调用可以通过使用下面这些工具手动执行，与普通的语法（比如，`(..)` 和 `new`）分开

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Reflect.apply(..)</code></td> 
   <td>举例来说，<code>Reflect.apply(foo,thisObj,[42,"bar"])</code> 以 <code>thisObj</code> 作为 <code>this</code> 调用 <code>foo(..)</code> 函数，传入参数 42 和 “bar”</td> 
  </tr> 
  <tr> 
   <td><code>Reflect.construct(..)</code></td> 
   <td>举例来说，<code>Reflect.construct(foo,[42,"bar"])</code> 实质上就是调用 <code>new foo(42,"bar")</code></td> 
  </tr> 
 </tbody> 
</table>

*  可以使用下面这些工具来手动执行对象属性访问、设置和删除

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Reflect.get(..)</code></td> 
   <td>举例来说，<code>Reflect.get(o,"foo")</code> 提取 <code>o.foo</code></td> 
  </tr> 
  <tr> 
   <td><code>Reflect.set(..)</code></td> 
   <td>举例来说，<code>Reflect.set(o,"foo",42)</code> 实质上就是执行 <code>o.foo = 42</code></td> 
  </tr> 
  <tr> 
   <td><code>Reflect.deleteProperty(..)</code></td> 
   <td>举例来说，<code>Reflect.deleteProperty(o,"foo")</code> 实质上就是执行 <code>delete o.foo</code></td> 
  </tr> 
 </tbody> 
</table>

> `Reflect` 的元编程能力提供了模拟各种语法特性的编程等价物，把之前隐藏的抽象操作暴露出来。比如，你可以利用这些能力扩展功能和 API，以实现`领域特定语言（DSL）`

### 属性排序 ###

> 在 ES6 之前，一个对象键 / 属性的列出顺序是依赖于具体实现，并未在规范中定义。
> 
> 一般来说，多数引擎按照创建的顺序进行枚举，虽然开发者们一直被强烈建议不要依赖于这个顺序

> 对于 ES6 来说，拥有属性的列出顺序是由 `[[OwnPropertyKeys]]` 算法定义的，这个算法产生所有拥有的属性（字符串或符号），不管是否可枚举。这个顺序只对 `Reflect.ownKeys(..)`（以及扩展的 `Object.getOwnPropertyNames(..)` 和 `Object.getOwnPropertySymbols(..)`）有保证

*  其顺序为：
    
    1.  首先，按照数字上升排序，枚举所有整数索引拥有的属性;
    2.  然后，按照创建顺序枚举其余的拥有的字符串属性名;
    3.  最后，按照创建顺序枚举拥有的符号属性;

var o = {
        
        [Symbol("c")]: 'yay',
        2: true,
        1: true,
        b: 'Hello',
        a: 'Lee'
    };
    
    Reflect.ownKeys(o);                 // (5) ['1', '2', 'b', 'a', Symbol(c)]
    Object.getOwnPropertyNames(o);      // (4) ['1', '2', 'b', 'a']
    Object.getOwnPropertySymbols(o);    // [Symbol(c)]
    Object.keys(o);                     // (4) ['1', '2', 'b', 'a']

[4a0a3d15c4a94a3f88728d1addf895e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/82c2780aab904716b3b555e42b7e5c6a.png
[03ef1d456edc4d7a8734f7a96c30fece.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/44164a48c809404b883abe7596835230.png