Proxy实例常用的拦截操作方法整理

最新推荐文章于 2024-07-24 22:15:33 发布

一笑程序猴

最新推荐文章于 2024-07-24 22:15:33 发布

阅读量2.5k

点赞数

分类专栏：前端小知识文章标签： javascript 前端 proxy

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/120905464

版权

本文介绍了JavaScript中的Proxy，重点讲解了get、set、has、ownKeys和deleteProperty五个常用的拦截方法，阐述了它们在对象属性读取、设置、存在性检查、获取属性和删除属性时的作用，并给出了相关示例。

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

前言

小伙伴们大家好。前面一篇文章中我们对ES6中的Proxy进行了一个简单的分享。通过学习我们知道Proxy可以对对象进行拦截，从而可以根据业务需要做一些对应的逻辑处理。我们还知道Vue3.0对数据劫持做了一个很大的优化其中用到的就是Proxy。在文章的结尾我们还整理出了Proxy提供的支持拦截操作的一些实例方法。本章我们就抽取几个常用的拦截方法进行一个分享。

get(target, propKey, receiver)

看过上一篇文章的小伙伴应该都注意到了：在我们代码案例中用到最多的拦截方法就是get和set了。但并没有对这些方法进行一个详细的说明。

get(target, propKey, receiver)方法用于拦截对象的属性读取，也就是说当我们通过Proxy的实例去访问对象的属性时会优先进入到get方法中。

get方法接收三个参数：target：要拦截的目标对象，propKey：目标对象中的属性， receiver（可选）：Proxy实例本身（严格的说应该是操作行为所针对的对象），第三个参数用到的场景很少，一般都是前两个参数比较多。

get方法是可以支持继承的。将以一个小案例演示。

let obj = {
   name:'Yannis'}
let proxy = new Proxy(obj,{
   
	get(target, key, receiver){
   
		console.log(target);
		console.log(key);
		return 'Hello '+ target[key];
	}
});

obj.name;
// {name:'Yannis'} target要拦截的对象
// name key：正在访问的对象的属性
// 'Hello Yannis' 当我们访问对象属性时，拦截器自动加了个Hello前缀

//  get方法是可以支持继承
let proxy = new Proxy({
   },{
   
	get(target,key){
   
		return 'Hello Proxy'
	}
});
let obj = Object.create(proxy);
obj.name