JavaScript 之 Proxy _JavaScript

【JavaScript 之 Proxy】莫道桑榆晚，为霞尚满天。这篇文章主要讲述JavaScript 之 Proxy相关的知识，希望能为你提供帮助。

文章图片

前言Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
语法

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中：

new Proxy() 表示生成一个 Proxy 实例
target 参数表示所要拦截的目标对象
handler 参数也是一个对象，用来定制拦截行为

如果handler没有设置任何拦截，那就等同于直接通向原对象。

let target = ; let handler = ; let proxy = new Proxy(target,handler); proxy.name = 编程三昧; console.log(target.name); // 编程三昧

还有一个技巧是将 Proxy 对象，设置到 object.proxy 属性,从而在 object 对象上调用：

let proxy = new Proxy(, get: function(target, property) return 35; ); let obj = Object.create(proxy); obj.time // 35

get()get() 方法用于拦截某个属性的读取操作，可以接受三个参数，依次为:

目标对象
属性名
proxy 实例本身（严格地说，是操作行为所针对的对象），可选。

get() 方法的用法，上文已经有一个例子，下面是另一个拦截读取操作的例子:

letperosn = name:james, age:26, profession:softwarevar proxy = new Proxy(perosn, get:function(target,property) if (property in target) return target[property]; else throw new ReferenceError("propertype\\""+property + "\\" does no exit" ); ); console.log(proxy.name,proxy.profession); // james software console.log(proxy.sex); // Uncaught ReferenceError: propertype"sex" does no exit

set()set() 方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为:

目标对象
属性名
属性值
Proxy 实例本身，可选。

假定 person 对象有一个 age 属性，该属性应该是一个不大于 200 的整数，那么可以使用 Proxy 保证 age 的属性值符合要求。

let perosn = name:james, age:26, profession:softwarelet proxy = new Proxy(perosn, get:function(target,property) if (property in target) return target[property]; else throw new ReferenceError("propertype\\""+property + "\\" does no exit" ); , set:function(target,key,value) if(key === age) if(value> 80) throw ReferenceError("invail"); else return target[key] = value; else return target[key]; ); proxy.age = 60; console.log(proxy.name,proxy.profession,proxy.age); // james software 60proxy.age = 99; // Uncaught ReferenceError: invail

apply()apply() 方法拦截:

函数的调用
call 操作
apply 操作

apply() 方法可以接受三个参数，分别是：

目标对象
目标对象的上下文对象（this）
目标对象的参数数组。

let twice = apply(target, ctx, agrs) return Reflect.apply(...arguments) * 2; ; function sum (a, b) return a + b; let proxy5 = new Proxy(sum, twice); console.log(proxy5(1, 3)); // 8 console.log(proxy5.apply(null, [1, 3])); // 8

另外，直接调用Reflect.apply方法，也会被拦截。

Reflect.apply(proxy5, null, [9, 10]) // 38

has()
has() 方法用来拦截 HasProperty 操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是 in 运算符。
has() 方法可以接受两个参数，分别是目标对象、需查询的属性名。
下面的例子使用 has 方法隐藏某些属性，不被 in 运算符发现。

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 // 张三不及格 // falsescore in oproxy2 // truefor (let a in oproxy1) console.log(oproxy1[a]); // 张三 // 59for (let b in oproxy2) console.log(oproxy2[b]); // 李四 // 99

上面代码中，has 拦截只对 in 运算符生效，对 for...in 循环不生效，导致不符合要求的属性没有被 for...in 循环所排除。
Proxy 支持的拦截操作一览Proxy 支持的拦截操作基本有 13 种。
get(target,propKey,receiver)
拦截对象属性的读取，比如：

proxy.foo
proxy[foo]。

set(target, propKey, value, receiver)
拦截对象属性的设置，比如 proxy.foo = v 或 proxy[foo] = v，返回一个布尔值。
has(target, propKey)
拦截 propKey in proxy 的操作，返回一个布尔值。
deleteProperty(target, propKey)
拦截 delete proxy[propKey] 的操作，返回一个布尔值。
ownKeys(target)
拦截：

Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
for...in 循环

以上拦截都返回一个数组。
该方法返回目标对象所有自身的属性的属性名，而 Object.keys() 的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey)
拦截 Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc)
拦截：

Object.defineProperty(proxy, propKey, propDesc）
Object.defineProperties(proxy, propDescs)

返回一个布尔值。
preventExtensions(target)
拦截 Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)
拦截 Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target)
拦截 Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)
拦截 Object.setPrototypeOf(proxy, proto)，返回一个布尔值。
如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args)
拦截 Proxy 实例作为函数调用的操作，比如：