Javascript Proxy对象 简介

时间:2021-07-22 23:20:20

Javascript Proxy对象 简介

Javascript Proxy对象

改变你操作对象的方式

Javascript Proxy对象 简介

Proxies 是Javasript对象的中间件

...或者说至少是那种很早的版本。

ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。

const obj = {
val: 10
};
console.log(obj.val);

这里,console.log()表达式在对象obj上执行get方法来获取val的值。

另一个对象的基本操作方法是 set

const obj = {
val: 10
};
obj.val2 = 20;

这里,set方法用来给对象obj设置一个新的值。


如何创建Proxy?

const proxiedObject = new Proxy(initialObj, handler);

调用Proxy构造函数,new Proxy()将返回一个对象,不仅包含了initialObj里的值,而且其基本操作(如getset)现在可以通过handler对象来指定一些自定义逻辑。

我们写个例子来理解这个概念,

const handler = {
get: function() {
console.log('A value has been accessed');
}
} const initialObj = {
id: 1,
name: 'Foo Bar'
} const proxiedObj = new Proxy(initialObj, handler); console.log(proxiedObj.name);

现在,如果我们没有构造一个Proxy对象,执行第14行的console.log(proxiedObj.name)会在控制台输出 “Foo Bar”。

不过现在我们定义了一个Proxy,并在第三行get方法中定义了一些自定义逻辑。

现在执行console.log(proxiedObj.name)会在控制台输出 “A value has been accessed”。

Javascript Proxy对象 简介

仔细看,你会发现控制台中实际上有两条记录。 “A value has been accessed” 和 undefined。 为什么?