Proxy的使用

Proxy用于修改部分操作，具体为拦截操作后按自己定义的方式执行操作，通过proxy可以实现对访问的过滤和改写。

var proxy = new Proxy(target, handler);

Proxy构造函数接受两个参数，第一个参数是要拦截的目标对象，第二个参数是拦截的行为，包括允许的拦截操作和自定义的修改。

var proxy = new Proxy({}, {

  get: function(target, property) {

    return 35;

  }});

let obj = Object.create(proxy);

obj.time // 35

如上面代码中，Proxy拦截了get操作，只要进行对该Proxy对象进行get操作，就会返回35。当然每次可以拦截多个，如下面代码中同时拦截了get和set。

var obj = new Proxy({}, {

  get: function (target, key, receiver) {

    console.log(`getting ${key}!`);

    return Reflect.get(target, key, receiver);

  },

  set: function (target, key, value, receiver) {

    console.log(`setting ${key}!`);

    return Reflect.set(target, key, value, receiver);

  }});

Proxy支持的拦截方法

Proxy支持13种拦截操作

get

get(target, propKey, receiver)：拦截对象属性的读取，该方法接受三个参数，第一个为拦截的目标对象，第二个为要获取的属性名，第三个为proxy实例本身（事实上是执行操作的对象本身），最后一个参数是可选的。

var person={

    name:"jack",

    age:18

}

var pro=new Proxy(person,{

    get:function(target,prototype){

        if(prototype==='name')

            return `the name called ${target[prototype]}`;

        else if(prototype==='age')

            return `age is ${target[prototype]}`;

    }

})

pro.name

//"the name called jack"

pro.age

//"age is 18"

pro.id

//undefined

若没有对拦截的对象的属性return值，则会返回undefined

get的拦截会被继承，表现为当对象没有要获取的属性，在原型链上查找该属性时被拦截，如下面代码

var pro=new Proxy({},{

    get:function(target,prototype){

        if(prototype==='name')

            return `the name called ${target[prototype]}`;

        else if(prototype==='age')

            return `age is ${target[prototype]}`;

    }

})

var person=Object.create(pro)

person.name

//"the name called undefined"

上面代码中，person是个空对象，没有name属性，所以在获取其name属性时，因为在当前对象找不到，所以沿着原型链找该属性，在其原型对象上找到该属性被拦截。

var pro=new Proxy({},{

    get:function(target,prototype,proxy){

     return proxy;

    }

})

var d=Object.create(pro)

d.name===d

//true

第三个参数指向操作对象本身，因为d没有name属性，所以沿原型链查找该属性被拦截返回本对象。

get拦截的实用案例

实现负数的索引

var arr=[1,2,3]

var arrPro=new Proxy(arr,{

    get (target,index){

       if(Math.abs(index)<target.length){

            if(index>=0)

             return target[index];

         else

             return target[Number(index)+target.length];

       }

       else

           return 'out of length';

    }

})

arrPro[-1]

//3

这里在获取数组成员时拦截判断是否为负数，当为负数时则加上数组的长度，这样就等同于倒数获取数组成员了。

实现链式操作

var pipe = (function () {

  return function (value) {

    var funcStack = [];

    var oproxy = new Proxy({} , {

      get : function (pipeObject, fnName) {

        if (fnName === 'get') {

          return funcStack.reduce(function (val, fn) {

            return fn(val);

          },value);

        }

        funcStack.push(window[fnName]);

        return oproxy;

      }

    });

    return oproxy;

  }}());

var double = n => n * 2;

var pow    = n => n * n;

var reverseInt = n => n.toString().split("").reverse().join("") | 0;

pipe(3).double.pow.reverseInt.get; // 63

上面的代码拦截了gat操作，在属性名为get之前，将属性名压入存放方法的数组中，待属性名为get时再依次调用方法数组中的方法，所以上面的63是通过3*2，6*6，36倒置得到的。

若一个属性不可写且不可设置，则proxy不能修改该属性，否则通过Proxy对象访问该属性会报错，但没修改仍是可以访问该属性的

