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

上面程式碼說明，Proxy 實際上過載（overload）了點運算子，即用自己的定義覆蓋了語言的原始定義。

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。

注意，要使得Proxy起作用，必須針對Proxy實例（上例是proxy物件）進行操作，而不是針對目標物件（上例是空物件）進行操作。

如果handler沒有設定任何攔截，那就等同於直接通向原物件。

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

上面程式碼中，handler是一個空物件，沒有任何攔截效果，訪問proxy就等同於訪問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物件上讀取該屬性，導致被攔截。

同一個攔截器函式，可以設定攔截多個操作。

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 支援的攔截操作一覽。

對於可以設定、但沒有設定攔截的操作，則直接落在目標物件上，按照原先的方式產生結果。

（1）get(target, propKey, receiver)

攔截物件屬性的讀取，比如proxy.foo和proxy['foo']。

最後一個引數receiver是一個物件，可選，參見下面Reflect.get的部分。

（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）ownKeys(target)

攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一個數組。該方法返回目標物件所有自身的屬性的屬性名，而Object.keys()的返回結果僅包括目標物件自身的可遍歷屬性。

（6）getOwnPropertyDescriptor(target, propKey)

攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述物件。

（7）defineProperty(target, propKey, propDesc)

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

（8）preventExtensions(target)

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

（9）getPrototypeOf(target)

攔截Object.getPrototypeOf(proxy)，返回一個物件。

（10）isExtensible(target)

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

（11）setPrototypeOf(target, proto)

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

如果目標物件是函式，那麼還有兩種額外操作可以攔截。

（12）apply(target, object, args)

攔截 Proxy 實例作為函式呼叫的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

（13）construct(target, args)

攔截 Proxy 實例作為建構函式呼叫的操作，比如new proxy(...args)。

Proxy 實例的方法

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

get()

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

上面程式碼中，陣列的位置引數是-1，就會輸出陣列的倒數最後一個成員。

利用 Proxy，可以將讀取屬性的操作（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

上面程式碼設定 Proxy 以後，達到了將函式名鏈式使用的效果。

下面的例子則是利用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);

如果一個屬性不可配置（configurable）和不可寫（writable），則該屬性不能被代理，通過 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方法用來攔截某個屬性的賦值操作。

假定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');
    target[key] = value;
    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

上面程式碼中，只要讀寫的屬性名的第一個字元是下劃線，一律拋錯，從而達到禁止讀寫內部屬性的目的。

注意，如果目標物件自身的某個屬性，不可寫也不可配置，那麼set不得改變這個屬性的值，只能返回同樣的值，否則報錯。

apply()

apply方法攔截函式的呼叫、call和apply操作。

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"

上面程式碼中，變數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

上面程式碼中，每當執行proxy函式（直接呼叫或call和apply呼叫），就會被apply方法攔截。

另外，直接呼叫Reflect.apply方法，也會被攔截。

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

has()

has方法用來攔截HasProperty操作，即判斷物件是否具有某個屬性時，這個方法會生效。典型的操作就是in運算子。

下面的例子使用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攔截就會報錯。也就是說，如果某個屬性不可配置（或者目標物件不可擴展），則has方法就不得“隱藏”（即返回false）目標物件的該屬性。

值得注意的是，has方法攔截的是HasProperty操作，而不是HasOwnProperty操作，即has方法不判斷一個屬性是物件自身的屬性，還是繼承的屬性。

另外，雖然for...in迴圈也用到了in運算子，但是has攔截對for...in迴圈不生效。

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迴圈不生效，導致不符合要求的屬性沒有被排除在for...in迴圈之外。

construct()

construct方法用於攔截new命令，下面是攔截物件的寫法。

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

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

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

上面程式碼中，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'
// TypeError: proxy defineProperty handler returned false for property '"foo"'

上面程式碼中，defineProperty方法返回false，導致新增新屬性會丟擲錯誤。

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

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

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。

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

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

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

下面是一個例子。

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

Object.isExtensible(p) // 報錯

ownKeys()

ownKeys方法用來攔截物件自身屬性的讀取操作。具體來說，攔截以下操作。

Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()

下面是攔截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），結果都被自動過濾掉。

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

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

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

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'

上面程式碼中，obj物件的a屬性是不可配置的，這時ownKeys方法返回的陣列之中，必須包含a，否則會報錯。

另外，如果目標物件是不可擴展的（non-extensition），這時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()

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

上面程式碼中，只要修改target的原型物件，就會報錯。

注意，該方法只能返回布林值，否則會被自動轉為布林值。另外，如果目標物件不可擴展（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屬性是一個函式，可以取消Proxy實例。上面程式碼中，當執行revoke函式之後，再訪問Proxy實例，就會丟擲一個錯誤。

Proxy.revocable的一個使用場景是，目標物件不允許直接訪問，必須通過代理訪問，一旦訪問結束，就收回代理權，不允許再次訪問。

this 問題

雖然 Proxy 可以代理針對目標物件的訪問，但它不是目標物件的透明代理，即不做任何攔截的情況下，也無法保證與目標物件的行為一致。主要原因就是在 Proxy 代理的情況下，目標物件內部的this關鍵字會指向 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.m，後者內部的this就是指向proxy，而不是target。

下面是一個例子，由於this指向的變化，導致 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鍵區分。由於通過proxy.name訪問時，this指向proxy，導致無法取到值，所以返回undefined。

此外，有些原生物件的內部屬性，只有通過正確的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

實例：Web 服務的客戶端

Proxy 物件可以攔截目標物件的任意屬性，這使得它很合適用來寫 Web 服務的客戶端。

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

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

上面程式碼新建了一個 Web 服務的介面，這個介面返回各種資料。Proxy 可以攔截這個物件的任意屬性，所以不用為每一種資料寫一個適配方法，只要寫一個 Proxy 攔截就可以了。

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

同理，Proxy 也可以用來實現資料庫的 ORM 層。

Proxy

Proxy

概述

Proxy 實例的方法

get()

set()

apply()

has()

construct()

deleteProperty()

defineProperty()

getOwnPropertyDescriptor()

getPrototypeOf()

isExtensible()

ownKeys()

preventExtensions()

setPrototypeOf()

Proxy.revocable()

this 問題

實例：Web 服務的客戶端

results matching ""

No results matching ""