ECMAScript 6 Proxy和Reflect

1. Proxy概述
2. Proxy實(shí)例的方法
3. Proxy.revocable()
4. Reflect概述
5. Reflect對(duì)象的方法

Proxy概述

Proxy用于修改某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改，所以屬于一種“元編程”（meta programming），即對(duì)編程語(yǔ)言進(jìn)行編程。

Proxy可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問(wèn)，都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫(xiě)。Proxy這個(gè)詞的原意是代理，用在這里表示由它來(lái)“代理”某些操作，可以譯為“代理器”。

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

上面代碼對(duì)一個(gè)空對(duì)象架設(shè)了一層攔截，重定義了屬性的讀?。?code>get）和設(shè)置（set）行為。這里暫時(shí)先不解釋具體的語(yǔ)法，只看運(yùn)行結(jié)果。對(duì)設(shè)置了攔截行為的對(duì)象obj，去讀寫(xiě)它的屬性，就會(huì)得到下面的結(jié)果。

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

上面代碼說(shuō)明，Proxy實(shí)際上重載（overload）了點(diǎn)運(yùn)算符，即用自己的定義覆蓋了語(yǔ)言的原始定義。

ES6原生提供Proxy構(gòu)造函數(shù)，用來(lái)生成Proxy實(shí)例。

var proxy = new Proxy(target, handler);

Proxy對(duì)象的所有用法，都是上面這種形式，不同的只是handler參數(shù)的寫(xiě)法。其中，new Proxy()表示生成一個(gè)Proxy實(shí)例，target參數(shù)表示所要攔截的目標(biāo)對(duì)象，handler參數(shù)也是一個(gè)對(duì)象，用來(lái)定制攔截行為。

下面是另一個(gè)攔截讀取屬性行為的例子。

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

上面代碼中，作為構(gòu)造函數(shù)，Proxy接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是所要代理的目標(biāo)對(duì)象（上例是一個(gè)空對(duì)象），即如果沒(méi)有Proxy的介入，操作原來(lái)要訪問(wèn)的就是這個(gè)對(duì)象；第二個(gè)參數(shù)是一個(gè)配置對(duì)象，對(duì)于每一個(gè)被代理的操作，需要提供一個(gè)對(duì)應(yīng)的處理函數(shù)，該函數(shù)將攔截對(duì)應(yīng)的操作。比如，上面代碼中，配置對(duì)象有一個(gè)get方法，用來(lái)攔截對(duì)目標(biāo)對(duì)象屬性的訪問(wèn)請(qǐng)求。get方法的兩個(gè)參數(shù)分別是目標(biāo)對(duì)象和所要訪問(wèn)的屬性。可以看到，由于攔截函數(shù)總是返回35，所以訪問(wèn)任何屬性都得到35。

注意，要使得Proxy起作用，必須針對(duì)Proxy實(shí)例（上例是proxy對(duì)象）進(jìn)行操作，而不是針對(duì)目標(biāo)對(duì)象（上例是空對(duì)象）進(jìn)行操作。

如果handler沒(méi)有設(shè)置任何攔截，那就等同于直接通向原對(duì)象。

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

上面代碼中，handler是一個(gè)空對(duì)象，沒(méi)有任何攔截效果，訪問(wèn)handeler就等同于訪問(wèn)target。

一個(gè)技巧是將Proxy對(duì)象，設(shè)置到object.proxy屬性，從而可以在object對(duì)象上調(diào)用。

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

Proxy實(shí)例也可以作為其他對(duì)象的原型對(duì)象。

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35

上面代碼中，proxy對(duì)象是obj對(duì)象的原型，obj對(duì)象本身并沒(méi)有time屬性，所以根據(jù)原型鏈，會(huì)在proxy對(duì)象上讀取該屬性，導(dǎo)致被攔截。

同一個(gè)攔截器函數(shù)，可以設(shè)置攔截多個(gè)操作。

var handler = {
  get: function(target, name) {
    if (name === 'prototype') {
      return Object.prototype;
    }
    return 'Hello, ' + name;
  },

  apply: function(target, thisBinding, args) {
    return args[0];
  },

  construct: function(target, args) {
    return {value: args[1]};
  }
};

var fproxy = new Proxy(function(x, y) {
  return x + y;
}, handler);