var target = Object.defineProperties({}, {

  foo: {

    value: 123,

    writable: false,

    configurable: false

  },

});



//没有修改属性

var pro=new Proxy(target,{

    get(target,prototype){

        return target[prototype];

    }

})

pro.foo

// 123



//修改了属性

pro=new Proxy(target,{

    get(target,prototype){

        return 'abc';

    }

})

pro.foo

//Uncaught TypeError: 'get' on proxy: property 'foo' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value(expected '123' but got 'abc')

set

set用于拦截属性的设置操作，该方法接受四个参数，操作的对象，属性名，属性值，proxy实例本身（事实上是执行操作的对象本身），最后一个参数是可选的。

set可以用来规范属性的设置，在属性设置不合规范时报错

var person=new Proxy({},{

    set(target,name,value){

        if(name==='age'){

            if(!Number.isInteger(value))//判断age设置的值是否为整数

                throw new TypeError('the age must be integer');

            if(value<0)//判断age设置的值是否大于0

                throw new TypeError('the age must bigger than 0');

        }

        target[name]=value;

    }

});

person.age=’a’;

// Uncaught TypeError: the age must be integer at Object.set

person.age=-1

// Uncaught TypeError: the age must bigger than 0 at Object.set

person.age=18;

console.log(person);

//Proxy {age: 18}

有时我们在对象上设置内部属性时会将第一个字符写为下划线来表示是一个内部属性，通过使用proxy就可以使这类写法的属性不会被外界访问到。

var judgePrivate=(key,action)=>{

    if(key[0]==='_')

        throw new TypeError(`the key is private, not allow to ${action} it`);

}

var private=new Proxy({},{

    set(target,name,value){

        judgePrivate(name,'set');

        target[name]=value;

    },

    get(target,name){

        judgePrivate(name,'get');

        return target[name];

    }

})

private.name='jack'

private.name

// "jack"

private._name='jhon'

// Uncaught TypeError: the key is private, not allow to set it

private._name

// Uncaught TypeError: the key is private, not allow to get it

这里通过judgePrivate方法，当属性的第一个字符为下划线时抛出错误，若第一个字符不为下划线时，则正常设置，正常获取。

set方法的第四个参数和get方法第三个参数返回的是一样的。

使用set方法时要注意两点

对于不可写，不可配置的属性，set方法不起作用

var obj = {};

Object.defineProperty(obj, 'foo', {

  value: 'bar',

  writable: false,

});

var pro=new Proxy(obj,{

    set(target,key,value){

        target[key]=value;

    }

})

pro.foo

// "bar"

pro.foo='1'

console.log(pro.foo);

// "bar"

其次，在严格模式中，set如果没有返回true，就会报错。

'use strict';

var pro=new Proxy({},{

    set(target,key,value){

        target[key]=value;

    }

})

pro.foo = 'bar';

//Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'foo'

严格模式中，没有返回true，即包括没有返回值（即返回undefined），返回false，返回0，返回null等不会转为true的值都会报错

apply

apply方法拦截函数的调用，call和apply操作

apply方法接受三个参数，目标对象，目标对象的上下文对象（this）和目标对象的参数数组

var fn=function(){

    console.log('I am function');

}

var pro=new Proxy(fn,{

    apply(){

        console.log('this is apply');

    }

})

pro()

// this is apply



var twice = {

  apply (target, ctx, args) {

    return Reflect.apply(...arguments) * 2;

  }

};

function sum (left, right) {

  return left + right;

};

var proxy = new Proxy(sum, twice);

proxy(1, 2) // 6

var arr=[1,2];

proxy(...arr)// 6

proxy.call(null, 5, 6) // 22

proxy.apply(null, [7, 8]) // 30

从上面代码能看出，每当调用proxy函数时（直接调用或使用扩展运算符，call和apply调用），都会被apply方法拦截。

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

Reflect.apply(proxy, null, [9, 10]) // 38

has

has方法用于拦截HasProperty操作，即判断对象中是否有某个属性该方法接受两个参数，第一个是目标对象，第二个为查询的属性名

