caopoenr97人人超碰,亚洲精品中文字幕乱码4区

1. 概述

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, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

上面代碼對(duì)一個(gè)空對(duì)象架設(shè)了一層攔截，重定義了屬性的讀取（ 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, propKey) {
    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) proxy 就等同于訪問(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, propKey) {
    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" // true

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

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

get(target, propKey, receiver)：攔截對(duì)象屬性的讀取，比如 proxy.foo 和 proxy['foo'] 。
set(target, propKey, value, receiver)：攔截對(duì)象屬性的設(shè)置，比如 proxy.foo = v 或 proxy['foo'] = v ，返回一個(gè)布爾值。
has(target, propKey)：攔截 propKey in proxy 的操作，返回一個(gè)布爾值。
deleteProperty(target, propKey)：攔截 delete proxy[propKey] 的操作，返回一個(gè)布爾值。
ownKeys(target)：攔截 Object.getOwnPropertyNames(proxy) 、 Object.getOwnPropertySymbols(proxy) 、 Object.keys(proxy) 、 for...in 循環(huán)，返回一個(gè)數(shù)組。該方法返回目標(biāo)對(duì)象所有自身的屬性的屬性名，而 Object.keys() 的返回結(jié)果僅包括目標(biāo)對(duì)象自身的可遍歷屬性。
getOwnPropertyDescriptor(target, propKey)：攔截 Object.getOwnPropertyDescriptor(proxy, propKey) ，返回屬性的描述對(duì)象。
defineProperty(target, propKey, propDesc)：攔截 Object.defineProperty(proxy, propKey, propDesc）、 Object.defineProperties(proxy, propDescs) ，返回一個(gè)布爾值。
preventExtensions(target)：攔截 Object.preventExtensions(proxy) ，返回一個(gè)布爾值。
getPrototypeOf(target)：攔截 Object.getPrototypeOf(proxy) ，返回一個(gè)對(duì)象。
isExtensible(target)：攔截 Object.isExtensible(proxy) ，返回一個(gè)布爾值。
setPrototypeOf(target, proto)：攔截 Object.setPrototypeOf(proxy, proto) ，返回一個(gè)布爾值。如果目標(biāo)對(duì)象是函數(shù)，那么還有兩種額外操作可以攔截。
apply(target, object, args)：攔截 Proxy 實(shí)例作為函數(shù)調(diào)用的操作，比如 proxy(...args) 、 proxy.call(object, ...args) 、 proxy.apply(...) 。
construct(target, args)：攔截 Proxy 實(shí)例作為構(gòu)造函數(shù)調(diào)用的操作，比如 new proxy(...args) 。

2. Proxy 實(shí)例的方法

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

get()

get方法用于攔截某個(gè)屬性的讀取操作，可以接受三個(gè)參數(shù)，依次為目標(biāo)對(duì)象、屬性名和 proxy 實(shí)例本身（嚴(yán)格地說(shuō)，是操作行為所針對(duì)的對(duì)象），其中最后一個(gè)參數(shù)可選。

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

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 // 拋出一個(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.foo // "GET foo"

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

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

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

上面代碼中， proxy 對(duì)象的 getReceiver 屬性是由 proxy 對(duì)象提供的，所以 receiver 指向 proxy 對(duì)象。

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


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

上面代碼中， d 對(duì)象本身沒(méi)有 a 屬性，所以讀取 d.a 的時(shí)候，會(huì)去 d 的原型 proxy 對(duì)象找。這時(shí)， receiver 就指向 d ，代表原始的讀操作所在的那個(gè)對(duì)象。

如果一個(gè)屬性不可配置（configurable）且不可寫(xiě)（writable），則 Proxy 不能修改該屬性，否則通過(guò) Proxy 對(duì)象訪問(wèn)該屬性會(huì)報(bào)錯(cuò)。

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方法用來(lái)攔截某個(gè)屬性的賦值操作，可以接受四個(gè)參數(shù)，依次為目標(biāo)對(duì)象、屬性名、屬性值和 Proxy 實(shí)例本身，其中最后一個(gè)參數(shù)可選。

假定 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ò)誤，這是數(shù)據(jù)驗(yàn)證的一種實(shí)現(xiàn)方法。利用 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ě)。

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

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

