ES6 Proxy详解

文章目录

• 概述
• Proxy 实例的方法
• • get(target, propKey, receiver)
  • set(target, propKey, value, receiver)
  • has(target, propKey)
  • deleteProperty(target, propKey)
  • defineProperty(target, propKey, propDesc)
  • getOwnPropertyDescriptor(target, propKey)
  • getPrototypeOf(target)
  • setPrototypeOf(target, proto)
  • preventExtensions(target)
  • isExtensible(target)
  • ownKeys(target)
  • apply(target, thisArg, args)
  • construct(target, args, newTarget)
  • Proxy.revocable()
  • this 问题
  • 实例：Web 服务的客户端

    概述

    在进行本文阅读前，建议先阅读ES6 Reflect详解，以便能对下文的代码示例进行更好的理解。

    Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

    Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

    const proxyObj = new Proxy({}, {
      get: function (target, propKey, receiver) {
        console.log(`getting ${propKey}!`);
        return Reflect.get(target, propKey, receiver);
      },
      set: function (target, propKey, value, receiver) {
        console.log(`setting ${propKey}!`);
        return Reflect.set(target, propKey, value, receiver);
      }
    });
    

    上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象obj，去读写它的属性，就会得到下面的结果。

    proxyObj.count = 1
    //  setting count!
    ++proxyObj.count
    //  getting count!
    //  setting count!
    //  2
    

    上面代码说明，Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义。

    ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

    const proxy = new Proxy(target, handler);
    

    Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

    下面是另一个拦截读取属性行为的例子。

    const proxy = new Proxy({}, {
      get: function(target, propKey) {
        return 35;
      }
    });
    proxy.time // 35
    proxy.name // 35
    proxy.title // 35
    

    上面代码中，作为构造函数，Proxy接受两个参数。第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有一个get方法，用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35。

    注意，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

    如果handler没有设置任何拦截，那就等同于直接通向原对象。

    const target = {};
    const handler = {};
    const proxy = new Proxy(target, handler);
    proxy.a = 'b';
    target.a // "b"
    

    上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。

    一个技巧是将 Proxy 对象，设置到object.proxy属性，从而可以在object对象上调用。

    const object = { proxy: new Proxy(target, handler) };
    

    Proxy 实例也可以作为其他对象的原型对象。

    const proxy = new Proxy({}, {
      get: function(target, propKey) {
        return 35;
      }
    });
    const obj = Object.create(proxy);
    obj.time // 35
    

    上面代码中，proxy对象是obj对象的原型，obj对象本身并没有time属性，所以根据原型链，会在proxy对象上读取该属性，导致被拦截。

    同一个拦截器函数，可以设置拦截多个操作。

    const handler = {
      get: function(target, name) {
        console.log('get')
        if (name === 'prototype') {
          return Object.prototype;
        }
        return 'Hello, ' + name;
      },
      apply: function(target, thisBinding, args) {
        console.log('apply')
        return args[0];
      },
      construct: function(target, args) {
        console.log('construct')
        return {value: args[1]};
      }
    };
    const fnProxy = new Proxy(function(x, y) {
      return x + y;
    }, handler);
    fnProxy(1, 2) 
    // apply
    // 1
    new fnProxy(1, 2) 
    // construct
    // {value: 2}
    fnProxy.prototype === Object.prototype 
    // get
    // true
    fnProxy.foo === "Hello, foo" 
    // get
    // true
    

    对于可以设置、但没有设置拦截的操作，则直接落在目标对象上，按照原先默认行为产生结果。

    Proxy 实例的方法

    下面是 Proxy 支持的拦截操作，一共 13 种。

    get(target, propKey, receiver)

    get方法用于拦截某个属性的读取操作，比如proxyObj.foo和proxyObj['foo']，可以接受三个参数，依次为目标对象、属性名和 proxyObj 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

    get方法的用法，上文已经有一个例子，下面是另一个拦截读取操作的例子。

    const info = {
        name: 'caoyuan'
    }
    const proxyObj = new Proxy(info, {
        get(target, propKey){
            if(propKey in target){
                return target[propKey]
            } else {
                throw new ReferenceError(`Prop name ${propKey} does not exist.`)
            }
        }
    })
    proxyObj.name // "caoyuan"
    proxyObj.age // ReferenceError: Prop name "age" does not exist.
    

    上面代码表示，如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回undefined。

    get方法可以继承。

    const proxyObj = new Proxy({}, {
      get(target, propKey, receiver) {
        console.log('GET ' + propKey);
        return target[propKey];
      }
    });
    const obj = Object.create(proxyObj);
    obj.name // "GET name"
    

    上面代码中，拦截操作定义在Prototype对象上面，所以如果读取obj对象继承的属性时，拦截会生效。

    下面的例子使用get拦截，实现数组读取负数的索引。

    function createProxyArr(...rest){
      const handler = {
        get(target, propKey, receiver){
          propKey = Number(propKey)
          if(propKey < 0) {
              propKey = rest.length + propKey 
          }
          return Reflect.get(target, propKey, receiver)
        }
      }
      return new Proxy(rest, handler)
    }
    const arr = createProxyArr('a', 'b', 'c');
    arr[-1] // c
    

    上面代码中，数组的位置参数是-1，就会输出数组的倒数第一个成员。

    利用 Proxy，可以将读取属性的操作（get），转变为执行某个函数，从而实现属性的链式操作。

    const funObj = {
        double: n => 2*n,
        pow: n => n*n,
        reverseStr: n => n.toString().split('').reverse().join('')
    }
    function chainCall(value){
        const funCollection = []
        const proxy = new Proxy({}, {
            get(target, propKey){
                if(propKey === 'get'){
                    return funCollection.reduce((val,fn) => {
                        return fn(val)
                    },value)
                } else {
                    funCollection.push(funObj[propKey])
                }
                return proxy
            }
        })
        return proxy
    }
    chainCall(6).double.pow.reverseStr.get // '441'
    

    上面代码设置 Proxy 以后，达到了将函数名链式使用的效果。

    下面的例子则是利用get拦截，实现一个生成各种 DOM 节点的通用函数dom。

    const dom = new Proxy({}, {
      get(target, propKey) {
        return function(attrs = {}, ...children) {
          const el = document.createElement(propKey);
          for (let prop of Object.keys(attrs)) {
            el.setAttribute(prop, attrs[prop]);
          }
          for (let child of children) {
            if (typeof child === 'string') {
              child = document.createTextNode(child);
            }
            el.appendChild(child);
          }
          return el;
        }
      }
    });
    const el = dom.div(
      {},'Hello, my name is ',
      dom.a({href: '//example.com'}, 'Mark'),
      '. I like:',
      dom.ul(
        {},
        dom.li({}, 'The web'),
        dom.li({}, 'Food'),
        dom.li({}, '…actually that\'s it')
      )
    );
    document.body.appendChild(el);
    

    下面是一个get方法的第三个参数的例子，它总是指向原始的读操作所在的那个对象，一般情况下就是 Proxy 实例。

    const proxyObj = new Proxy({}, {
      get: function(target, key, receiver) {
        return receiver;
      }
    });
    proxyObj.getReceiver === proxyObj // true
    

    上面代码中，proxyObj对象的getReceiver属性会被get()拦截，得到的返回值就是proxyObj对象。

    const proxyObj = new Proxy({}, {
      get: function(target, key, receiver) {
        return receiver;
      }
    });
    const d = Object.create(proxyObj);
    d.a === d // true
    

    上面代码中，d对象本身没有a属性，所以读取d.a的时候，会去d的原型proxyObj对象找。这时，receiver就指向d，代表原始的读操作所在的那个对象。

    如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

    const target = Object.defineProperty({}, 'name', {
        value: 'caoyuan',
        writable: false,
        configurable: false
    })
    const handler = {
        get(target, propKey){
            return 'name changed'
        }
    }
    const proxyObj = new Proxy(target, handler)
    proxyObj.name
    // TypeError: 'get' on proxy: property 'name' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected 'caoyuan' but got 'name changed')
    

    set(target, propKey, value, receiver)

    set方法用来拦截某个属性的赋值操作，比如proxyObj.foo = v或proxyObj['foo'] = v，返回一个布尔值。可以接受四个参数，依次为目标对象、属性名、属性值和 proxyObj 实例本身，其中最后一个参数可选。

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

    const handler = {
        set(target, propKey, value){
            if(!Number.isInteger(value)) {
                throw new TypeError('This is not a number')
            }
            if(value > 200){
                throw new RangeError('Current value exceeds 200')
            }
            target[propKey] = value
            return true
        }
    }
    const proxyObj = new Proxy({}, handler)
    proxyObj.age = 100
    proxyObj.age // 100
    proxyObj.age = 'caoyuan' // TypeError: This is not a number
    proxyObj.age = 300 // RangeError: Current value exceeds 200
    

    上面代码中，由于设置了存值函数set，任何不符合要求的age属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。利用set方法，还可以数据绑定，即每当对象发生变化时，会自动更新 DOM。

    有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合get和set方法，就可以做到防止这些内部属性被外部读写。

    function validPropKey(key, action){
        if(key[0] === '_'){
            throw new Error(`Can't ${action} private key: ${key}`)
        }
    }
    const handler = {
        get(target, propKey){
            validPropKey(propKey, 'get')
            return target[propKey]
        },
        set(target, propKey, value){
            validPropKey(propKey, 'set')
            target[propKey] = value
            return true
        }
    }
    const proxyObj = new Proxy({}, handler)
    proxyObj._name // Error: Can't get private key: _name
    proxyObj._name = 'caoyuan' // Error: Can't set private key: _name
    

    上面代码中，只要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。

    下面是set方法第四个参数的例子。

    const handler = {
      set(target, propKey, value, receiver){
          target[propKey] = receiver
          return true
      }
    }
    const proxyObj = new Proxy({}, handler)
    proxyObj.name = 'caoyuan'
    proxyObj.name === proxyObj // true
    

    上面代码中，set方法的第四个参数receiver，指的是原始的操作行为所在的那个对象，一般情况下是proxyObj实例本身，请看下面的例子。

    const handler = {
        set(target, propKey, value, receiver){
            target[propKey] = receiver
            return true
        }
    }
    const proxyObj = new Proxy({}, handler)
    const myObj = {}
    Object.setPrototypeOf(myObj, proxyObj)
    myObj.name = 'caoyuan'
    myObj.name === myObj // true
    

    上面代码中，设置myObj.foo属性的值时，myObj并没有foo属性，因此引擎会到myObj的原型链去找foo属性。myObj的原型对象proxyObj是一个 Proxy 实例，设置它的foo属性会触发set方法。这时，第四个参数receiver就指向原始赋值行为所在的对象myObj。

    注意，如果目标对象自身的某个属性不可写，那么set方法将不起作用。

    const obj = {}
    Object.defineProperty(obj, 'name', {
        value: 'caoyuan',
        writable: false
    })
    const proxyObj = new Proxy(obj, {
        set(target, propKey, value, receiver) {
            target[propKey] = value
            return true
        }
    })
    proxyObj.name = 'caoyuan change' // TypeError: 'set' on proxy: trap returned truish for property 'name' which exists in the proxy target as a non-configurable and non-writable data property with a different value
    proxyObj.name // 'caoyuan'
    

    上面代码中，proxyObj.name属性不可写，Proxy 对这个属性的set代理将不会生效。

    注意，set代理应当返回一个布尔值。严格模式下，set代理如果没有返回true，就会报错。

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

    上面代码中，严格模式下，set代理返回false或者undefined，都会报错。

    has(target, propKey)

    has()方法用来拦截propKey in proxyObj的操作，返回一个布尔值。即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。

    has()方法可以接受两个参数，分别是目标对象、需查询的属性名。

    下面的例子使用has()方法隐藏某些属性，不被in运算符发现。

    const obj = {
        _name: 'caoyuan'
    }
    const proxyObj = new Proxy(obj, {
        has(target, propKey) {
            if(propKey[0] === '_') {
                return false
            }
            return propKey in target
        }
    })
    '_name' in proxyObj // false
    

    上面代码中，如果原对象的属性名的第一个字符是下划线，proxy.has()就会返回false，从而不会被in运算符发现。

    如果原对象不可配置或者禁止扩展，这时has()拦截会报错。

    const obj = {
        name: 'caoyuan'
    }
    Object.preventExtensions(obj)
    const proxyObj = new Proxy(obj, {
        has(target, propKey){
            return false
        }
    })
    'name' in proxyObj // TypeError: 'has' on proxy: trap returned falsish for property 'name' but the proxy target is not extensible
    'age' in proxyObj // false
    

    上面代码中，obj对象禁止扩展，结果使用has拦截obj上已有的属性，返回false会报错。也就是说，如果某个属性不可配置（或者目标对象不可扩展），则has()方法就不得“隐藏”（即返回false）目标对象的该属性。

    值得注意的是，has()方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has()方法不判断一个属性是对象自身的属性，还是继承的属性。

    另外，虽然for...in循环也用到了in运算符，但是has()拦截对for...in循环不生效。

    const obj = {
        name: 'caoyuan',
        age: 666
    }
    const proxyObj = new Proxy(obj, {
        has(target, propKey) {
            console.log('has ' + propKey)
            return propKey in target
        }
    })
    'name' in proxyObj 
    // has name
    // true
    for(let key in obj) {
        console.log('key', key)
    }
    // key name
    // key age
    

    上面代码中，has()拦截只对in运算符生效，对for...in循环不生效，导致不符合要求的属性没有被for...in循环所排除。

    deleteProperty(target, propKey)

    deleteProperty方法用于拦截delete proxyObj[propKey]操作，返回一个布尔值。如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。

    const obj = {
        _name: 'caoyuan',
        age: 666
    }
    const proxyObj = new Proxy(obj, {
        deleteProperty(target, propKey){
            if(propKey[0] === '_'){
                throw new Error('Can\'t delete private key ' + propKey)
            }
            delete target[propKey]
            return true
        }
    })
    delete proxyObj['age'] // true
    delete proxyObj['_name'] // Error: Can't delete private key _name
    

    上面代码中，deleteProperty方法拦截了delete操作符，删除第一个字符为下划线的属性会报错。

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

    defineProperty(target, propKey, propDesc)

    defineProperty()方法拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。

    const proxyObj = new Proxy({}, {
        defineProperty(target, propKey){
            return false
        }
    })
    proxyObj.name = 'caoyuan'
    proxyObj.name // undefined
    

    上面代码中，defineProperty()方法内部没有任何操作，只返回false，导致添加新属性总是无效。注意，这里的false只是用来提示操作失败，本身并不能阻止添加新属性。

    注意，如果目标对象不可扩展（non-extensible），则defineProperty()不能增加目标对象上不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写（writable）或不可配置（configurable），则defineProperty()方法不得改变这两个设置。

    getOwnPropertyDescriptor(target, propKey)

    getOwnPropertyDescriptor()方法拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined。

    const obj = {
        _name: 'caoyuan',
        age: 666
    }
    const proxyObj = new Proxy(obj, {
        getOwnPropertyDescriptor(target, propKey){
            if(propKey[0] === '_'){
                return
            }
            return Object.getOwnPropertyDescriptor(target, propKey)
        }
    })
    Object.getOwnPropertyDescriptor(proxyObj, '_name') // undefined
    Object.getOwnPropertyDescriptor(proxyObj, 'age') // {value: 666, writable: true, enumerable: true, configurable: true}
    Object.getOwnPropertyDescriptor(proxyObj, 'unknowKey') // undefined
    

    上面代码中，getOwnPropertyDescriptor()方法对于第一个字符为下划线的属性名会返回undefined。

    getPrototypeOf(target)

    getPrototypeOf()方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。

    • Object.prototype.__proto__
    • Object.prototype.isPrototypeOf()
    • Object.getPrototypeOf()
    • Reflect.getPrototypeOf()
    • instanceof

      下面是一个例子。

      const obj = {}
      const proxyObj = new Proxy(obj, {
          getPrototypeOf(target){
              return target
          }
      })
      Object.getPrototypeOf(proxyObj) === obj // true
      

      上面代码中，getPrototypeOf()方法拦截Object.getPrototypeOf()，返回proto对象。

      注意，getPrototypeOf()方法的返回值必须是对象或者null，否则报错。另外，如果目标对象不可扩展（non-extensible）， getPrototypeOf()方法必须返回目标对象的原型对象。

      setPrototypeOf(target, proto)

      setPrototypeOf()方法主要用来拦截Object.setPrototypeOf(proxyObj, proto)，返回一个布尔值。

      下面是一个例子。

      const obj = {
          name: 'caoyuan'
      }
      const proxyObj = new Proxy({}, {
          setPrototypeOf(target, proto) {
              throw new Error('Forbid set proto')
          }
      })
      Object.setPrototypeOf(proxyObj, obj) // Error: Forbid set proto
      

      上面代码中，只要修改target的原型对象，就会报错。

      注意，该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf()方法不得改变目标对象的原型。

      preventExtensions(target)

      preventExtensions()方法拦截Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。

      这个方法有一个限制，只有目标对象不可扩展时（即Object.isExtensible(proxyObj)为false），preventExtensions才能返回true，否则会报错。

      const proxyObj = new Proxy({}, {
          preventExtensions(target){
              return true
          }
      })
      Object.preventExtensions(proxyObj)
      // TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible
      

      上面代码中，preventExtensions()方法返回true，但这时Object.isExtensible(proxyObj)会返回true，因此报错。

      为了防止出现这个问题，通常要在preventExtensions()方法里面，调用一次Object.preventExtensions()。

      const proxyObj = new Proxy({}, {
          preventExtensions(target){
              console.log('called')
              Object.preventExtensions(target)
              return true
          }
      })
      Object.preventExtensions(proxyObj)
      // called
      // Proxy(Object) {}
      

      isExtensible(target)

      isExtensible()方法拦截Object.isExtensible()操作，返回一个布尔值。

      const proxyObj = new Proxy({}, {
          isExtensible(target){
              console.log('called')
              return true
          }
      })
      Object.isExtensible(proxyObj)
      // called
      // true
      

      上面代码设置了isExtensible()方法，在调用Object.isExtensible时会输出called。

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

      这个方法有一个强限制，它的返回值必须与目标对象的isExtensible属性保持一致，否则就会抛出错误。

      Object.isExtensible(proxyObj) === Object.isExtensible(target)
      

      下面是一个例子。

      const proxyObj = new Proxy({}, {
          isExtensible(target){
              console.log('called')
              return false
          }
      })
      Object.isExtensible(proxyObj)
      // called
      // TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')
      

      ownKeys(target)

      ownKeys()方法用来拦截对象自身属性的读取操作，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。具体来说，拦截以下操作。

      • Object.getOwnPropertyNames()
      • Object.getOwnPropertySymbols()
      • Object.keys()
      • for...in循环

        下面是拦截Object.keys()的例子。

        const obj = {
            name: 'caoyuan',
            age: 666
        }
        const proxyObj = new Proxy(obj, {
            ownKeys(target){
                return ['name', 'aaa']
            }
        })
        Object.keys(proxyObj) // ['name']
        

        上面代码拦截了对于obj对象的Object.keys()操作，只返回’name’, 'age’两个属性之中的name属性，且不会返回不存在的属性。

        下面的例子是拦截第一个字符为下划线的属性名。

        const obj = {
            name: 'caoyuan',
            age: 666,
            _attrs: ['src', 'title']
        }
        const proxyObj = new Proxy(obj, {
            ownKeys(target){
                return Reflect.ownKeys(target).filter(key => key[0] !== '_')
            }
        })
        Object.keys(proxyObj) // ['name', 'age']
        

        注意，使用Object.keys()方法时，有三类属性会被ownKeys()方法自动过滤，不会返回。

        • 目标对象上不存在的属性
        • 属性名为 Symbol 值
        • 不可遍历（enumerable）的属性

          const obj = {
              name: 'caoyuan',
              [Symbol.for('age')]: 666
          }
          Object.defineProperty(obj, 'key1', {
              value: 'privateKey',
              enumerable: false,
              configurable: true,
              writable: true
          })
          const proxyObj = new Proxy(obj, {
              ownKeys(target){
                  return ['name', Symbol.for('age'), 'key1', 'notExistKey']
              }
          })
          Object.keys(proxyObj) // ['name']
          

          上面代码中，ownKeys()方法之中，显式返回不存在的属性（notExistKey）、Symbol 值（Symbol.for(‘age’)）、不可遍历的属性（key1），结果都被自动过滤掉。

          ownKeys()方法还可以拦截Object.getOwnPropertyNames()。

          const proxyObj = new Proxy({}, {
              ownKeys(target) {
                  return ['name', 'age', 'sex']
              }
          })
          Object.getOwnPropertyNames(proxyObj) // ['name', 'age', 'sex']
          

          for...in循环也受到ownKeys()方法的拦截。

          const obj = {
              name: 'caoyuan',
              age: 666
          }
          const proxyObj = new Proxy(obj, {
              ownKeys(target){
                  return ['a', 'b']
              }
          })
          for(let key in proxyObj) {
              console.log(key)
          }
          

          上面代码中，ownkeys()指定只返回a和b属性，由于obj没有这两个属性，因此for...in循环不会有任何输出。

          ownKeys()方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

          const proxyObj = new Proxy({}, {
              ownKeys(target) {
                  return ['a', true, 123, Symbol.for('name'), null, undefined, []]
              }
          })
          Object.getOwnPropertyNames(proxyObj) // TypeError: true is not a valid property name
          

          上面代码中，ownKeys()方法虽然返回一个数组，但是每一个数组成员都不是字符串或 Symbol 值，因此就报错了。

          如果目标对象自身包含不可配置的属性，则该属性必须被ownKeys()方法返回，否则报错。

          const obj = {}
          Object.defineProperty(obj, 'name', {
              value: 'caoyuan',
              writable: true,
              configurable: false,
              enumerable: true
          })
          const proxyObj = new Proxy(obj, {
              ownKeys(target) {
                  return ['a']
              }
          })
          Object.getOwnPropertyNames(proxyObj) // TypeError: 'ownKeys' on proxy: trap result did not include 'name'
          

          上面代码中，obj对象的name属性是不可配置的，这时ownKeys()方法返回的数组之中，必须包含name，否则会报错。

          另外，如果目标对象是不可扩展的（non-extensible），这时ownKeys()方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。

          const obj = {
              name: 'caoyuan'
          }
          Object.preventExtensions(obj)
          const proxyObj = new Proxy(obj, {
              ownKeys(target) {
                  return ['name', 'age']
              }
          })
          Object.getOwnPropertyNames(proxyObj) // TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible
          

          上面代码中，obj对象是不可扩展的，这时ownKeys()方法返回的数组之中，包含了obj对象的多余属性age，所以导致了报错。

          apply(target, thisArg, args)

          apply方法可以接受三个参数，分别是目标对象（函数）、被调用时的上下文对象（this）和被调用时的参数数组。

          该方法会拦截目标对象的以下操作：

          • proxy(args)
          • Function.prototype.apply() 和 Function.prototype.call()
          • Reflect.apply()

            const handler = {
              apply (target, thisArg, args) {
                return Reflect.apply(target, thisArg, args);
              }
            };
            

            下面是一个例子。

            const fn = () => {}
            const proxyFn = new Proxy(fn, {
                apply(){
                    return 'You called the function'
                }
            })
            proxyFn() // 'You called the function'
            

            上面代码中，变量proxyFn是 Proxy 的实例，当它作为函数调用时（proxyFn()），就会被apply方法拦截，返回一个字符串。

            下面是另外一个例子。

            function addFn(a, b) {
              return a + b
            }
            const proxyFn = new Proxy(addFn, {
              apply(target, thisArg, args) {
                  return Reflect.apply(target, thisArg, args) * 2
              }
            })
            proxyFn(1,2) // 6
            proxyFn.call(null, 3, 4) // 14
            proxyFn.apply(null, [5, 6]) // 22
            

            上面代码中，每当执行proxy函数（直接调用或call和apply调用），就会被apply方法拦截。

            另外，直接调用Reflect.apply方法，也会被拦截。

            Reflect.apply(proxyFn, null, [6, 6]) // 24
            

            construct(target, args, newTarget)

            construct()方法用于拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(args)。下面是拦截对象的写法。

            const handler = {
              construct (target, args, newTarget) {
                return new target(...args);
              }
            };
            

            construct()方法可以接受三个参数。

            • target：目标对象。
            • args：构造函数的参数数组。
            • newTarget：创造实例对象时，new命令作用后的构造函数（下面例子的p）。

              function fn(){}
              const proxyFn = new Proxy(fn, {
                construct(target, [rest], newTarget) {
                  return { name: 'caoyuan', age: 666, ...rest }
                }
              })
              new proxyFn({ sex: 'man' }) // {name: 'caoyuan', age: 666, sex: 'man'}
              

              construct()方法返回的必须是一个对象，否则会报错。

              const proxyFn = new Proxy(function(){}, {
                  construct(target, args, newTarget){
                      return 1
                  }
              })
              new proxyFn() // TypeError: 'construct' on proxy: trap returned non-object ('1')
              

              另外，由于construct()拦截的是构造函数，所以它的目标对象必须是函数，否则就会报错。

              const proxyFn = new Proxy({}, {
                  construct(target, args, newTarget){
                      return {}
                  }
              })
              new proxyFn() // TypeError: proxyFn is not a constructor
              

              上面例子中，拦截的目标对象不是一个函数，而是一个对象（new Proxy()的第一个参数），导致报错。

              注意，construct()方法中的this指向的是handler，而不是实例对象。

              const handler = {
                construct: function(target, args, newTarget) {
                  console.log(this === handler);
                  return new target(...args);
                }
              }
              let p = new Proxy(function () {}, handler);
              new p() // true
              

              Proxy.revocable()

              Proxy.revocable()方法返回一个可取消的 Proxy 实例。

              const { proxy, revoke } = Proxy.revocable({}, {}) 
              proxy.name = 'caoyuan'
              proxy.name // 'caoyuan'
              revoke()
              proxy.name // TypeError: Cannot perform 'get' on a proxy that has been revoked
              

              Proxy.revocable()方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例。上面代码中，当执行revoke函数之后，再访问Proxy实例，就会抛出一个错误。

              Proxy.revocable()的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

              this 问题

              虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的this关键字会指向 Proxy 代理。

              const obj = {
                  fn(){
                      console.log(this, proxyObj, this === proxyObj)
                  }
              }
              const proxyObj = new Proxy(obj, {})
              obj.fn()
              // {fn: ƒ}   Proxy(Object) {fn: ƒ}   false
              proxyObj.fn()
              // Proxy(Object) {fn: ƒ}   Proxy(Object) {fn: ƒ}   true
              

              上面代码中，一旦proxyObj代理obj，proxyObj.fn()内部的this就是指向proxyObj，而不是obj。所以，虽然Proxy没有做任何拦截，obj.fn()和proxyObj.fn()返回不一样的结果。

              下面是一个例子，由于this指向的变化，导致 Proxy 无法代理目标对象。

              const wmap = new WeakMap()
              class Person {
                  constructor(name){
                      wmap.set(this, name)
                  }
                  get name(){
                      return wmap.get(this)
                  }
              }
              const me = new Person('caoyuan')
              me.name // 'caoyuan'
              const proxyObj = new Proxy(me, {})
              proxyObj.name // undefined
              

              上面代码中，目标对象me的name属性，实际保存在外部WeakMap对象wmap上面，通过this键区分。由于通过proxyObj.name访问时，this指向proxyObj，导致无法取到值，所以返回undefined。

              此外，有些原生对象的内部属性，只有通过正确的this才能拿到，所以 Proxy 也无法代理这些原生对象的属性。

              const target = new Date();
              const handler = {};
              const proxy = new Proxy(target, handler);
              proxy.getDate();
              // TypeError: this is not a Date object.
              

              上面代码中，getDate()方法只能在Date对象实例上面拿到，如果this不是Date对象实例就会报错。这时，this绑定原始对象，就可以解决这个问题。

              const target = new Date('2015-01-01');
              const handler = {
                get(target, prop) {
                  if (prop === 'getDate') {
                    return target.getDate.bind(target);
                  }
                  return Reflect.get(target, prop);
                }
              };
              const proxy = new Proxy(target, handler);
              proxy.getDate() // 1
              

              另外，Proxy 拦截函数内部的this，指向的是handler对象。

              const handler = {
                  get(target, propKey){
                      console.log('get', this === handler)
                      return target[propKey]
                  },
                  set(target, propKey, value){
                      console.log('set', this === handler)
                      target[propKey] = value
                  }
              }
              const proxyObj = new Proxy({}, handler)
              proxyObj.name = 'caoyuan' // set true
              proxyObj.name // get true // 'caoyuan'
              

              上面例子中，get()和set()拦截函数内部的this，指向的都是handler对象。

              实例：Web 服务的客户端

              Proxy 对象可以拦截目标对象的任意属性，这使得它很合适用来写 Web 服务的客户端。

              const service = createWebService('http://example.com/data');
              service.employees().then(json => {
                const employees = JSON.parse(json);
                // ···
              });
              

              上面代码新建了一个 Web 服务的接口，这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截就可以了。

              function createWebService(baseUrl) {
                return new Proxy({}, {
                  get(target, propKey, receiver) {
                    return () => httpGet(baseUrl + '/' + propKey);
                  }
                });
              }
              

              同理，Proxy 也可以用来实现数据库的 ORM 层。