fproxy(1, 2) // 1
new fproxy(1,2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo // "Hello, foo"

下面是Proxy支持的攔截操作一覽。

對(duì)于可以設(shè)置、但沒(méi)有設(shè)置攔截的操作，則直接落在目標(biāo)對(duì)象上，按照原先的方式產(chǎn)生結(jié)果。

（1）get(target, propKey, receiver)

攔截對(duì)象屬性的讀取，比如proxy.foo和proxy['foo']。

最后一個(gè)參數(shù)receiver是一個(gè)對(duì)象，可選，參見(jiàn)下面Reflect.get的部分。

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

攔截對(duì)象屬性的設(shè)置，比如proxy.foo = v或proxy['foo'] = v，返回一個(gè)布爾值。

（3）has(target, propKey)

攔截propKey in proxy的操作，以及對(duì)象的hasOwnProperty方法，返回一個(gè)布爾值。

（4）deleteProperty(target, propKey)

攔截delete proxy[propKey]的操作，返回一個(gè)布爾值。

（5）ownKeys(target)

攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一個(gè)數(shù)組。該方法返回對(duì)象所有自身的屬性，而Object.keys()僅返回對(duì)象可遍歷的屬性。

（6）getOwnPropertyDescriptor(target, propKey)

攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對(duì)象。

（7）defineProperty(target, propKey, propDesc)

攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個(gè)布爾值。

（8）preventExtensions(target)

攔截Object.preventExtensions(proxy)，返回一個(gè)布爾值。

（9）getPrototypeOf(target)

攔截Object.getPrototypeOf(proxy)，返回一個(gè)對(duì)象。

（10）isExtensible(target)

攔截Object.isExtensible(proxy)，返回一個(gè)布爾值。

（11）setPrototypeOf(target, proto)

攔截Object.setPrototypeOf(proxy, proto)，返回一個(gè)布爾值。

如果目標(biāo)對(duì)象是函數(shù)，那么還有兩種額外操作可以攔截。

（12）apply(target, object, args)

攔截Proxy實(shí)例作為函數(shù)調(diào)用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

（13）construct(target, args)

攔截Proxy實(shí)例作為構(gòu)造函數(shù)調(diào)用的操作，比如new proxy(...args)。

Proxy實(shí)例的方法

下面是上面這些攔截方法的詳細(xì)介紹。

get()

get方法用于攔截某個(gè)屬性的讀取操作。上文已經(jīng)有一個(gè)例子，下面是另一個(gè)攔截讀取操作的例子。

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 // 拋出一個(gè)錯(cuò)誤

上面代碼表示，如果訪問(wèn)目標(biāo)對(duì)象不存在的屬性，會(huì)拋出一個(gè)錯(cuò)誤。如果沒(méi)有這個(gè)攔截函數(shù)，訪問(wèn)不存在的屬性，只會(huì)返回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對(duì)象上面，所以如果讀取obj對(duì)象繼承的屬性時(shí)，攔截會(huì)生效。

下面的例子使用get攔截，實(shí)現(xiàn)數(shù)組讀取負(fù)數(shù)的索引。

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

上面代碼中，數(shù)組的位置參數(shù)是-1，就會(huì)輸出數(shù)組的倒數(shù)最后一個(gè)成員。

利用Proxy，可以將讀取屬性的操作（get），轉(zhuǎn)變?yōu)閳?zhí)行某個(gè)函數(shù)，從而實(shí)現(xiàn)屬性的鏈?zhǔn)讲僮鳌?/p>

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

上面代碼設(shè)置Proxy以后，達(dá)到了將函數(shù)名鏈?zhǔn)绞褂玫男Ч?/p>

下面的例子則是利用get攔截，實(shí)現(xiàn)一個(gè)生成各種DOM節(jié)點(diǎn)的通用函數(shù)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方法用來(lái)攔截某個(gè)屬性的賦值操作。

假定Person對(duì)象有一個(gè)age屬性，該屬性應(yīng)該是一個(gè)不大于200的整數(shù)，那么可以使用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');
      }
    }

    // 對(duì)于age以外的屬性，直接保存
    obj[prop] = value;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

person.age // 100
person.age = 'young' // 報(bào)錯(cuò)
person.age = 300 // 報(bào)錯(cuò)

上面代碼中，由于設(shè)置了存值函數(shù)set，任何不符合要求的age屬性賦值，都會(huì)拋出一個(gè)錯(cuò)誤。利用set方法，還可以數(shù)據(jù)綁定，即每當(dāng)對(duì)象發(fā)生變化時(shí)，會(huì)自動(dòng)更新DOM。

