当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

文章目录

概述

在进行本文阅读前，建议先阅读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 层。

原文地址:https://blog.csdn.net/weixin_44116302/article/details/135974612

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_67415.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 ES6学习笔记
下一篇 【win】vscode无法使用ctrl+shift+p快捷键的解决方案

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。