Proxy 对象_proxy(object)取值

作者：笔触狂放9 | 2024-02-25 10:10:04

踩

proxy(object)取值

Proxy对象可以在对目标对象进行某个操作时，对该操作进行拦截，并定制自定义拦截行为
ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

使用方法

let proxy = new Proxy(target, handler);
1

参数	说明
target	表示所要拦截的目标对象
handler	是一个对象，用来定制拦截行为 (具体的行为列在文章最后面)

看下面的例子：

let obj = {
    name: 'zhangsan'
}
let proxy = new Proxy( obj, {
	/*
	参数：target 表示所要拦截的目标对象
		  propKey 表示所访问的属性名
	*/
    get: (target, propKey) => {
        if(propKey in target) {
            return 'hello world'
        }else {
            throw new ReferenceError(`'${propKey}' dose not exit`)
        }
    }
})
console.log(proxy.name)	 // hello world
console.log(proxy.age)   // ReferenceError: 'age' dose not exit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

上面例子中，拦截的对象时obj，拦截的行为是get（访问操作），如果访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回undefined。

set(target, propKey, value, [proxy])方法

参数	说明
target	表示所要拦截的目标对象
propKey	表示所访问的属性名
value	属性值
proxy(可选)	Proxy 实例本身

利用set方法，可以数据绑定，即每当对象发生变化时，会自动更新 DOM。看下面的例子：

//省略了HTML头部
<html>
<body>
    <input type="text" id="txt">
    <div id="dv"></div>
    <script>
        let oTxt = document.getElementById('txt')
        let oDv = document.getElementById('dv')
        
        let handler = {
            set: (target, propKey, value) => {
                oDv.innerHTML = value
            }
        }
        
        let proxy = new Proxy({}, handler)
        
        //当input标签里面的值发生改变时,拦截 value属性 的赋值操作
        oTxt.addEventListener('input', () => {
            proxy.value = oTxt.value
        }, false)
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

具体的使用方法阮一峰《ECMAScript 6 入门》

方法	说明
`get(target, propKey, [receiver])`	拦截对象属性的读取
`set(target, propKey, value, [receiver])`	拦截对象属性的设置
`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` 实例作为函数调用的操作
`construct(target, args)`	拦截 `Proxy` 实例作为构造函数调用的操作

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/140259