get()

用於攔截某個屬性的讀取操作，可以接受三個參數，依次為目標對象、屬性名和 proxy 實例本身（嚴格地說，是操作行為所針對的對象），其中最後一個參數可選。

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 // 拋出一個錯誤

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"

get方法第三個參數：指向原始的讀操所在的那個對象，即Prosy實例

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

如果一個屬性不可配置（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()

用來攔截某個屬性的賦值操作，可以接受四個參數，依次為目標對象、屬性名、屬性值和 Proxy 實例本身，其中最後一個參數可選。

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方法，還可以數據綁定，即每當對象發生變化時，會自動更新 DOM。

set方法第四個參數的例子：

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

註意，如果目標對象自身的某個屬性，不可寫且不可配置，那麽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"

apply()

攔截函數的調用、call和apply操作。可以接受三個參數，分別是目標對象、目標對象的上下文對象（this）和目標對象的參數數組。

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"

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方法，也會被攔截。
Reflect.apply(proxy, null, [9, 10]) // 38

has()

用來攔截HasProperty操作，即判斷對象是否具有某個屬性時，這個方法會生效。典型的操作就是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

如果原對象不可配置或者禁止擴展，這時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方法攔截的是HasProperty操作，而不是HasOwnProperty操作，即has方法不判斷一個屬性是對象自身的屬性，還是繼承的屬性。

has攔截對for...in循環不生效。

construct()

用於攔截new命令。

construct方法可以接受兩個參數。

• target：目標對象
• args：構造函數的參數對象
• newTarget：創造實例對象時，new命令作用的構造函數（下面例子的p）

var handler = {
  construct (target, args, newTarget) {
    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方法返回的必須是一個對象，否則會報錯。

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

註意，目標對象自身的不可配置（configurable）的屬性，不能被deleteProperty方法刪除，否則報錯。

defineProperty()

攔截了Object.defineProperty操作。

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

註意，如果目標對象不可擴展（extensible），則defineProperty不能增加目標對象上不存在的屬性，否則會報錯。另外，如果目標對象的某個屬性不可寫（writable）或不可配置（configurable），則defineProperty方法不得改變這兩個設置。

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 }

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方法的返回值必須是對象或者null，否則報錯。另外，如果目標對象不可擴展（extensible）， getPrototypeOf方法必須返回目標對象的原型對象。

isExtensible()

攔截Object.isExtensible操作。

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

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

註意，該方法只能返回布爾值，否則返回值會被自動轉為布爾值。

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

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

ownKeys()

用來攔截對象自身屬性的讀取操作。具體來說，攔截以下操作。

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

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

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

let proxy = new Proxy(target, handler);

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

註意，使用Object.keys方法時，有三類屬性會被ownKeys方法自動過濾，不會返回。

• 目標對象上不存在的屬性
• 屬性名為 Symbol 值
• 不可遍歷（enumerable）的屬性

ownKeys方法返回的數組成員，只能是字符串或 Symbol 值。如果有其他類型的值，或者返回的根本不是數組，就會報錯。

如果目標對象自身包含不可配置的屬性，則該屬性必須被ownKeys方法返回，否則報錯。

如果目標對象是不可擴展的（non-extensition），這時ownKeys方法返回的數組之中，必須包含原對象的所有屬性，且不能包含多余的屬性，否則報錯。

preventExtensions()

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

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

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

Object.preventExtensions(p) // 報錯

為了防止出現這個問題，通常要在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()

主要用來攔截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

註意，該方法只能返回布爾值，否則會被自動轉為布爾值。另外，如果目標對象不可擴展（extensible），setPrototypeOf方法不得改變目標對象的原型。

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的一個使用場景是，目標對象不允許直接訪問，必須通過代理訪問，一旦訪問結束，就收回代理權，不允許再次訪問。

ES6知識點整理之----Proxy----API