下面是 set 方法第四個(gè)參數(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 方法的第四個(gè)參數(shù) receiver ，指的是原始的操作行為所在的那個(gè)對(duì)象，一般情況下是 proxy 實(shí)例本身，請(qǐng)看下面的例子。

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 屬性的值時(shí)， myObj 并沒(méi)有 foo 屬性，因此引擎會(huì)到 myObj 的原型鏈去找 foo 屬性。 myObj 的原型對(duì)象 proxy 是一個(gè) Proxy 實(shí)例，設(shè)置它的 foo 屬性會(huì)觸發(fā) set 方法。這時(shí)，第四個(gè)參數(shù) receiver 就指向原始賦值行為所在的對(duì)象 myObj 。

注意，如果目標(biāo)對(duì)象自身的某個(gè)屬性，不可寫(xiě)且不可配置，那么 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 屬性不可寫(xiě)，Proxy 對(duì)這個(gè)屬性的 set 代理將不會(huì)生效。

注意，嚴(yán)格模式下， set 代理如果沒(méi)有返回 true ，就會(huì)報(bào)錯(cuò)。

'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    // 無(wú)論有沒(méi)有下面這一行，都會(huì)報(bào)錯(cuò)
    return false;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
// TypeError: 'set' on proxy: trap returned falsish for property 'foo'

上面代碼中，嚴(yán)格模式下， set 代理返回 false 或者 undefined ，都會(huì)報(bào)錯(cuò)。

apply()

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

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

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

下面是一個(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 方法可以接受兩個(gè)參數(shù)，分別是目標(biāo)對(duì)象、需查詢(xú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ò)。也就是說(shuō)，如果某個(gè)屬性不可配置（或者目標(biāo)對(duì)象不可擴(kuò)展），則 has 方法就不得“隱藏”（即返回 false ）目標(biāo)對(duì)象的該屬性。

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

另外，雖然 for...in 循環(huán)也用到了 in 運(yùn)算符，但是 has 攔截對(duì) 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 攔截只對(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ì)象
newTarget ：創(chuàng)造實(shí)例對(duì)象時(shí)， new 命令作用的構(gòu)造函數(shù)（下面例子的 p ）

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ò)
// Uncaught TypeError: 'construct' on proxy: trap returned non-object ('1')

deleteProperty()

deleteProperty方法用于攔截delete 操作，如果這個(gè)方法拋出錯(cuò)誤或者返回 false ，當(dāng)前屬性就無(wú)法被 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 操作符，刪除第一個(gè)字符為下劃線的屬性會(huì)報(bào)錯(cuò)。

注意，目標(biāo)對(duì)象自身的不可配置（configurable）的屬性，不能被 deleteProperty 方法刪除，否則報(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' // 不會(huì)生效

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

注意，如果目標(biāo)對(duì)象不可擴(kuò)展（non-extensible），則 defineProperty() 不能增加目標(biāo)對(duì)象上不存在的屬性，否則會(huì)報(bào)錯(cuò)。另外，如果目標(biāo)對(duì)象的某個(gè)屬性不可寫(xiě)（writable）或不可配置（configurable），則 defineProperty() 方法不得改變這兩個(gè)設(shè)置。

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)攔截獲取對(duì)象原型。具體來(lái)說(shuō)，攔截下面這些操作。

Object.prototype.proto
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof

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

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

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

注意， getPrototypeOf()方法的返回值必須是對(duì)象或者null ，否則報(bào)錯(cuò)。另外，如果目標(biāo)對(duì)象不可擴(kuò)展（non-extensible）， getPrototypeOf() 方法必須返回目標(biāo)對(duì)象的原型對(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 。

注意，該方法只能返回布爾值，否則返回值會(huì)被自動(dòng)轉(zhuǎn)為布爾值。

這個(gè)方法有一個(gè)強(qiáng)限制，它的返回值必須與目標(biāo)對(duì)象的 isExtensible 屬性保持一致，否則就會(huì)拋出錯(cuò)誤。

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

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

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() 方法用來(lái)攔截對(duì)象自身屬性的讀取操作。具體來(lái)說(shuō)，攔截以下操作。

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

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

下面的例子是攔截第一個(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"

注意，使用 Object.keys() 方法時(shí)，有三類(lèi)屬性會(huì)被 ownKeys() 方法自動(dòng)過(guò)濾，不會(huì)返回。

目標(biāo)對(duì)象上不存在的屬性
屬性名為 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é)果都被自動(dòng)過(guò)濾掉。

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); // 沒(méi)有任何輸出
}

上面代碼中， ownkeys() 指定只返回 a 和 b 屬性，由于 obj 沒(méi)有這兩個(gè)屬性，因此 for...in 循環(huán)不會(huì)有任何輸出。

ownKeys() 方法返回的數(shù)組成員，只能是字符串或 Symbol 值。如果有其他類(lèi)型的值，或者返回的根本不是數(shù)組，就會(huì)報(bào)錯(cuò)。

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() 方法雖然返回一個(gè)數(shù)組，但是每一個(gè)數(shù)組成員都不是字符串或 Symbol 值，因此就報(bào)錯(cuò)了。

