1.概述

Proxy用于修改某些操作的默認行為但两，也可以理解為在目標對象之前架設(shè)一層攔截，外部所有的訪問都必須先通過這層攔截，因此提供了一種機制谜酒，可以對外部的訪問進行過濾和修改。這個詞的原理為代理妻枕，在這里可以表示由它來“代理”某些操作僻族，譯為“代理器”粘驰。

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

上面代碼對一個空對象架設(shè)了一層攔截，重新定義了屬性的讀取(get)和設(shè)置(set)行為述么。對設(shè)置了攔截行為的對象obj晴氨，去讀寫它的屬性，用自己的定義覆蓋了語言的原始定義碉输，運行得到下面的結(jié)果籽前。

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

上面代碼說明，Proxy 實際上重載（overload）了點運算符敷钾，即用自己的定義覆蓋了語言的原始定義枝哄。

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

var proxy = new Proxy(target, handler);

Proxy 對象的所有用法挠锥，都是上面這種形式，不同的只是handler參數(shù)的寫法侨赡。其中蓖租，new Proxy()表示生成一個Proxy實例，target參數(shù)表示所要攔截的目標對象羊壹，handler參數(shù)也是一個對象蓖宦，用來定制攔截行為。
下面是另一個攔截讀取屬性行為的例子油猫。

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

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

上面代碼中稠茂，作為構(gòu)造函數(shù)，Proxy接受兩個參數(shù)情妖。第一個參數(shù)是所要代理的目標對象（上例是一個空對象）睬关，即如果沒有Proxy的介入，操作原來要訪問的就是這個對象毡证；第二個參數(shù)是一個配置對象电爹，對于每一個被代理的操作，需要提供一個對應(yīng)的處理函數(shù)料睛，該函數(shù)將攔截對應(yīng)的操作丐箩。比如，上面代碼中秦效，配置對象有一個get方法雏蛮，用來攔截對目標對象屬性的訪問請求。get方法的兩個參數(shù)分別是目標對象和所要訪問的屬性阱州√舯可以看到，由于攔截函數(shù)總是返回35苔货，所以訪問任何屬性都得到35犀概。

注意立哑，要使得Proxy起作用，必須針對Proxy實例（上例是proxy對象）進行操作姻灶，而不是針對目標對象（上例是空對象）進行操作铛绰。

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

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

上面代碼中捂掰，handler是一個空對象，沒有任何攔截效果曾沈，訪問proxy就等同于訪問target这嚣。

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

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

Proxy 實例也可以作為其他對象的原型對象。

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

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

上面代碼中障涯，proxy對象是obj對象的原型罐旗，obj對象本身并沒有time屬性，所以根據(jù)原型鏈唯蝶，會在proxy對象上讀取該屬性九秀，導(dǎo)致被攔截。

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

  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" // true

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

下面是 Proxy 支持的攔截操作一覽柔纵，一共 13 種。

• get(target, propKey, receiver)：攔截對象屬性的讀取锤躁，比如proxy.foo和proxy['foo']搁料。
• set(target, propKey, value, receiver)：攔截對象屬性的設(shè)置，比如proxy.foo = v或proxy['foo'] = v系羞，返回一個布爾值郭计。
  +has(target, propKey)：攔截propKey in proxy的操作，返回一個布爾值椒振。
• deleteProperty(target, propKey)：攔截delete proxy[propKey]的操作昭伸，返回一個布爾值。
  +ownKeys(target)：攔截Object.getOwnPropertyNames(proxy)澎迎、 >+ Object.getOwnPropertySymbols(proxy)庐杨、Object.keys(proxy)选调、for...in循環(huán)，返回一個數(shù)組灵份。該方法返回目標對象所有自身的屬性的屬性名仁堪，而Object.keys()的返回結(jié)果僅包括目標對象自身的可遍歷屬性。