有時(shí)，我們會(huì)在對(duì)象上面設(shè)置內(nèi)部屬性，屬性名的第一個(gè)字符使用下劃線開(kāi)頭，表示這些屬性不應(yīng)該被外部使用。結(jié)合get和set方法，就可以做到防止這些內(nèi)部屬性被外部讀寫(xiě)。

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

上面代碼中，只要讀寫(xiě)的屬性名的第一個(gè)字符是下劃線，一律拋錯(cuò)，從而達(dá)到禁止讀寫(xiě)內(nèi)部屬性的目的。

apply()

apply方法攔截函數(shù)的調(diào)用、call和apply操作。

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

apply方法可以接受三個(gè)參數(shù)，分別是目標(biāo)對(duì)象、目標(biāo)對(duì)象的上下文對(duì)象（this）和目標(biāo)對(duì)象的參數(shù)數(shù)組。

下面是一個(gè)例子。

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的實(shí)例，當(dāng)它作為函數(shù)調(diào)用時(shí)（p()），就會(huì)被apply方法攔截，返回一個(gè)字符串。

下面是另外一個(gè)例子。

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

上面代碼中，每當(dāng)執(zhí)行proxy函數(shù)（直接調(diào)用或call和apply調(diào)用），就會(huì)被apply方法攔截。

另外，直接調(diào)用Reflect.apply方法，也會(huì)被攔截。

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

has()

has方法用來(lái)攔截HasProperty操作，即判斷對(duì)象是否具有某個(gè)屬性時(shí)，這個(gè)方法會(huì)生效。典型的操作就是in運(yùn)算符。

下面的例子使用has方法隱藏某些屬性，不被in運(yùn)算符發(fā)現(xiàn)。

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

上面代碼中，如果原對(duì)象的屬性名的第一個(gè)字符是下劃線，proxy.has就會(huì)返回false，從而不會(huì)被in運(yùn)算符發(fā)現(xiàn)。

如果原對(duì)象不可配置或者禁止擴(kuò)展，這時(shí)has攔截會(huì)報(bào)錯(cuò)。

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對(duì)象禁止擴(kuò)展，結(jié)果使用has攔截就會(huì)報(bào)錯(cuò)。

值得注意的是，?has?方法攔截的是 ?HasProperty ?操作，而不是 ?HasOwnProperty ?操作，即 ?has?方法不判斷一個(gè)屬性是對(duì)象自身的屬性，還是繼承的屬性。

另外，雖然 ?for…in? 循環(huán)也用到了 ?in ?運(yùn)算符，但是 ?has?攔截對(duì) ?for…in? 循環(huán)不生效。

let stu1 = {name: 'Owen', score: 59};
let stu2 = {name: 'Mark', score: 99};

let handler = {
  has(target, prop) {
    if (prop === 'score' && target[prop] < 60) {
      console.log(`${target.name} 不及格`);
      return false;
    }
    return prop in target;
  }
}

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// Owen
// Owen 不及格

for (let b in oproxy2) {
  console.log(oproxy2[b]);
}
// Mark
// Mark 99

上面代碼中，?has?攔截只對(duì)?in?運(yùn)算符生效，對(duì)?for...in?循環(huán)不生效，導(dǎo)致不符合要求的屬性沒(méi)有被?for...in?循環(huán)所排除。

construct()

construct方法用于攔截new命令，下面是攔截對(duì)象的寫(xiě)法。

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

construct方法可以接受兩個(gè)參數(shù)。

• target: 目標(biāo)對(duì)象
• args：構(gòu)建函數(shù)的參數(shù)對(duì)象

下面是一個(gè)例子。

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方法返回的必須是一個(gè)對(duì)象，否則會(huì)報(bào)錯(cuò)。

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

new p() // 報(bào)錯(cuò)

deleteProperty()

deleteProperty方法用于攔截delete操作，如果這個(gè)方法拋出錯(cuò)誤或者返回false，當(dāng)前屬性就無(wú)法被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

上面代碼中，deleteProperty方法攔截了delete操作符，刪除第一個(gè)字符為下劃線的屬性會(huì)報(bào)錯(cuò)。

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，導(dǎo)致添加新屬性會(huì)拋出錯(cuò)誤。

getOwnPropertyDescriptor()