如果目標(biāo)對(duì)象自身包含不可配置的屬性，則該屬性必須被 ownKeys() 方法返回，否則報(bào)錯(cuò)。

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 對(duì)象的 a 屬性是不可配置的，這時(shí) ownKeys() 方法返回的數(shù)組之中，必須包含 a ，否則會(huì)報(bào)錯(cuò)。

另外，如果目標(biāo)對(duì)象是不可擴(kuò)展的（non-extensible），這時(shí) ownKeys() 方法返回的數(shù)組之中，必須包含原對(duì)象的所有屬性，且不能包含多余的屬性，否則報(bào)錯(cuò)。

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 對(duì)象是不可擴(kuò)展的，這時(shí) ownKeys() 方法返回的數(shù)組之中，包含了 obj 對(duì)象的多余屬性 b ，所以導(dǎo)致了報(bào)錯(cuò)。

preventExtensions()

preventExtensions()方法攔截 Object.preventExtensions() 。該方法必須返回一個(gè)布爾值，否則會(huì)被自動(dòng)轉(zhuǎn)為布爾值。

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

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 ，但這時(shí) Object.isExtensible(proxy) 會(huì)返回 true ，因此報(bào)錯(cuò)。

為了防止出現(xiàn)這個(gè)問(wè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() 方法主要用來(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);
Object.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden

上面代碼中，只要修改 target 的原型對(duì)象，就會(huì)報(bào)錯(cuò)。

注意，該方法只能返回布爾值，否則會(huì)被自動(dòng)轉(zhuǎn)為布爾值。另外，如果目標(biāo)對(duì)象不可擴(kuò)展（non-extensible）， setPrototypeOf() 方法不得改變目標(biāo)對(duì)象的原型。

3. 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ò)誤。

Proxy.revocable() 的一個(gè)使用場(chǎng)景是，目標(biāo)對(duì)象不允許直接訪問(wèn)，必須通過(guò)代理訪問(wèn)，一旦訪問(wèn)結(jié)束，就收回代理權(quán)，不允許再次訪問(wèn)。

4. this 問(wèn)題

雖然 Proxy 可以代理針對(duì)目標(biāo)對(duì)象的訪問(wèn)，但它不是目標(biāo)對(duì)象的透明代理，即不做任何攔截的情況下，也無(wú)法保證與目標(biāo)對(duì)象的行為一致。主要原因就是在 Proxy 代理的情況下，目標(biāo)對(duì)象內(nèi)部的 this 關(guān)鍵字會(huì)指向 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 ，后者內(nèi)部的 this 就是指向 proxy ，而不是 target 。

下面是一個(gè)例子，由于 this 指向的變化，導(dǎo)致 Proxy 無(wú)法代理目標(biāo)對(duì)象。

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

上面代碼中，目標(biāo)對(duì)象 jane 的 name 屬性，實(shí)際保存在外部 WeakMap 對(duì)象 _name 上面，通過(guò) this 鍵區(qū)分。由于通過(guò) proxy.name 訪問(wèn)時(shí)， this 指向 proxy ，導(dǎo)致無(wú)法取到值，所以返回 undefined 。

此外，有些原生對(duì)象的內(nèi)部屬性，只有通過(guò)正確的 this 才能拿到，所以 Proxy 也無(wú)法代理這些原生對(duì)象的屬性。

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


proxy.getDate();
// TypeError: this is not a Date object.

上面代碼中， getDate() 方法只能在 Date 對(duì)象實(shí)例上面拿到，如果 this 不是 Date 對(duì)象實(shí)例就會(huì)報(bào)錯(cuò)。這時(shí)， this 綁定原始對(duì)象，就可以解決這個(gè)問(wèn)題。

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

5. 實(shí)例：Web 服務(wù)的客戶端

Proxy對(duì)象可以攔截目標(biāo)對(duì)象的任意屬性，這使得它很合適用來(lái)寫(xiě) Web 服務(wù)的客戶端。

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


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

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

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

同理，Proxy 也可以用來(lái)實(shí)現(xiàn)數(shù)據(jù)庫(kù)的 ORM 層。

ES6 Proxy

1. 概述

2. Proxy 實(shí)例的方法

get()

set()

apply()

has()

construct()

deleteProperty()

defineProperty()

getOwnPropertyDescriptor()

getPrototypeOf()

isExtensible()

ownKeys()

preventExtensions()

setPrototypeOf()

3. Proxy.revocable()

4. this 問(wèn)題

5. 實(shí)例：Web 服務(wù)的客戶端