• getOwnPropertyDescriptor(target, propKey)：攔截Object.getOwnPropertyDescriptor(proxy, propKey)填渠，返回屬性的描述對象弦聂。
• defineProperty(target, propKey, propDesc)：攔截Object.defineProperty(proxy, propKey, propDesc）、
• Object.defineProperties(proxy, propDescs)氛什，返回一個布爾值莺葫。
• preventExtensions(target)：攔截Object.preventExtensions(proxy)，返回一個布爾值屉更。
• getPrototypeOf(target)：攔截Object.getPrototypeOf(proxy)徙融，返回一個對象。
  +isExtensible(target)：攔截Object.isExtensible(proxy)瑰谜，返回一個布爾值欺冀。
• setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值萨脑。如果目標對象是函數(shù)隐轩，那么還有兩種額外操作可以攔截。
• apply(target, object, args)：攔截 Proxy 實例作為函數(shù)調(diào)用的操作渤早，比如proxy(...args)职车、proxy.call(object, ...args)、proxy.apply(...)鹊杖。
• construct(target, args)：攔截 Proxy 實例作為構(gòu)造函數(shù)調(diào)用的操作悴灵，比如new proxy(...args)。

Proxy 實例的方法

下面是上面這些攔截方法的詳細介紹骂蓖。

get()

get方法用于攔截某個屬性的讀取操作积瞒，可以接受三個參數(shù)，依次為目標對象登下、屬性名和proxy實例本身（嚴格地說茫孔，是操作行為所針對的對象），其中最后一個參數(shù)可選被芳。

get方法的用法缰贝，上文已經(jīng)有一個例子，下面是另一個攔截讀取操作的例子畔濒。

var person = {
  name: "張三"
};

var proxy = new Proxy(person, {
  get: function(target, propKey) {
    if (propKey in target) {
      return target[propKey];
    } else {
      throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
    }
  }
});

proxy.name // "張三"
proxy.age // 拋出一個錯誤

上面代碼表示剩晴，如果訪問目標對象不存在的屬性，會拋出一個錯誤篓冲。如果沒有這個攔截函數(shù)李破，訪問不存在的屬性宠哄，只會返回undefined。

get方法可以繼承嗤攻。

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

let obj = Object.create(proto);
obj.foo // "GET foo"

上面代碼中毛嫉，攔截操作定義在Prototype對象上面，所以如果讀取obj對象繼承的屬性時妇菱，攔截會生效承粤。

下面的例子使用get攔截，實現(xiàn)數(shù)組讀取負數(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，就會輸出數(shù)組的倒數(shù)第一個成員房交。

利用 Proxy彻舰，可以將讀取屬性的操作（get），轉(zhuǎn)變?yōu)閳?zhí)行某個函數(shù)候味，從而實現(xiàn)屬性的鏈式操作刃唤。

var pipe = 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以后，達到了將函數(shù)名鏈式使用的效果白群。

下面的例子則是利用get攔截尚胞，實現(xiàn)一個生成各種 DOM 節(jié)點的通用函數(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);

下面是一個get方法的第三個參數(shù)的例子帜慢，它總是指向原始的讀操作所在的那個對象笼裳，一般情況下就是 Proxy 實例。

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

上面代碼中粱玲，proxy對象的getReceiver屬性是由proxy對象提供的躬柬，所以receiver指向proxy對象。

const proxy = new Proxy({}, {
  get: function(target, key, receiver) {
    return receiver;
  }
});

const d = Object.create(proxy);
d.a === d // true

上面代碼中抽减，d對象本身沒有a屬性楔脯，所以讀取d.a的時候，會去d的原型proxy對象找胯甩。這時，receiver就指向d堪嫂，代表原始的讀操作所在的那個對象偎箫。

如果一個屬性不可配置（configurable）且不可寫（writable），則 Proxy 不能修改該屬性皆串，否則通過 Proxy 對象訪問該屬性會報錯淹办。

const target = Object.defineProperties({}, {
  foo: {
    value: 123,
    writable: false,
    configurable: false
  },
});

const handler = {
  get(target, propKey) {
    return 'abc';
  }
};

const proxy = new Proxy(target, handler);

proxy.foo
// TypeError: Invariant check failed

set()

set方法用來攔截某個屬性的賦值操作，可以接受四個參數(shù)恶复，依次為目標對象怜森、屬性名速挑、屬性值和Proxy實例本身，其中最后一個參數(shù)可選副硅。

假定Person對象有一個age屬性姥宝，該屬性應(yīng)該是一個不大于 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');
      }
    }

    // 對于滿足條件的 age 屬性以及其他屬性腊满，直接保存
    obj[prop] = value;
  }
};

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

person.age = 100;

person.age // 100
person.age = 'young' // 報錯
person.age = 300 // 報錯

上面代碼中，由于設(shè)置了存值函數(shù)set培己，任何不符合要求的age屬性賦值碳蛋，都會拋出一個錯誤，這是數(shù)據(jù)驗證的一種實現(xiàn)方法省咨。利用set方法肃弟，還可以數(shù)據(jù)綁定，即每當對象發(fā)生變化時零蓉，會自動更新 DOM笤受。

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