可以通过该方法隐藏某些带特殊字符的属性不让in发现，比如内部属性

var target={

    foo:'bar',

    _foo:'_bar'

}

var pro=new Proxy(target,{

    has(target,key){

        if(key[0]==='_')

            return false;

        return key in target;

    }

})

'foo' in pro

// true

'_foo' in pro

// false

上面代码中，虽然foo和_foo都在pro中，但因为在进行HasProperty操作时被has拦截，所以最后_foo返回false。

如果目标对象不可配置或禁止扩展，has拦截会报错

var obj = { a: 10 };

Object.preventExtensions(obj);

var p = new Proxy(obj, {

  has: function(target, prop) {

    return false;

  }

});

'a' in p // TypeError is thrown

要注意的是，has拦截只对in运算符生效，for...in遍历不会生效，且has拦截不判断一个属性属于对象自身或者是继承。

construct

construct方法用于拦截new命令，接受三个参数，目标对象，构造函数的参数对象，创造实例对象时new命令作用的构造函数。

var pro=new Proxy(function () {},{

    construct(target,args,newTarget){

        return {a:1,...args};

    }

})

new pro()

// {a: 1}

new pro(1)

// {0: 1, a: 1}

construct方法必须返回一个对象，否则会报错

var pro=new Proxy(function () {},{

    construct(target,args,newTarget){

        return 1;

    }

})

new pro()

// Uncaught TypeError: 'construct' on proxy: trap returned non-object ('1')

deleteProperty

该方法用于拦截delete操作，如果该方法抛出错误或返回false，则删除不成功。该方法接受两个参数，第一个为目标对象，第二个为属性名。

var obj={

    _foo:'bar',

    foo:'bar'

}

var pro=new Proxy(obj,{

    deleteProperty(target,key){

        if(key[0]==='_')

            throw new TypeError(`${key} is private value, not allow to delete it`);

        delete target[key];

        return true;

    }

});

delete pro._foo

// Uncaught TypeError: _foo is private value, not allow to delete it

defineProperty

该方法拦截了Object.defineProperty操作，该方法第一个参数为目标对象，第二个参数为属性名

var handler = {

  defineProperty (target, key, descriptor) {

    return false;

  }};

var target = {};

var proxy = new Proxy(target, handler);

proxy.foo = 'bar' // 不会生效

上面代码中，defineProperty方法返回false，导致添加新属性总是无效。

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

getOwnPropertyDescriptor

该方法拦截Object.getOwnPropertyDescriptor()，即拦截返回对象的自身属性，该方法接受两个参数，第一个参数为目标对象，第二个参数为属性名

var handler = {

  getOwnPropertyDescriptor (target, key) {

    if (key[0] === '_') {

      return;

    }

    return Object.getOwnPropertyDescriptor(target, key);

  }};

var target = { _foo: 'bar', baz: 'tar' };

var proxy = new Proxy(target, handler);

Object.getOwnPropertyDescriptor(proxy, 'wat')

// undefined

Object.getOwnPropertyDescriptor(proxy, '_foo')

// undefined

Object.getOwnPropertyDescriptor(proxy, 'baz')

// { value: 'tar', writable: true, enumerable: true, configurable: true }

上面代码中将首字符为下划线的自身属性获取时返回了undefined

getPrototypeOf

该方法拦截对象获取原型，即拦截以下操作

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

var proto = {};var p = new Proxy({}, {

  getPrototypeOf(target) {

    return proto;

  }});

Object.getPrototypeOf(p) === proto // true

该方法的返回值必须为对象或者null，否则会报错

var p = new Proxy({}, {

  getPrototypeOf(target) {

    return 1;

  }

});

p.__proto__

// Uncaught TypeError: 'getPrototypeOf' on proxy: trap returned neither object nor null at Proxy.get __proto__

isExtensible

该方法用于拦截Object.isExtensible操作，即在判断对象是否可扩展时拦截。该方法必须返回布尔值。

var pro=new Proxy({},{

    isExtensible(target){

        console.log('this is isExtensible');

     return true;

        }

})

