proxy (最近看到)

最新推荐文章于 2024-07-11 13:14:03 发布

原创最新推荐文章于 2024-07-11 13:14:03 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #node.js

本文详细介绍了JavaScript中的Proxy对象，用于拦截和修改对对象的访问和操作。通过示例展示了get、set、has、deleteProperty等13种拦截操作的用法，包括属性读取、设置、删除、枚举、定义属性、扩展性检查等，揭示了Proxy在对象代理和数据验证等方面的重要作用。

proxy

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为

var proxy = new Proxy(target, handler);
// 例子
var proxy = new Proxy({}, {
  get: function(target, propKey) {
    return 35;
  }
});
console.log(proxy.time) // 35
proxy.name // 35
proxy.title // 35

下面是 Proxy 支持的拦截操作一览，一共 13 种。

***get(target, propKey, receiver)***：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。

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 // 抛出一个错误

***set(target, propKey, value, receiver)***：拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。

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;
    return true;
  }
};
let person = new Proxy({}, validator);
person.age = 100;
person.age // 100
person.age = 'young' // 报错
person.age = 300 // 报错

***has(target, propKey)***：拦截propKey in proxy的操作，返回一个布尔值。has()拦截只对in运算符生效，对for…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

***deleteProperty(target, propKey)***：拦截delete proxy[propKey]的操作，返回一个布尔值。

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

***ownKeys(target)***：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而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' ]

***getOwnPropertyDescriptor(target, propKey)***：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象

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 }

***defineProperty(target, propKey, propDesc)***：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值

var handler = {
  defineProperty (target, key, descriptor) {
    return false;
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不会生效

***preventExtensions(target)***：拦截Object.preventExtensions(proxy)，返回一个布尔值

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```

***getPrototypeOf(target)***：拦截Object.getPrototypeOf(proxy)，返回一个对象。
```javascript
var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

***isExtensible(target)***：拦截Object.isExtensible(proxy)，返回一个布尔值。

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

***setPrototypeOf(target, proto)***：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。

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

***apply(target, object, args)***：拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。

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

***construct(target, args)***：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)

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