const handler = {
  get (target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set (target, key, value) {
    invariant(key, 'set');
    target[key] = value;
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
const target = {};
const 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

上面代碼中，只要讀寫的屬性名的第一個字符是下劃線囊陡，一律拋錯芳绩，從而達到禁止讀寫內(nèi)部屬性的目的。

下面是set方法第四個參數(shù)的例子撞反。

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
proxy.foo === proxy // true

上面代碼中妥色，set方法的第四個參數(shù)receiver，指的是原始的操作行為所在的那個對象遏片，一般情況下是proxy實例本身嘹害，請看下面的例子

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
  }
};
const proxy = new Proxy({}, handler);
const myObj = {};
Object.setPrototypeOf(myObj, proxy);

myObj.foo = 'bar';
myObj.foo === myObj // true

上面代碼中，設(shè)置myObj.foo屬性的值時吮便，myObj并沒有foo屬性笔呀，因此引擎會到myObj的原型鏈去找foo屬性。myObj的原型對象proxy是一個Proxy實例髓需，設(shè)置它的foo屬性會觸發(fā)set方法许师。這時，第四個參數(shù)receiver就指向原始賦值行為所在的對象myObj。

注意微渠，如果目標對象自身的某個屬性不可寫搭幻，那么set方法將不起作用。

const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: false
});

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = 'baz';
  }
};

const proxy = new Proxy(obj, handler);
proxy.foo = 'baz';
proxy.foo // "bar"

上面代碼中逞盆，obj.foo屬性不可寫檀蹋，Proxy 對這個屬性的set代理將不會生效。

注意纳击，嚴格模式下续扔，set代理如果沒有返回true，就會報錯焕数。

'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    // 無論有沒有下面這一行纱昧，都會報錯
    return false;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
// TypeError: 'set' on proxy: trap returned falsish for property 'foo'

上面代碼中，嚴格模式下堡赔，set代理返回false或者undefined识脆，都會報錯。

apply()

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

apply方法可以接受三個參數(shù)，分別是目標對象换团、目標對象的上下文對象（this）和目標對象的參數(shù)數(shù)組悉稠。

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

下面是一個例子

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ù)調(diào)用時（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

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

另外，直接調(diào)用Reflect.apply方法裙椭，也會被攔截躏哩。

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

has()

has()方法用來攔截HasProperty操作，即判斷對象是否具有某個屬性時揉燃，這個方法會生效震庭。典型的操作就是in運算符。

has()方法可以接受兩個參數(shù)你雌，分別是目標對象、需查詢的屬性名。

