什么是JS代理对象(Proxy)
Jacshuo Lv3

今天我们将简单地了解一下什么是JS代理对象(Proxy)?我们可以这样理解,JS代理就相当于在对象的外层加了一层拦截,在拦截方法
里我们可以自定义一些个性化的逻辑,定义完后我们可以通过代理定义的方法,简介操作对象。再说得通俗点,在我们的生活中,我们买房租房
一般不找房东先找中介的道理一样。因为中介充当了房源的代理一样。

接下来我们通过代码理解下什么是代理。用JavaScript创建代理比较简单,如下段代码所示:

1
2
3
4
5
6
7
let initialObject = {
// 定义需要代理的对象
}
let handler={
// 定义相关的拦截器处理逻辑
}
let proxiedObject = new Proxy(initialObject, handler);

简单解释下,我们可以通过代理去调用 handler 里定义的逻辑去操作对象,对象代理有两个参数,initialObject 是目标对象,handler 拦截器对象(或者称作处理器对象)。

接下来,我们来看一个例子,我们通过代理实现读取一个对象的属性,如果对象的属性不存在,则返回代理中定义的默认值,这里我们在代理里重写了原有对象的 get 方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
let dog = {
name: "Spike"
};

const handler = {
get: (obj, property) => property in obj ? obj[property] : 'You don\'t have defined a property named ' + property;
}

const proxyDog = new Proxy(dog, handler);
console.log(proxyDog.name);
// 将会输出 Spike
console.log(proxyDog.age);
// 输出 You don't have defined a property named age

上述例子,我们通过 get: (obj, property) => … 方法重写了对象的 get 方法。

最后我再看一个如何通过代理去更对对象的值,如果更新的值不是我们期望的值,系统则抛出异常错误,不能正常更新,否则重新赋值并更新对象的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let dog = {
name: "Spike",
age: 1;
};
let handler = {
set: (obj, property, value) => {
if (property === 'age') {
if (!Number.isInteger(value)) throw new TypeError('Use numbers only for age');
if ((value < 0) || (value > 30)) throw new RangeError('A dog can't live that long');
}
obj[prop] = value;
return true;
}
};

const proxyDog = new Proxy(dog, handler);
proxyDog.age = -1;
// will throw A dog can't live that long
proxyDog.age = 'very old';
// will throw Use numbers only for age

通过 JS 代理我们不仅可以重写 getters 和 setters 方法,我们还可以进行这些操作:
deletePropertyconstructgetOwnPropertyDescriptor 等…

  • 本文标题:什么是JS代理对象(Proxy)
  • 本文作者:Jacshuo
  • 创建时间:2022-06-17 19:11:47
  • 本文链接:https://blog.imade.life/2022/06/17/什么是JS代理对象/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!