阮一峰es6要點總結(jié)——Proxy

筆記，完全摘錄自阮一峰

proxy的概念

proxy英文原意是代理的意思，在ES6中，可以翻譯為"代理器"。
它主要用于改變某些操作的默認行為，等同于在語言層面做出修改，所以屬于一種“元編程”（meta programming），即對編程語言進行編程。

proxy在目標對象的外層搭建了一層攔截，外界對目標對象的某些操作（后文會說明，有哪些操作可以攔截），必須通過這層攔截。

語法

var proxy = new Proxy(target, handler);

通過構(gòu)造函數(shù)生成proxy，target參數(shù)是要攔截的目標對象，handler參數(shù)也是一個對象，用來定制攔截行為。

來看一個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);
  }
});

一般將handle參數(shù)說成配置對象，在配置對象中，可以定義需要攔截的操作。如果配置對象為空，那么對proxy的操作將直通目標對象。

注意：對proxy操作才有攔截效果，而不是目標對象。

Proxy實例的方法

配置對象中，可以攔截的操作

  • get(target, propKey, receiver)
    get方法，攔截屬性的讀取操作。
    對于不可配置（configurable），不可寫（writable）的屬性，不能被代理，通過Proxy訪問會報錯
    下邊是幾個例子：

例子一：當讀取不存在的屬性時候，拋出錯誤而不是返回undefined

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

例子二：攔截讀取繼承屬性

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

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

例子三：數(shù)組讀取負數(shù)索引（負數(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

例子四：實現(xiàn)屬性的鏈式操作（將屬性的讀取轉(zhuǎn)換為執(zhí)行一個函數(shù)）

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

例子五：實現(xiàn)一個生成各種DOM節(jié)點的通用函數(shù)dom。這個例子感覺很好，以后就可以簡單的創(chuàng)建dom節(jié)點了。

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);
  • set(target, propKey, value, receiver)

攔截屬性的賦值操作，返回布爾值。如果某個屬性，不可寫，不可配置，那么set不得改變這個屬性的值，只能返回同樣的值，否則報錯。

一些應(yīng)用
例子一：實現(xiàn)數(shù)據(jù)的限制

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ù)據(jù)綁定，當某些數(shù)據(jù)改變時候同步更新dom

例子三：防止內(nèi)部屬性“_”被外部讀寫（通常我們以下劃線開頭，表示其實內(nèi)部屬性）

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
  • apply(target, object, args)

攔截——函數(shù)調(diào)用、call、apply操作
三個參數(shù)分別是：

1.目標對象
2.目標對象的上下文對象（this）
3.目標對象的參數(shù)數(shù)組

一個例子：

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
  • has(target, propKey)
    攔截HasProperty操作，即判斷對象是否具有某個屬性時，這個方法會生效，典型的就是in操作符
    如果原對象不可配置或者禁止擴展，這時has攔截會報錯。

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

例子一：使用has方法隱藏某些屬性，不被in 發(fā)現(xiàn)（這個例子是屏蔽了內(nèi)部屬性"_"，如果原對象的屬性名的第一個字符是下劃線，proxy.has就會返回false，從而不會被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

例子二：不對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
  • construct(target, args)
    攔截new命令
    兩個參數(shù)：目標對象，構(gòu)造函數(shù)的參數(shù)對象

construct方法必須返回一個對象，否則會報錯

一個例子：

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
  • deleteProperty(target, propKey)
    攔截delete操作，如果這個方法拋出錯誤，或者返回false，則當前屬性就無法被delete命令刪除
    注意，目標對象自身的不可配置（configurable）的屬性，不能被deleteProperty方法刪除，否則報錯。

例子：

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
  • dfineProperty(target, propKey, propDesc)
    攔截object.defineProperty操作。

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

一個例子：

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"'
  • getOwnPropertyDescriptor(target, propKey)

攔截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(target)
    攔截以下操作
  • object.prototype.__proto__
  • object.prototype.isPrototypeOf()
  • object.getPrototypeOf()
  • Reflect.getPrototypeOf()
  • instanceof

必須返回一個對象或者null，否則報錯。

如果目標對象不可擴展（extensible）， getPrototypeOf方法必須返回目標對象的原型對象。

一個例子：

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true
  • isExtensible(target)
    攔截object.isExtensible操作

該方法只能返回布爾值，否則值會被自動轉(zhuǎn)換為布爾值。

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

一個例子

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

Object.isExtensible(p)
// "called"
// true
  • ownKeys(target)

攔截對象自身屬性的讀取操作，具體攔截以下操作：

  • object.getOwnPropertyNames()
  • object.getOwnPropertySymbols()
  • object.keys()

注意：
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方法返回，否則報錯

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'

如果目標對象是不可擴展的（non-extensition），這時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

下邊是例子

例子一：攔截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' ]

例子二：攔截第一個字符為下劃線的屬性名

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']
  • preventExtensions(target)

攔截object.preventExtensions()返回布爾值，否則會被自動轉(zhuǎn)化為布爾值。

這個方法有一個限制，只有目標對象不可擴展時（即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，因此報錯。

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

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

Object.preventExtensions(p)
// "called"
// true
  • setPrototypeOf(target, proto)
    攔截ovject.setPrototypeOf方法

只能返回布爾值，否則自動轉(zhuǎn)化。

如果目標對象不可擴展（extensible），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

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

下面是一個例子，由于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

實例：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 層。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • defineProperty() 學習書籍《ECMAScript 6 入門 》 Proxy Proxy 用于修改某...
    Bui_vlee閱讀 672評論 0贊 1
  • Proxy代理是一個共通的概念，可以起到攔截的作用。ES6里將Proxy標準化了，提供了Proxy構(gòu)造函數(shù)，用來生...
    張歆琳閱讀 10,180評論 1贊 7
  • ECMAScript發(fā)展歷史 （1）ECMA-262 第1版：去除了對針對瀏覽器的特性，支持Unicode標準（多...
    congnie116閱讀 1,907評論 0贊 2
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,948評論 18贊 139
  • 看了電影《天亮之前》，郭天王的演技爆棚，不過在此不想評論電影優(yōu)劣，我只想討論下為什么賭徒注定輸光一切。 賭徒高野（...
    船長辛巴達閱讀 710評論 0贊 1