下面的例子使用has()方法隱藏某些屬性婿崭，不被in運算符發(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

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

如果原對象不可配置或者禁止擴展授瘦，這時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對象禁止擴展提完，結(jié)果使用has攔截就會報錯形纺。也就是說，如果某個屬性不可配置（或者目標對象不可擴展）徒欣，則has()方法就不得“隱藏”（即返回false）目標對象的該屬性逐样。

值得注意的是，has()方法攔截的是HasProperty操作打肝，而不是HasOwnProperty操作脂新，即has()方法不判斷一個屬性是對象自身的屬性，還是繼承的屬性粗梭。

另外争便，雖然for...in循環(huán)也用到了in運算符，但是has()攔截對for...in循環(huán)不生效断医。

let stu1 = {name: '張三', score: 59};
let stu2 = {name: '李四', 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);

'score' in oproxy1
// 張三 不及格
// false

'score' in oproxy2
// true

for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// 張三
// 59

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

上面代碼中滞乙，has()攔截只對in運算符生效，對for...in循環(huán)不生效孩锡，導(dǎo)致不符合要求的屬性沒有被for...in循環(huán)所排除酷宵。

construct()

construct()方法用于攔截new命令，下面是攔截對象的寫法躬窜。

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

construct()方法可以接受三個參數(shù)浇垦。

target：目標對象。
args：構(gòu)造函數(shù)的參數(shù)數(shù)組荣挨。
newTarget：創(chuàng)造實例對象時男韧，new命令作用的構(gòu)造函數(shù)（下面例子的p）顿颅。

const 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()方法返回的必須是一個對象舔腾，否則會報錯。

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

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

另外库正，由于construct()攔截的是構(gòu)造函數(shù)口锭，所以它的目標對象必須是函數(shù)朦前，否則就會報錯介杆。

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

new p() // 報錯
// Uncaught TypeError: p is not a constructor

上面例子中，攔截的目標對象不是一個函數(shù)韭寸，而是一個對象（new Proxy()的第一個參數(shù)）春哨，導(dǎo)致報錯。

注意恩伺，construct()方法中的this指向的是handler赴背，而不是實例對象。

const handler = {
  construct: function(target, args) {
    console.log(this === handler);
    return new target(...args);
  }
}

let p = new Proxy(function () {}, handler);
new p() // true

deleteProperty()

deleteProperty方法用于攔截delete操作晶渠，如果這個方法拋出錯誤或者返回false凰荚，當前屬性就無法被delete命令刪除。

var handler = {
  deleteProperty (target, key) {
    invariant(key, 'delete');
    delete target[key];
    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操作符便瑟，刪除第一個字符為下劃線的屬性會報錯。

注意憨颠，目標對象自身的不可配置（configurable）的屬性胳徽，不能被deleteProperty方法刪除，否則報錯爽彤。

defineProperty()

defineProperty()方法攔截了Object.defineProperty()操作养盗。

var handler = {
  defineProperty (target, key, descriptor) {
    return false;
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不會生效

上面代碼中，defineProperty()方法內(nèi)部沒有任何操作适篙，只返回false往核，導(dǎo)致添加新屬性總是無效。注意嚷节，這里的false只是用來提示操作失敗聂儒，本身并不能阻止添加新屬性。

注意硫痰，如果目標對象不可擴展（non-extensible）衩婚，則defineProperty()不能增加目標對象上不存在的屬性，否則會報錯效斑。另外非春，如果目標對象的某個屬性不可寫（writable）或不可配置（configurable），則defineProperty()方法不得改變這兩個設(shè)置缓屠。

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.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對象涧卵。

注意，getPrototypeOf()方法的返回值必須是對象或者null腹尖，否則報錯。另外伐脖，如果目標對象不可擴展（non-extensible）热幔， getPrototypeOf()方法必須返回目標對象的原型對象。

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時會輸出called。

注意蠕啄，該方法只能返回布爾值场勤，否則返回值會被自動轉(zhuǎn)為布爾值。

這個方法有一個強限制歼跟，它的返回值必須與目標對象的isExtensible屬性保持一致和媳，否則就會拋出錯誤。

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

下面是一個例子哈街。

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

Object.isExtensible(p)
// Uncaught TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')

ownKeys()

ownKeys()方法用來攔截對象自身屬性的讀取操作留瞳。具體來說，攔截以下操作骚秦。

• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Object.keys()
• for...in循環(huán)

下面是攔截Object.keys()的例子她倘。

let target = {
  a: 1,
  b: 2,
  c: 3
};

let handler = {
  ownKeys(target) {
    return ['a'];
  }
};

let proxy = new Proxy(target, handler);

Object.keys(proxy)
// [ 'a' ]

上面代碼攔截了對于target對象的Object.keys()操作，只返回a作箍、b硬梁、c三個屬性之中的a屬性。

下面的例子是攔截第一個字符為下劃線的屬性名胞得。

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']

上面代碼中，ownKeys()方法之中个扰，顯式返回不存在的屬性（d）瓷炮、Symbol值（Symbol.for('secret')）、不可遍歷的屬性（key）递宅，結(jié)果都被自動過濾掉娘香。

ownKeys()方法還可以攔截Object.getOwnPropertyNames()苍狰。

var p = new Proxy({}, {
  ownKeys: function(target) {
    return ['a', 'b', 'c'];
  }
});

Object.getOwnPropertyNames(p)
// [ 'a', 'b', 'c' ]

for...in循環(huán)也受到ownKeys()方法的攔截。

const obj = { hello: 'world' };
const proxy = new Proxy(obj, {
  ownKeys: function () {
    return ['a', 'b'];
  }
});

for (let key in proxy) {
  console.log(key); // 沒有任何輸出
}

上面代碼中烘绽，ownkeys()指定只返回a和b屬性淋昭，由于obj沒有這兩個屬性，因此for...in循環(huán)不會有任何輸出安接。

ownKeys()方法返回的數(shù)組成員翔忽，只能是字符串或Symbol 值。如果有其他類型的值盏檐，或者返回的根本不是數(shù)組歇式，就會報錯。

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()方法雖然返回一個數(shù)組材失，但是每一個數(shù)組成員都不是字符串或 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'

上面代碼中旨别，obj對象的a屬性是不可配置的，這時ownKeys()方法返回的數(shù)組之中耘眨，必須包含a昼榛，否則會報錯。

另外剔难，如果目標對象是不可擴展的（non-extensible）胆屿，這時ownKeys()方法返回的數(shù)組之中，必須包含原對象的所有屬性偶宫，且不能包含多余的屬性非迹，否則報錯。

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()方法返回的數(shù)組之中，包含了obj對象的多余屬性b吵冒，所以導(dǎo)致了報錯纯命。

preventExtensions()

preventExtensions()方法攔截Object.preventExtensions()。該方法必須返回一個布爾值痹栖，否則會被自動轉(zhuǎn)為布爾值亿汞。

這個方法有一個限制，只有目標對象不可擴展時（即Object.isExtensible(proxy)為false）揪阿，proxy.preventExtensions才能返回true疗我，否則會報錯咆畏。

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

Object.preventExtensions(proxy)
// Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible

上面代碼中，proxy.preventExtensions()方法返回true吴裤，但這時Object.isExtensible(proxy)會返回true旧找，因此報錯。

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

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

Object.preventExtensions(proxy)
// "called"
// Proxy {}

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

上面代碼中，只要修改target的原型對象潮秘，就會報錯。

注意易结，該方法只能返回布爾值枕荞，否則會被自動轉(zhuǎn)為布爾值。另外搞动，如果目標對象不可擴展（non-extensible）躏精，setPrototypeOf()方法不得改變目標對象的原型。

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屬性是一個函數(shù)箩溃，可以取消Proxy實例瞭吃。上面代碼中，當執(zhí)行revoke函數(shù)之后涣旨，再訪問Proxy實例歪架，就會拋出一個錯誤。

Proxy.revocable()的一個使用場景是霹陡，目標對象不允許直接訪問和蚪，必須通過代理訪問，一旦訪問結(jié)束烹棉，就收回代理權(quán)攒霹，不允許再次訪問。

this 問題

雖然 Proxy 可以代理針對目標對象的訪問浆洗，但它不是目標對象的透明代理催束，即不做任何攔截的情況下，也無法保證與目標對象的行為一致辅髓。主要原因就是在 Proxy 代理的情況下泣崩，目標對象內(nèi)部的this關(guān)鍵字會指向 Proxy 代理少梁。

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true

上面代碼中，一旦proxy代理target矫付，target.m()內(nèi)部的this就是指向proxy凯沪，而不是target。

下面是一個例子买优，由于this指向的變化妨马，導(dǎo)致 Proxy 無法代理目標對象。

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

上面代碼中杀赢，目標對象jane的name屬性烘跺，實際保存在外部WeakMap對象_name上面，通過this鍵區(qū)分脂崔。由于通過proxy.name訪問時滤淳，this指向proxy，導(dǎo)致無法取到值砌左，所以返回undefined脖咐。

此外，有些原生對象的內(nèi)部屬性汇歹，只有通過正確的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 攔截函數(shù)內(nèi)部的this稽物，指向的是handler對象。

const handler = {
  get: function (target, key, receiver) {
    console.log(this === handler);
    return 'Hello, ' + key;
  },
  set: function (target, key, value) {
    console.log(this === handler);
    target[key] = value;
    return true;
  }
};

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

proxy.foo
// true
// Hello, foo

proxy.foo = 1
// true

上面例子中折欠，get()和set()攔截函數(shù)內(nèi)部的this贝或，指向的都是handler對象。

實例：Web 服務(wù)的客戶端

Proxy 對象可以攔截目標對象的任意屬性锐秦，這使得它很合適用來寫Web服務(wù)的客戶端咪奖。

const service = createWebService('http://example.com/data');

service.employees().then(json => {
  const employees = JSON.parse(json);
  // ···
});

上面代碼新建了一個 Web 服務(wù)的接口，這個接口返回各種數(shù)據(jù)酱床。Proxy 可以攔截這個對象的任意屬性羊赵，所以不用為每一種數(shù)據(jù)寫一個適配方法，只要寫一個 Proxy 攔截就可以了。

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

同理昧捷，Proxy 也可以用來實現(xiàn)數(shù)據(jù)庫的 ORM 層闲昭。