ECMAScript 6 Proxy 實例的方法

Proxy 實例的方法

get()

get方法用於攔截某個屬性的讀取操作，可以接受三個參數，依次爲目標對象、屬性名和 proxy 實例本身（即this關鍵字指向的那個對象），其中最後一個參數可選。

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.foo // "GET foo"

上面代碼中，攔截操作定義在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);

下面是一個get方法的第三個參數的例子。

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

上面代碼中，get方法的第三個參數receiver，總是爲當前的 Proxy 實例。

如果一個屬性不可配置（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方法用來攔截某個屬性的賦值操作，可以接受四個參數，依次爲目標對象、屬性名、屬性值和 Proxy 實例本身，其中最後一個參數可選。

假定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方法，就可以做到防止這些內部屬性被外部讀寫。

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

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

下面是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方法的第四個參數receiver，總是返回this關鍵字所指向的那個對象，即proxy實例本身。

注意，如果目標對象自身的某個屬性，不可寫也不可配置，那麼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方法不得改變目標對象的原型。

參考：阮一峯老師的ES6入門