getOwnPropertyDescriptor方法攔截Object.getOwnPropertyDescriptor，返回一個(gè)屬性描述對(duì)象或者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方法對(duì)于第一個(gè)字符為下劃線的屬性名會(huì)返回undefined。

getPrototypeOf()

getPrototypeOf方法主要用來(lái)攔截Object.getPrototypeOf()運(yùn)算符，以及其他一些操作。

• Object.prototype.__proto__
• Object.prototype.isPrototypeOf()
• Object.getPrototypeOf()
• Reflect.getPrototypeOf()
• instanceof運(yùn)算符

下面是一個(gè)例子。

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

上面代碼中，getPrototypeOf方法攔截Object.getPrototypeOf()，返回proto對(duì)象。

isExtensible()

isExtensible方法攔截Object.isExtensible操作。

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

Object.isExtensible(p)
// "called"
// true

上面代碼設(shè)置了isExtensible方法，在調(diào)用Object.isExtensible時(shí)會(huì)輸出called。

這個(gè)方法有一個(gè)強(qiáng)限制，如果不能滿(mǎn)足下面的條件，就會(huì)拋出錯(cuò)誤。

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

下面是一個(gè)例子。

var p = new Proxy({}, {
  isExtensible: function(target) {
    return false;
  }
});

Object.isExtensible(p) // 報(bào)錯(cuò)

ownKeys()

ownKeys方法用來(lái)攔截Object.keys()操作。

let target = {};

let handler = {
  ownKeys(target) {
    return ['hello', 'world'];
  }
};

let proxy = new Proxy(target, handler);

Object.keys(proxy)
// [ 'hello', 'world' ]

上面代碼攔截了對(duì)于target對(duì)象的Object.keys()操作，返回預(yù)先設(shè)定的數(shù)組。

下面的例子是攔截第一個(gè)字符為下劃線的屬性名。

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"

preventExtensions()

preventExtensions方法攔截Object.preventExtensions()。該方法必須返回一個(gè)布爾值。

這個(gè)方法有一個(gè)限制，只有當(dāng)Object.isExtensible(proxy)為false（即不可擴(kuò)展）時(shí)，proxy.preventExtensions才能返回true，否則會(huì)報(bào)錯(cuò)。

var p = new Proxy({}, {
  preventExtensions: function(target) {
    return true;
  }
});

Object.preventExtensions(p) // 報(bào)錯(cuò)

上面代碼中，proxy.preventExtensions方法返回true，但這時(shí)Object.isExtensible(proxy)會(huì)返回true，因此報(bào)錯(cuò)。

為了防止出現(xiàn)這個(gè)問(wèn)題，通常要在proxy.preventExtensions方法里面，調(diào)用一次Object.preventExtensions。

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

Object.preventExtensions(p)
// "called"
// true

setPrototypeOf()

setPrototypeOf方法主要用來(lái)攔截Object.setPrototypeOf方法。

下面是一個(gè)例子。

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的原型對(duì)象，就會(huì)報(bào)錯(cuò)。

Proxy.revocable()

Proxy.revocable方法返回一個(gè)可取消的Proxy實(shí)例。

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

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

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Revoked

Proxy.revocable方法返回一個(gè)對(duì)象，該對(duì)象的proxy屬性是Proxy實(shí)例，revoke屬性是一個(gè)函數(shù)，可以取消Proxy實(shí)例。上面代碼中，當(dāng)執(zhí)行revoke函數(shù)之后，再訪問(wèn)Proxy實(shí)例，就會(huì)拋出一個(gè)錯(cuò)誤。

Reflect概述

Reflect對(duì)象與Proxy對(duì)象一樣，也是ES6為了操作對(duì)象而提供的新API。Reflect對(duì)象的設(shè)計(jì)目的有這樣幾個(gè)。

（1） 將Object對(duì)象的一些明顯屬于語(yǔ)言?xún)?nèi)部的方法（比如Object.defineProperty），放到Reflect對(duì)象上?，F(xiàn)階段，某些方法同時(shí)在Object和Reflect對(duì)象上部署，未來(lái)的新方法將只部署在Reflect對(duì)象上。

（2） 修改某些Object方法的返回結(jié)果，讓其變得更合理。比如，Object.defineProperty(obj, name, desc)在無(wú)法定義屬性時(shí)，會(huì)拋出一個(gè)錯(cuò)誤，而Reflect.defineProperty(obj, name, desc)則會(huì)返回false。

