MDN - Proxy

原文地址 developer.mozilla.org

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

术语

handler

包含捕捉器（trap）的占位符对象，可译为处理器对象。

traps

提供属性访问的方法。这类似于操作系统中捕获器的概念。

target

被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端。根据目标验证关于对象不可扩展性或不可配置属性的不变量（保持不变的语义）。

语法

const p = new Proxy(target, handler)

参数

target

要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler

一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

方法

Proxy.revocable()

创建一个可撤销的Proxy对象。

handler 对象的方法

handler 对象是一个容纳一批特定属性的占位符对象。它包含有 Proxy 的各个捕获器（trap）。

所有的捕捉器是可选的。如果没有定义某个捕捉器，那么就会保留源对象的默认行为。

handler.getPrototypeOf()

Object.getPrototypeOf() 方法的捕捉器。

注释：Object.getPrototypeOf(obj) 返回指定对象的原型

handler.setPrototypeOf()

Object.setPrototypeOf 方法的捕捉器。

handler.isExtensible()

Object.isExtensible 方法的捕捉器。

注释：Object.isExtensible(obj) 判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）

handler.preventExtensions()

Object.preventExtensions 方法的捕捉器。

注释：Object.preventExtensions(obj) 让一个对象变的不可扩展，也就是永远不能再添加新的属性。

handler.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor 方法的捕捉器。

注释：Object.getOwnPropertyDescriptor(obj, prop) 返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

handler.defineProperty()

Object.defineProperty 方法的捕捉器。

注释：Object.defineProperty(obj, prop, descriptor) 在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

handler.has()

in 操作符的捕捉器。

注释：prop in obj 指定的属性在指定的对象或其原型链中，则in 运算符返回true。

示例

基础示例

在以下简单的例子中，当对象中不存在属性名时，默认返回值为 37。下面的代码以此展示了 get handler 的使用场景。

const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};

const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b);      
console.log(‘c‘ in p, p.c); 

无操作转发代理

在以下例子中，我们使用了一个原生 JavaScript 对象，代理会将所有应用到它的操作转发到这个对象上。

let target = {};
let p = new Proxy(target, {});

p.a = 37;   

console.log(target.a);    

验证

通过代理，你可以轻松地验证向一个对象的传值。下面的代码借此展示了 set handler 的作用。

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‘);
      }
    }

    
    obj[prop] = value;

    
    return true;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

console.log(person.age);


person.age = ‘young‘;


person.age = 300;

扩展构造函数

方法代理可以轻松地通过一个新构造函数来扩展一个已有的构造函数。这个例子使用了 construct和 [apply](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply)。

function extend(sup, base) {
  var descriptor = Object.getOwnPropertyDescriptor(
    base.prototype, "constructor"
  );
  base.prototype = Object.create(sup.prototype);
  var handler = {
    construct: function(target, args) {
      var obj = Object.create(base.prototype);
      this.apply(target, obj, args);
      return obj;
    },
    apply: function(target, that, args) {
      sup.apply(that, args);
      base.apply(that, args);
    }
  };
  var proxy = new Proxy(base, handler);
  descriptor.value = proxy;
  Object.defineProperty(base.prototype, "constructor", descriptor);
  return proxy;
}

var Person = function (name) {
  this.name = name
};

var Boy = extend(Person, function (name, age) {
  this.age = age;
});

Boy.prototype.sex = "M";

var Peter = new Boy("Peter", 13);
console.log(Peter.sex);  
console.log(Peter.name); 
console.log(Peter.age);  

操作 DOM 节点

有时，我们可能需要互换两个不同的元素的属性或类名。下面的代码以此为目标，展示了 set handler 的使用场景。

let view = new Proxy({
  selected: null
}, {
  set: function(obj, prop, newval) {
    let oldval = obj[prop];

    if (prop === ‘selected‘) {
      if (oldval) {
        oldval.setAttribute(‘aria-selected‘, ‘false‘);
      }
      if (newval) {
        newval.setAttribute(‘aria-selected‘, ‘true‘);
      }
    }

    
    obj[prop] = newval;

    
    return true;
  }
});

let i1 = view.selected = document.getElementById(‘item-1‘);
console.log(i1.getAttribute(‘aria-selected‘)); 

let i2 = view.selected = document.getElementById(‘item-2‘);
console.log(i1.getAttribute(‘aria-selected‘)); 
console.log(i2.getAttribute(‘aria-selected‘)); 

