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

目录
  • 什么是代理
  • Proxy的基本知识
  • handler对象方法
  • Proxy可以实现的
  • 参考资料：
  • 总结

什么是代理

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可以做哪些有趣的事情

元编程

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！

赞 (0)

相关推荐

  • js中的事件委托或是事件代理使用详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

  • nodejs中request库使用HTTPS代理的方法

    正在尝试改用NodeJS编写爬虫,http请求库选择了 request,用起来还是挺简单的. 现在有个需求,需要用Fiddler抓包我发出去的请求,以便和浏览器发出去的包进行对比. 因为需要解密HTTPS报文,需要让node要么忽略证书安全,要么信任Fiddler的CA证书. 网上找了一圈,总结如下: 方法一:设置环境变量 设置环境变量NODE_TLS_REJECT_UNAUTHORIZED=0 即"不拒绝未认证的证书" 但是直接修改系统环境变量比较危险,因为会影响到所有nodejs的

  • vue.js使用代理和使用Nginx来解决跨域的问题

    vue.js使用代理和使用Nginx来解决跨域的问题

    使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包

  • nodejs使用socket5进行代理请求的实现

    需要用到2个库, request socks5-http-client/lib/Agent/ 或 socks5-https-client/lib/Agent 因为一些已知原因,有时候,http.request请求无法拿到数据, 首先想到的是proxy,其次是socket5. 有了以上两个库,接下来的代码超级简单. const request = require('request'); var httpAgent = require('socks5-http-client/lib/Agent');

  • node.js使用 http-proxy 创建代理服务器操作示例

    本文实例讲述了node.js使用 http-proxy 创建代理服务器操作.分享给大家供大家参考,具体如下: 代理,也称网络代理,是一种特殊网络服务,允许一个终端通过代理服务与另一个终端进行非直接的连接,这样利于安全和防止被攻击. 代理服务器,就是代理网络用户去获取网络信息,就是信息的中转,负责转发. 代理又分 正向代理 和 反向代理: 正向代理:帮助局域网内的用户访问外面的服务. 反向代理:帮助外面的用户访问局域网内部的服务. 一.安装 http-proxy npm install http-

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

    目录 什么是代理 Proxy的基本知识 handler对象方法 Proxy可以实现的 参考资料: 总结 什么是代理 MDN上的定义:Proxy(也就是代理) 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等). 官方的定义总是这么晦涩枯燥,那么究竟Proxy能做什么? 1.代理这个概念来自于元编程,就是一种你可以编写出一个可以读取.修改.分析.甚至生成新程序的程序.而JS可以通过Proxy和Reflect这两个对象来进行js元编程!! 2.Proxy就是代理,当我们不方便去访

  • 一篇文章搞懂JavaScript正则表达式之方法

    咱们来看看JavaScript中都有哪些操作正则的方法. RegExp RegExp 是正则表达式的构造函数. 使用构造函数创建正则表达式有多种写法: new RegExp('abc'); // /abc/ new RegExp('abc', 'gi'); // /abc/gi new RegExp(/abc/gi); // /abc/gi new RegExp(/abc/m, 'gi'); // /abc/gi 它接受两个参数:第一个参数是匹配模式,可以是字符串也可以是正则表达式:第二个参数是

  • 一篇文章搞懂Vue3中如何使用ref获取元素节点

    目录 前言 1.回顾 Vue2 中的 ref 2.Vue3 中 ref 访问元素 3.v-for 中使用 ref 4.ref 绑定函数 5.组件上使用 ref 总结 前言 虽然在 Vue 中不提倡我们直接操作 DOM,毕竟 Vue 的理念是以数据驱动视图.但是在实际情况中,我们有很多需求都是需要直接操作 DOM 节点的,这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点:ref 属性.ref 属性是 Vue2 和 Vue3 中都有的,但是使用方式却不大一样,这也导致了很多从 Vue2

  • 一篇文章看懂JavaScript中的回调

    前言 回调函数是每个前端程序员都应该知道的概念之一.回调可用于数组.计时器函数.promise.事件处理中. 本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步. 回调函数 首先写一个向人打招呼的函数. 只需要创建一个接受 name 参数的函数 greet(name).这个函数应返回打招呼的消息: function greet(name) { return `Hello, ${name}!`; } greet('Cristina'); // => 'Hello, Cristina!'

  • 一篇文章弄懂javascript中的执行栈与执行上下文

    一篇文章弄懂javascript中的执行栈与执行上下文

    前言 作为一个前端开发人员,弄清楚JavaScript的执行上下文有助于我们理解js中一些晦涩的概念,比如闭包,作用域,变量提升等等. 执行栈 执行栈用于存储代码执行期间创建的所有执行上下文.具有FILO接口,也被称为调用栈. 当JavaScript代码被运行的时候,会创建一个全局上下文,并push到当前执行栈.之后当发生函数调用的时候,引擎会为函数创建一个函数执行上下文并push到栈顶.引擎会先执行调用栈顶部的函数,当函数执行完成后,当前函数的执行上下文会被移除当前执行栈.并移动到下一个上下文

  • 一篇文章搞懂python的转义字符及用法

    什么是转义字符 转义字符是一个计算机专业词汇.在计算机当中,我们可以写出123 ,也可以写出字母abcd,但有些字符我们无法手动书写,比如我们需要对字符进行换行处理,但不能写出来换行符,当然我们也看不见换行符.像这种情况,我们需要在字符中使用特殊字符时,就需要用到转义字符,在python里用反斜杠\转义字符. 在交互式解释器中,输出的字符串用引号引起来,特殊字符用反斜杠\转义.虽然可能和输入看上去不太一样,但是两个字符串是相等的. 在python里,转义字符\可以转义很多字符,比如\n表示换行,

  • 一篇文章搞懂Python反斜杠的相关问题

    一篇文章搞懂Python反斜杠的相关问题

    大家在开发Python的过程中,一定会遇到很多反斜杠的问题,很多人被反斜杠的数量搞得头大. 首先我们写一段非常简单的Python代码,它的作用是把一个字段先转换为JSON格式的字符串,然后把这个字符串再转换为JSON格式的字符串: import json info = {'name': 'kingname', 'address': '杭州', 'salary': 99999} info_json = json.dumps(info) # 第一次转换以后,打印出来 print(info_json)

  • 一篇文章搞懂MySQL加锁机制

    一篇文章搞懂MySQL加锁机制

    目录 前言 锁的分类 乐观锁和悲观锁 共享锁(S锁)和排他锁(X锁) 按加锁粒度区分 全局锁 表级锁(表锁和MDL锁) 意向锁 行锁 间隙锁 next-key lock(临键锁) 加锁规则 死锁和死锁检测 总结 前言 在数据库中设计锁的目的是为了处理并发问题,在并发对资源进行访问时,数据库要合理控制对资源的访问规则. 而锁就是用来实现这些访问规则的一个数据结构. 在对数据并发操作时,没有锁可能会引起数据的不一致,导致更新丢失. 锁的分类 乐观锁和悲观锁 乐观锁: 对于出现更新丢失的可能性比较乐观

  • 一篇文章搞懂Go语言中的Context

    一篇文章搞懂Go语言中的Context

    目录 0 前置知识sync.WaitGroup 1 简介 2 context.Context引入 3 context包的其他常用函数 3.1 context.Background和context.TODO 3.2 context.WithCancel和 3.3 context.WithTimeout 3.4 context.WithDeadline 3.5 context.WithValue 4 实例:请求浏览器超时 5 Context包都在哪些地方使用 6 小结 0 前置知识sync.Wait

  • 一篇文章搞定JavaScript类型转换(面试常见)

    为啥要说这个东西?一道面试题就给我去说它的动机. 题如下: var bool = new Boolean(false); if (bool) { alert('true'); } else { alert('false'); } 运行结果是true!!! 其实啥类型转换啊,操作符优先级啊,这些东西都是最最基本的.犀牛书上有详细的介绍.但我很少去翻犀牛书的前5章... 比如说优先级那块儿,很多书都教育我们,"不用去背诵优先级顺序,不确定的话,加括号就行了."平常我们写代码时也确实这么做的

随机推荐