// 老寫(xiě)法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新寫(xiě)法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

（3） 讓Object操作都變成函數(shù)行為。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)讓它們變成了函數(shù)行為。

// 老寫(xiě)法
'assign' in Object // true

// 新寫(xiě)法
Reflect.has(Object, 'assign') // true

（4）Reflect對(duì)象的方法與Proxy對(duì)象的方法一一對(duì)應(yīng)，只要是Proxy對(duì)象的方法，就能在Reflect對(duì)象上找到對(duì)應(yīng)的方法。這就讓Proxy對(duì)象可以方便地調(diào)用對(duì)應(yīng)的Reflect方法，完成默認(rèn)行為，作為修改行為的基礎(chǔ)。也就是說(shuō)，不管Proxy怎么修改默認(rèn)行為，你總可以在Reflect上獲取默認(rèn)行為。

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對(duì)象的屬性賦值行為。它采用Reflect.set方法將值賦值給對(duì)象的屬性，然后再部署額外的功能。

下面是另一個(gè)例子。

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

上面代碼中，每一個(gè)Proxy對(duì)象的攔截操作（get、delete、has），內(nèi)部都調(diào)用對(duì)應(yīng)的Reflect方法，保證原生行為能夠正常執(zhí)行。添加的工作，就是將每一個(gè)操作輸出一行日志。

有了Reflect對(duì)象以后，很多操作會(huì)更易讀。

// 老寫(xiě)法
Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1

// 新寫(xiě)法
Reflect.apply(Math.floor, undefined, [1.75]) // 1

Reflect對(duì)象的方法

Reflect對(duì)象的方法清單如下，共13個(gè)。

• 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.isExtensible(target)
• Reflect.preventExtensions(target)
• Reflect.getOwnPropertyDescriptor(target, name)
• Reflect.getPrototypeOf(target)
• Reflect.setPrototypeOf(target, prototype)

上面這些方法的作用，大部分與Object對(duì)象的同名方法的作用都是相同的，而且它與Proxy對(duì)象的方法是一一對(duì)應(yīng)的。下面是對(duì)其中幾個(gè)方法的解釋。

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

查找并返回target對(duì)象的name屬性，如果沒(méi)有該屬性，則返回undefined。

如果name屬性部署了讀取函數(shù)，則讀取函數(shù)的this綁定receiver。

var obj = {
  get foo() { return this.bar(); },
  bar: function() { ... }
};

// 下面語(yǔ)句會(huì)讓 this.bar()
// 變成調(diào)用 wrapper.bar()
Reflect.get(obj, "foo", wrapper);

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

設(shè)置target對(duì)象的name屬性等于value。如果name屬性設(shè)置了賦值函數(shù)，則賦值函數(shù)的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，來(lái)調(diào)用構(gòu)造函數(shù)的方法。

（6）Reflect.getPrototypeOf(obj)

讀取對(duì)象的__proto__屬性，對(duì)應(yīng)Object.getPrototypeOf(obj)。

（7）Reflect.setPrototypeOf(obj, newProto)

設(shè)置對(duì)象的__proto__屬性，對(duì)應(yīng)Object.setPrototypeOf(obj, newProto)。

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

等同于Function.prototype.apply.call(fun,thisArg,args)。一般來(lái)說(shuō)，如果要綁定一個(gè)函數(shù)的this對(duì)象，可以這樣寫(xiě)fn.apply(obj, args)，但是如果函數(shù)定義了自己的apply方法，就只能寫(xiě)成Function.prototype.apply.call(fn, obj, args)，采用Reflect對(duì)象可以簡(jiǎn)化這種操作。

另外，需要注意的是，Reflect.set()、Reflect.defineProperty()、Reflect.freeze()、Reflect.seal()和Reflect.preventExtensions()返回一個(gè)布爾值，表示操作是否成功。它們對(duì)應(yīng)的Object方法，失敗時(shí)都會(huì)拋出錯(cuò)誤。

// 失敗時(shí)拋出錯(cuò)誤
Object.defineProperty(obj, name, desc);
// 失敗時(shí)返回false
Reflect.defineProperty(obj, name, desc);

上面代碼中，Reflect.defineProperty方法的作用與Object.defineProperty是一樣的，都是為對(duì)象定義一個(gè)屬性。但是，Reflect.defineProperty方法失敗時(shí)，不會(huì)拋出錯(cuò)誤，只會(huì)返回false。