ES6--Proxy

落日映苍穹つ 2021-08-13 14:38 349阅读 0赞

#### 概述 ####

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

#### 基本用法 ####

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

#### 实例方法 ####

get(target, propKey, receiver)

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

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

get() 方法可以继承。

set(target, propKey, value, receiver)

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

第四个参数 receiver 表示原始操作行为所在对象，一般是 Proxy 实例本身。

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

**apply(target, ctx, args)**

用于拦截函数的调用、call 和 reply 操作。target 表示目标对象，ctx 表示目标对象上下文，args 表示目标对象的参数数组。

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.definePro若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性。

**erty 操作**

getOwnPropertyDescriptor(target, propKey)

用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 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}

**ptor 属性**

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 操作。

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

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

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

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

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

preventExtensions(target)

拦截 Object.preventExtensions 操作。

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

// 只有目标对象不可扩展时（即 Object.isExtensible(proxy) 为 false ），
    // proxy.preventExtensions 才能返回 true ，否则会报错
    var proxy = new Proxy({ }, { 
      preventExtensions: function(target) { 
        return true;
      }
    });
    // 由于 proxy.preventExtensions 返回 true，此处也会返回 true，因此会报错
    Object.preventExtensions(proxy) 被// 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 方法不得改变目标对象的原型。

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