ECMAScript Proxy和Reflect

作者: 墨马 | 来源:发表于2017-10-23 21:16 被阅读56次

Proxy概述

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

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);
   }
});

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（ get ）和设置（ set ）行为。对设置了拦截行为的对象 obj ，去读写它的属性，就会得到下面的结果。

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

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

var proxy = new Proxy(target, handler);

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

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

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

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"
//handler 是一个空对象，没有任何拦截效果，访问 handeler 就等同于访问 target

将Proxy对象，设置到 object.proxy 属性，从而可以在 object 对象上调用

var object = { 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 对象是 obj 对象的原型， obj 对象本身并没有 time 属性，所以根据原型链，会在 proxy 对象上读取该属性，导致被拦截

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

（1）get(target, propKey, receiver)

拦截对象属性的读取，比如 proxy.foo 和 proxy['foo'] ，返回类型不限。最后一个参数 receiver 可选，当 target 对象设置了 propKey 属性的 get 函数时， receiver 对象会绑定 get 函数的 this 对象。

（2）set(target, propKey, value, receiver)

拦截对象属性的设置，比如 proxy.foo = v 或 proxy['foo'] = v ，返回一个布尔值。

（3）has(target, propKey)

拦截 propKey in proxy 的操作，返回一个布尔值。

（4）deleteProperty(target, propKey)

拦截 delete proxy[propKey] 的操作，返回一个布尔值。

（5）enumerate(target)

拦截 for (var x in proxy) ，返回一个遍历器。

（6）ownKeys(target)

拦截 Object.getOwnPropertyNames(proxy) 、 Object.getOwnPropertySymbols(proxy) 、 Object.keys(proxy) ，返回一个数组。该方法返回对象所有自身的属性，而 Object.keys() 仅返回对象可遍历的属性。

（7）getOwnPropertyDescriptor(target, propKey)

拦截 Object.getOwnPropertyDescriptor(proxy, propKey) ，返回属性的描述对象。

（8）defineProperty(target, propKey, propDesc)

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

（9）preventExtensions(target)

拦截 Object.preventExtensions(proxy) ，返回一个布尔值。

（10）getPrototypeOf(target)

拦截 Object.getPrototypeOf(proxy) ，返回一个对象。

（11）isExtensible(target)

拦截 Object.isExtensible(proxy) ，返回一个布尔值。

（12）setPrototypeOf(target, proto)

拦截 Object.setPrototypeOf(proxy, proto) ，返回一个布尔值。
如果目标对象是函数，那么还有两种额外操作可以拦截。

（13）apply(target, object, args)

拦截Proxy实例作为函数调用的操作，比如 proxy(...args) 、 proxy.call(object, ...args) 、 proxy.apply(...) 。

（14）construct(target, args, proxy)

拦截Proxy实例作为构造函数调用的操作，比如 new proxy(...args) 。

Proxy实例的方法

get()

var person = {
   name: "张三"
};
var proxy = new Proxy(person, {
   get: function(target, property) {
      if (property in target) {
         return target[property];
      } else {
            throw new ReferenceError("Property \"" + property + "\" does not exist.");
      }
   }
});
proxy.name // "张三"
proxy.age // 抛出一个错误

如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回 undefined 。
get 方法可以继承。

let proto = new Proxy({}, {
   get(target, propertyKey, receiver) {
      console.log('GET '+propertyKey);
      return target[propertyKey];
   }
});
let obj = Object.create(proto);
obj.xxx // "GET xxx"

拦截操作定义在Prototype对象上面，所以如果读取 obj 对象继承的属性时，拦截会生效
使用 get 拦截，实现数组读取负数的索引。

function createArray(...elements) {
   let handler = {
     get(target, propKey, receiver) {
        let index = Number(propKey);
        if (index < 0) {
          propKey = String(target.length + index);
        }
        return Reflect.get(target, propKey, receiver);
     }
   };
     let target = [];
     target.push(...elements);
     return new Proxy(target, handler);
}
let arr = createArray('a', 'b', 'c');
arr[-1] // c

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

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

利用 get 拦截，实现一个生成各种DOM节点的通用函数 dom 。

const dom = new Proxy({}, {
   get(target, property) {
      return function(attrs = {}, ...children) {
         const el = document.createElement(property);
         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);

set()

set 方法用来拦截某个属性的赋值操作。
假定 Person 对象有一个 age 属性，该属性应该是一个不大于200的整数，那么可以使用 Proxy 保证 age 的属性值符合要求

let validator = {
   set: function(obj, prop, value) {
      if (prop === 'age') {
         if (!Number.isInteger(value)) {
            throw new TypeError('The age is not an integer');
         }
         if (value > 200) {
            throw new RangeError('The age seems invalid');
         }
      }
      // 对于age以外的属性，直接保存
      obj[prop] = value;
   }
};
let person = new Proxy({}, validator);
person.age = 100;
person.age // 100
person.age = 'young' // 报错
person.age = 300 // 报错

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

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

var handler = {
   get (target, key) {
      invariant(key, 'get');
      return target[key];
   },
   set (target, key, value) {
      invariant(key, 'set');
      return true;
   }
};
function invariant (key, action) {
   if (key[0] === '_') {
      throw new Error(`Invalid attempt to ${action} private "${key}" property`);
   }
}
var target = {};
var proxy = new Proxy(target, handler);
proxy._prop
// Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c'
// Error: Invalid attempt to set private "_prop" property

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

apply()

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

var handler = {
   apply (target, ctx, args) {
      return Reflect.apply(...arguments);
   }
};

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

var target = function () { return 'I am the target'; };
var handler = {
   apply: function () {
      return 'I am the proxy';
   }
};
var p = new Proxy(target, handler);
p()
// "I am the proxy"

变量 p 是Proxy的实例，当它作为函数调用时（ p() ），就会被 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
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30
Reflect.apply(proxy, null, [9, 10]) // 38

每当执行 proxy 函数（直接调用或 call 和 apply 调用），直接调用 Reflect.apply 方法，就会被 apply 方法拦截。

has()

has 方法可以隐藏某些属性，不被 in 操作符发现

var handler = {
   has (target, key) {
      if (key[0] === '_') {
         return false;
      }
      return key in target;
   }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

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

如果原对象不可配置或者禁止扩展，这时 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

obj 对象禁止扩展，结果使用 has 拦截就会报错。

construct()

construct 方法用于拦截 new 命令

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

var p = new Proxy(function() {}, {
   construct: function(target, args) {
      console.log('called: ' + args.join(', '));
      return { value: args[0] * 10 };
   }
});
new p(1).value
// "called: 1"
// 10

如果 construct 方法返回的不是对象，就会抛出错误。

var p = new Proxy(function() {}, {
   construct: function(target, argumentsList) {
      return 1;
   }
});
new p() // 报错

deleteProperty()

deleteProperty 方法用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，当前属性就无法被 delete 命令删除

var handler = {
   deleteProperty (target, key) {
      invariant(key, 'delete');
      return true;
   }
};
function invariant (key, action) {
   if (key[0] === '_') {
      throw new Error(`Invalid attempt to ${action} private "${key}" property`);
   }
}
var target = { _prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop
// Error: Invalid attempt to delete private "_prop" property

defineProperty()

defineProperty 方法拦截了 Object.defineProperty 操作

var handler = {
   defineProperty (target, key, descriptor) {
      return false;
   }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar'
// TypeError: proxy defineProperty handler returned false for property '"foo"'

defineProperty 方法返回 false ，导致添加新属性会抛出错误

enumerate()

enumerate 方法用来拦截 for...in 循环。注意与Proxy对象的 has 方法区分，后者用来拦截 in 操作符，对 for...in 循环无效。

var handler = {
   enumerate (target) {
      return Object.keys(target).filter(key => key[0] !== '_')[Symbol.iterator]();
   }
};
var target = { prop: 'foo', _bar: 'baz', _prop: 'foo' };
var proxy = new Proxy(target, handler);
for (let key in proxy) {
   console.log(key);
   // "prop"
}

enumerate 方法取出原对象的所有属性名，将其中第一个字符等于下划线的都过滤掉，然后返回这些符合条件的属性名的一个遍历器对象，供 for...in 循环消费

var p = new Proxy({}, {
   enumerate(target) {
      console.log("called");
      return ["a", "b", "c"][Symbol.iterator]();
   }
});
for (var x in p) {
   console.log(x);
}
// "called"
// "a"
// "b"
// "c"

如果 enumerate 方法返回的不是一个对象，就会报错。

var p = new Proxy({}, {
   enumerate(target) {
      return 1;
   }
});
for (var x in p) {} // 报错

getOwnPropertyDescriptor()

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

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 }

handler.getOwnPropertyDescriptor 方法对于第一个字符为下划线的属性名会返回 undefined

getPrototypeOf()

getPrototypeOf 方法主要用来拦截 Object.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

getPrototypeOf 方法拦截 Object.getPrototypeOf() ，返回 proto 对象

isExtensible()

isExtensible 方法拦截 Object.isExtensible 操作

var p = new Proxy({}, {
   isExtensible: function(target) {
      console.log("called");
      return true;
   }
});
Object.isExtensible(p)
// "called"
// true

设置了 isExtensible 方法，在调用 Object.isExtensible 时会输出 called 。
这个方法有一个强限制，如果不能满足下面的条件，就会抛出错误。

Object.isExtensible(proxy) === Object.isExtensible(target)

var p = new Proxy({}, {
   isExtensible: function(target) {
      return false;
   }
});
Object.isExtensible(p) // 报错

ownKeys()

ownKeys 方法用来拦截 Object.keys() 操作

let target = {};
let handler = {
   ownKeys(target) {
      return ['hello', 'world'];
   }
};
let proxy = new Proxy(target, handler);
Object.keys(proxy)
// [ 'hello', 'world' ]

拦截了对于 target 对象的 Object.keys() 操作，返回预先设定的数组

var target = {
   _bar: 'foo',
   _prop: 'bar',
   prop: 'baz'
};
var handler = {
   ownKeys (target) {
      return Reflect.ownKeys(target).filter(key => key[0] !== '_');
   }
};
var proxy = new Proxy(target, handler);
for (let key of Object.keys(proxy)) {
   console.log(key)
}
// "baz"

preventExtensions()

preventExtensions 方法拦截 Object.preventExtensions() 。该方法必须返回一个布尔值
只有当 Object.isExtensible(proxy) 为 false （即不可扩展）时， proxy.preventExtensions 才能返回 true ，否则会报错

var p = new Proxy({}, {
   preventExtensions: function(target) {
      return true;
   }
});
Object.preventExtensions(p) // 报错

proxy.preventExtensions 方法返回 true ，但这时 Object.isExtensible(proxy) 会返回 true ，因此报错。
为了防止出现这个问题，通常要在 proxy.preventExtensions 方法里面，调用一次Object.preventExtensions 。

var p = new Proxy({}, {
   preventExtensions: function(target) {
      console.log("called");
      Object.preventExtensions(target);
      return true;
   }
});
Object.preventExtensions(p)
// "called"
// true

setPrototypeOf()

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);
proxy.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden

只要修改 target 的原型对象，就会报错

Proxy.revocable()

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 实例，就会抛出一个错误。

Reflect概述

Reflect 对象与 Proxy 对象一样，也是ES6为了操作对象而提供的新API。

将 Object 对象的一些明显属于语言内部的方法（比如 Object.defineProperty ），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上
修改某些Object方法的返回结果，让其变得更合理。比如， Object.defineProperty(obj, name, desc) 在无法定义属性时，会抛出一个错误，而 Reflect.defineProperty(obj, name, desc) 则会返回 false

// 老写法
try {
   Object.defineProperty(target, property, attributes);
   // success
} catch (e) {
   // failure
}
// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
   // success
} else {
   // failure
}

让 Object 操作都变成函数行为。某些 Object 操作是命令式，比如 name in obj 和 delete obj[name] ，而 Reflect.has(obj, name) 和 Reflect.deleteProperty(obj, name) 让它们变成了函数行为

// 老写法
'assign' in Object // true
// 新写法
Reflect.has(Object, 'assign') // true

Reflect 对象的方法与 Proxy 对象的方法一一对应，只要是 Proxy 对象的方法，就能在 Reflect 对象上找到对应的方法。这就让 Proxy 对象可以方便地调用对应的 Reflect 方法，完成默认行为，作为修改行为的基础。也就是说，不管 Proxy 怎么修改默认行为，你总可以在 Reflect 上获取默认行为

Proxy(target, {
   set: function(target, name, value, receiver) {
      var success = Reflect.set(target,name, value, receiver);
      if (success) {
         log('property ' + name + ' on ' + target + ' set to ' + value);
      }
      return success;
   }
});

Proxy 方法拦截 target 对象的属性赋值行为。它采用 Reflect.set 方法将值赋值给对象的属性，然后再部署额外的功能。

var loggedObj = new Proxy(obj, {
   get(target, name) {
      console.log('get', target, name);
      return Reflect.get(target, name);
   },
   deleteProperty(target, name) {
      console.log('delete' + name);
      return Reflect.deleteProperty(target, name);
   },
   has(target, name) {
      console.log('has' + name);
      return Reflect.has(target, name);
   }
});

每一个 Proxy 对象的拦截操作（ get 、 delete 、 has ），内部都调用对应的Reflect方法，保证原生行为能够正常执行。添加的工作，就是将每一个操作输出一行日志。
有了 Reflect 对象以后，很多操作会更易读。

// 老写法
Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1
// 新写法
Reflect.apply(Math.floor, undefined, [1.75]) // 1

Reflect对象的方法

Reflect 对象的方法清单

Reflect.apply(target,thisArg,args)
Reflect.construct(target,args)
Reflect.get(target,name,receiver)
Reflect.set(target,name,value,receiver)
Reflect.defineProperty(target,name,desc)
Reflect.deleteProperty(target,name)
Reflect.has(target,name)
Reflect.ownKeys(target)
Reflect.enumerate(target)
Reflect.isExtensible(target)
Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name)
Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)

上面这些方法的作用，大部分与 Object 对象的同名方法的作用都是相同的，而且它与 Proxy 对象的方法是一一对应的。

（1）Reflect.get(target, name, receiver)

查找并返回 target 对象的 name 属性，如果没有该属性，则返回 undefined 。
如果 name 属性部署了读取函数，则读取函数的this绑定 receiver 。

var obj = {
   get foo() { return this.bar(); },
   bar: function() { ... }
};
// 下面语句会让 this.bar()
// 变成调用 wrapper.bar()
Reflect.get(obj, "foo", wrapper);

（2）Reflect.set(target, name, value, receiver)

设置 target 对象的 name 属性等于 value 。如果 name 属性设置了赋值函数，则赋值函数的 this 绑定 receiver 。

（3）Reflect.has(obj, name)

等同于 name in obj 。

（4）Reflect.deleteProperty(obj, name)

等同于 delete obj[name] 。

（5）Reflect.construct(target, args)

等同于 new target(...args) ，这提供了一种不使用 new ，来调用构造函数的方法。

（6）Reflect.getPrototypeOf(obj)

读取对象的 proto 属性，对应 Object.getPrototypeOf(obj) 。

（7）Reflect.setPrototypeOf(obj, newProto)

设置对象的 proto 属性，对应 Object.setPrototypeOf(obj, newProto) 。

（8）Reflect.apply(fun,thisArg,args)

等同于 Function.prototype.apply.call(fn,thisArg,args) 。一般来说，如果要绑定一个函数的this对象，可以这样写 fn.apply(obj, args) ，但是如果函数定义了自己的 apply 方法，就只能写成 Function.prototype.apply.call(fn,obj, args) ，采用Reflect对象可以简化这种操作。另外，需要注意的是， Reflect.set() 、 Reflect.defineProperty() 、 Reflect.freeze() 、Reflect.seal() 和 Reflect.preventExtensions() 返回一个布尔值，表示操作是否成功。它们对应的Object方法，失败时都会抛出错误。

// 失败时抛出错误
Object.defineProperty(obj, name, desc);
// 失败时返回false
Reflect.defineProperty(obj, name, desc);

上面代码中， Reflect.defineProperty 方法的作用与 Object.defineProperty 是一样的，都是为对象定义一个属性。但是， Reflect.defineProperty 方法失败时，不会抛出错误，只会返回 false 。