一篇文章搞懂JavaScript中的代理和代理的使用

 更新时间:2021年08月26日 16:47:01   作者:CSDN  
这篇文章主要为大家详细介绍了JavaScript代理和代理的使用的方法,感兴趣的小伙伴们可以参考一下,希望能给你带来帮助

什么是代理

MDN上的定义:Proxy(也就是代理) 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。

官方的定义总是这么晦涩枯燥,那么究竟Proxy能做什么?

1.代理这个概念来自于元编程,就是一种你可以编写出一个可以读取、修改、分析、甚至生成新程序的程序。而JS可以通过Proxy和Reflect这两个对象来进行js元编程!!

2.Proxy就是代理,当我们不方便去访问某个对象或者不满足于简单的访问时,代理就可以作为“中间人”来帮助我们更好的来控制对象的操作!!

Proxy的基本知识

语法:

const handler = {};
let target = {};//目标对象
let userProxy = new Proxy(target,handler);//成功实现代理!!
userProxy.a = 1;
console.log(target.a);//1
console.log(target == userProxy);//false

target: 要使用 Proxy 包装的目标对象

handler: 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理的行为。

OK!那么恭喜你,你已经掌握了Proxy的定义。

在使用中,需要我们去更多费神的是handler中代理行为的代码,它可以帮助我们来更好的使用Proxy

handler对象方法

const handler = {
	get(target,prop,receiver){
		console.log('get!');
		return 'a';
	}
}
let target = {name:'tar'};
let userProxy = new Proxy(target,handler);
userProxy.name

当然还有其他更多的方法请参考MDN:handler 对象的方法

Proxy可以实现的

跟踪属性访问

当我们需要知道对象什么时候被访问、修改时。

 let target = {
	name:'ww'
	}
 const handlers = {
    get(tar, prop){
     	console.log('get');
     	return Reflect.get(...arguments); 
     },
     set(tar,prop){
		console.log('set');
		return Reflect.set(...arguments);
	 }
  }
  let userProxy = new Proxy(target, handlers);
  userProxy.name;
  userProxy.name = 'wqw';

解决对象属性为undefined的问题

let target = {}
  let handlers = {
    get: (target, property) => {
      target[property] = (property in target) ? target[property] : {}
      if (typeof target[property] === 'object') {
        return new Proxy(target[property], handlers)
      }
      return target[property]
    }
  }
  let proxy = new Proxy(target, handlers)
  console.log('z' in proxy.x.y) // false (其实这一步已经针对`target`创建了一个x.y的属性)
  proxy.x.y.z = 'hello'
  console.log('z' in proxy.x.y) // true
  console.log(target.x.y.z)     // hello

我们代理了get,并在里边进行逻辑处理,如果我们要进行get的值来自一个不存在的key,则我们会在target中创建对应个这个key,然后返回一个针对这个key的代理对象。

这样就能够保证我们的取值操作一定不会抛出can not get xxx from undefined

但是这会有一个小缺点,就是如果你确实要判断这个key是否存在只能够通过in操作符来判断,而不能够直接通过get来判断。

参考资料:

MDN-Proxy

JS-设计模式

Proxy可以做哪些有趣的事情

元编程

总结

本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • js实现网页定位导航功能

    js实现网页定位导航功能

    这篇文章主要为大家详细介绍了js实现网页定位导航功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JS图片懒加载的优点及实现原理

    JS图片懒加载的优点及实现原理

    这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-01-01
  • 使用js实现按钮控制文本框加1减1应用于小时+分钟

    使用js实现按钮控制文本框加1减1应用于小时+分钟

    正如标题所言使用js实现按钮控制文本框加1减1,此类主要应用于小时+分钟,下面有个不错的示例,喜欢的朋友可以参考下
    2013-12-12
  • JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    JavaScript是一种解释执行的脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,它遵循ECMAScript标准。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能
    2018-01-01
  • 深入理解typescript中的infer关键字的使用

    深入理解typescript中的infer关键字的使用

    infer 这个关键字,整理记录一下,避免后面忘记了。具有一定的参考价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • 基于jquery实现全屏滚动效果

    基于jquery实现全屏滚动效果

    相信大家都很喜欢网易邮箱、QQ浏览器的官方网站这样的可全屏滚动的效果,也许更多的朋友想把全屏滚动效果做到自己的网站中,本文就带着大家一起完成这个效果
    2015-11-11
  • JavaScript Window 打开新窗口(window.location.href、window.open、window.showModalDialog)

    JavaScript Window 打开新窗口(window.location.href、windo

    本文主要介绍了JavaScript Window 打开新窗口的三种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JS去掉字符串中所有的逗号

    JS去掉字符串中所有的逗号

    这篇文章主要介绍了JS去掉字符串中所有的逗号,需要的朋友可以参考下
    2017-10-10
  • Bootstrap栅格系统简单实现代码

    Bootstrap栅格系统简单实现代码

    这篇文章主要为大家详细介绍了Boostrap栅格系统的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript深入介绍WebAPI的用法

    JavaScript深入介绍WebAPI的用法

    JS分成三个大的部分:ECMAScript、DOM API、BOM API,其中:ECMAScript是让前端开发建立基本的编程思维。但是要想真正来写一个更加复杂的有交互式的页面,还需要WebAPI的支持,相当于把后端编程实现成前端交互。DOM+BOM就组成了WebAPI
    2022-06-06

最新评论