Object.isExtensible(pro)

// this is isExtensible

ownKeys

该方法用来拦截读取自身属性的操作，具体为以下四个操作

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

可以使用该方法来拦截对首字符为下划线的属性名的获取

let target = {

  _bar: 'foo',

  _prop: 'bar',

  prop: 'baz'};

let handler = {

  ownKeys (target) {

    return Reflect.ownKeys(target).filter(key => key[0] !== '_');

  }

};

let proxy = new Proxy(target, handler);

for (let key of Object.keys(proxy)) {

  console.log(target[key]);

}

// "baz"

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

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

即使显式地返回这些属性，也会被自动过滤

let target = {

  a: 1,

  b: 2,

  c: 3,

  [Symbol.for('secret')]: '4',

};



Object.defineProperty(target, 'key', {

  enumerable: false,

  configurable: true,

  writable: true,

  value: 'static'

});

let handler = {

  ownKeys(target) {

    return ['a', 'd', Symbol.for('secret'), 'key'];

  }

};

let proxy = new Proxy(target, handler);

Object.keys(proxy)

// ['a']

上面代码中，显式返回的'd', Symbol.for('secret'), 'key'都是会被自动过滤的，所以最后返回时只返回了a。

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

var obj = {};

var p = new Proxy(obj, {

  ownKeys: function(target) {

    return [123, true, undefined, null, {}, []];

  }});



Object.getOwnPropertyNames(p)

// Uncaught TypeError: 123 is not a valid property name

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

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

var obj = {};

Object.defineProperty(obj, 'a', {

  configurable: false,

  enumerable: true,

  value: 10 

});

var p = new Proxy(obj, {

  ownKeys: function(target) {

    return ['b'];

  }

});



Object.getOwnPropertyNames(p)

// Uncaught TypeError: 'ownKeys' on proxy: trap result did not include 'a'

上面代码中，属性a的configurable为false，所以必须被ownKeys返回，但实际上没有被返回，所以最后报错了。

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

var obj = {
  a: 1
};

Object.preventExtensions(obj);

var p = new Proxy(obj, {

  ownKeys: function(target) {

    return ['a', 'b'];

  }});



Object.getOwnPropertyNames(p)

// Uncaught TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible

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

preventExtensions

该方法拦截Object.preventExtensions，即阻止扩展的操作，该方法必须返回一个布尔值，否则会报错。

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

var proxy = new Proxy({}, {

  preventExtensions: function(target) {

    return true;

  }

});

Object.isExtensible(proxy)

// true

Object.preventExtensions(proxy)

// Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible at Function.preventExtensions

上面代码中Object.isExtensible(proxy)返回true，但preventExtensions方法也返回true，所以报错了。

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

var proxy = new Proxy({}, {

  preventExtensions: function(target) {

    console.log('called');

    Object.preventExtensions(target);

    return true;

  }

});

Object.preventExtensions(proxy)

// "called"

// Proxy {}

setPrototypeOf

该方法用于拦截Object.setPrototypeOf方法，即拦截对原型的设置

var handler = {

  setPrototypeOf (target, proto) {

    throw new Error('Changing the prototype is forbidden');

  }

};

var proto = {};var target = function () {};

var proxy = new Proxy(target, handler);

Object.setPrototypeOf(proxy, proto);

// Error: Changing the prototype is forbidden

上面的代码中只要修改原型就会抛出错误。

可取消的代理

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

let target = {};let handler = {};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;

proxy.foo // 123

revoke();

proxy.foo // TypeError: Revoked

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

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

this问题

使用代理时，this会指向proxy对象而非原来的对象，这使得原对象中的方法若有this，使用代理后会找不到对应的值。

const _name = new WeakMap();



class Person {

  constructor(name) {

    _name.set(this, name);

  }

  get name() {

    return _name.get(this);

  }

}

const jane = new Person('Jane');

jane.name // 'Jane'

const proxy = new Proxy(jane, {});

proxy.name // undefined

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

参考自阮一峰的《ECMAScript6入门》

ES6学习笔记（十二）Proxy代理