ES6 之 Proxy

最新推荐文章于 2024-03-04 15:04:26 发布

前端瓶子君

最新推荐文章于 2024-03-04 15:04:26 发布

阅读量520

点赞数 1

分类专栏： JS ES6 文章标签： proxy

本文链接：https://blog.csdn.net/lunahaijiao/article/details/87271703

版权

本文详细介绍了ES6中的Proxy特性，它允许我们定义自定义行为来拦截对目标对象的操作，如get、set、has、ownKeys等。通过Proxy，可以实现对属性访问的控制、属性检查、遍历行为的改变等功能。文中列举了多个示例，展示了如何使用这些拦截方法，并推荐了阮一峰的《ECMAScript 6 入门》作为进一步学习的资源。

摘要由CSDN通过智能技术生成

Proxy，代理，是ES6新增的功能，可以理解为代理器（即由它代理某些操作）。

Proxy 对象用于定义或修改某些操作的自定义行为，可以在外界对目标对象进行访问前，对外界的访问进行改写。

1. Proxy 定义

var proxy = new Proxy(target, handler)

new Proxy()表示生成一个 Proxy 实例

target：目标对象
handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数。

注意：要实现拦截操作，必须是对 Proxy 实例进行操作，而不是针对目标对象 target 进行操作。

首先，看个例子：

let handler = {
   
    get: function(target, key, receiver) {
   
        console.log(`getter ${
     key}!`)
        return Reflect.get(target, key, receiver)
    },
    set: function(target, key, value, receiver) {
   
    	console.log(`setter ${
     key}=${
     value}`)
		return Reflect.set(target, key, value, receiver)
	}
}
var obj = new Proxy({
   }, handler)
obj.a = 1 // setter a=1
obj.b = undefined // setter b=undefined

console.