值修正及附加属性

以下products代理会计算传值并根据需要转换为数组。这个代理对象同时支持一个叫做 latestBrowser的附加属性，这个属性可以同时作为 getter 和 setter。

let products = new Proxy({
  browsers: [‘Internet Explorer‘, ‘Netscape‘]
}, {
  get: function(obj, prop) {
    
    if (prop === ‘latestBrowser‘) {
      return obj.browsers[obj.browsers.length - 1];
    }

    
    return obj[prop];
  },
  set: function(obj, prop, value) {
    
    if (prop === ‘latestBrowser‘) {
      obj.browsers.push(value);
      return;
    }

    
    if (typeof value === ‘string‘) {
      value = [value];
    }

    
    obj[prop] = value;

    
    return true;
  }
});

console.log(products.browsers); 
products.browsers = ‘Firefox‘;  
console.log(products.browsers); 

products.latestBrowser = ‘Chrome‘;
console.log(products.browsers);      
console.log(products.latestBrowser); 

通过属性查找数组中的特定对象

以下代理为数组扩展了一些实用工具。如你所见，通过 Proxy，我们可以灵活地 “定义” 属性，而不需要使用 Object.defineProperties 方法。以下例子可以用于通过单元格来查找表格中的一行。在这种情况下，target 是 [table.rows](https://developer.mozilla.org/zh-CN/docs/DOM/table.rows)。

let products = new Proxy([
  { name: ‘Firefox‘    , type: ‘browser‘ },
  { name: ‘SeaMonkey‘  , type: ‘browser‘ },
  { name: ‘Thunderbird‘, type: ‘mailer‘ }
], {
  get: function(obj, prop) {
    
    if (prop in obj) {
      return obj[prop];
    }

    
    if (prop === ‘number‘) {
      return obj.length;
    }

    let result, types = {};

    for (let product of obj) {
      if (product.name === prop) {
        result = product;
      }
      if (types[product.type]) {
        types[product.type].push(product);
      } else {
        types[product.type] = [product];
      }
    }

    
    if (result) {
      return result;
    }

    
    if (prop in types) {
      return types[prop];
    }

    
    if (prop === ‘types‘) {
      return Object.keys(types);
    }

    return undefined;
  }
});

console.log(products[0]); 
console.log(products[‘Firefox‘]); 
console.log(products[‘Chrome‘]); 
console.log(products.browser); 
console.log(products.types); 
console.log(products.number); 

一个完整的 traps 列表示例

出于教学目的，这里为了创建一个完整的 traps 列表示例，我们将尝试代理化一个非原生对象，这特别适用于这类操作：由 发布在 document.cookie 页面上的 “小型框架” 创建的docCookies全局对象。

var docCookies = new Proxy(docCookies, {
  "get": function (oTarget, sKey) {
    return oTarget[sKey] || oTarget.getItem(sKey) || undefined;
  },
  "set": function (oTarget, sKey, vValue) {
    if (sKey in oTarget) { return false; }
    return oTarget.setItem(sKey, vValue);
  },
  "deleteProperty": function (oTarget, sKey) {
    if (sKey in oTarget) { return false; }
    return oTarget.removeItem(sKey);
  },
  "enumerate": function (oTarget, sKey) {
    return oTarget.keys();
  },
  "ownKeys": function (oTarget, sKey) {
    return oTarget.keys();
  },
  "has": function (oTarget, sKey) {
    return sKey in oTarget || oTarget.hasItem(sKey);
  },
  "defineProperty": function (oTarget, sKey, oDesc) {
    if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); }
    return oTarget;
  },
  "getOwnPropertyDescriptor": function (oTarget, sKey) {
    var vValue = oTarget.getItem(sKey);
    return vValue ? {
      "value": vValue,
      "writable": true,
      "enumerable": true,
      "configurable": false
    } : undefined;
  },
});



alert(docCookies.my_cookie1 = "First value");
alert(docCookies.getItem("my_cookie1"));

docCookies.setItem("my_cookie1", "Changed value");
alert(docCookies.my_cookie1);

规范

浏览器兼容性

Report problems with this compatibility data on GitHub

Legend

Full support

Full support

No support

No support

The compatibility table on this page is generated from structured data. If you‘d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参考

版权声明

MDN - Proxy

原文：https://www.cnblogs.com/qq3279338858/p/14435324.html