proxy（代理）用法

1、什么是Proxy?

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

语法

let p = new Proxy(target, handler);

参数

target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数
proxy:是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的

示例，一个简单的代理:

let test = {name: "小明"};test = new Proxy(test, {get(target, key) {console.log('获取了getter属性');return target[key];}});console.log(test.name);

上方的案例，我们首先创建了一个test对象，里面有name属性，然后我们使用Proxy将其包装起来，再返回给test，此时的test已经成为了一个Proxy实例，我们对其的操作，都会被Proxy拦截。当我们对test对象查询时，就会进入我们写好的get函数，其他操作都是如此
使用set来拦截一些操作，并将get返回值更改

let xiaohong = {name: "小红",age: 15};xiaohong = new Proxy(xiaohong, {get(target, key) {let result = target[key];//如果是获取 年龄 属性，则添加 岁字if (key === "age") result += "岁";return result;},set(target, key, value) {if (key === "age" && isNaN(value)) {throw Error("age字段必须为Number类型");}return Reflect.set(target, key, value);}});console.log(`我叫${xiaohong.name}  我今年${xiaohong.age}了`);xiaohong.age = "aa";

get 拦截函数中添加了一个判断，如果是取 age 属性的值，则在后面添加岁。在 set 拦截函数中判断了如果是更改 age 属性时，类型不是 Number则抛出错误。

扩展使用代理实现双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p><span>年龄：</span><input type="text" id="age" value="13"></p>
</body>
<script>const spanAge = document.getElementById("age");let user = {age:spanAge.value}let newuser = new Proxy(user,{set(target, key, value){if (key === "age" && isNaN(value)) {throw Error("age字段必须为Number类型");}spanAge.value = value;return Reflect.set(target, key, value);}})spanAge.onblur = function(){newuser.age = document.getElementById("age").value;console.log(user);}console.log(user)
</script>
</html>

proxy（代理）用法相关推荐

Proxy代理和 Reflect反射(反射的是obj)的概念
1. Proxy代理 // 供应商(原始对象)let obj = {time:'2018-01-03',name:'net',_r: "123"}// 创建代理商,传入obj数据l ...
Proxy代理的作用
Proxy代理的作用: Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Pro ...
webpack-dev-server实现静态资源加载和proxy代理
文章目录 webpack专辑 webpack Dev Server 配置选项 1.静态资源访问 2.Proxy 代理小结 webpack专辑如何使用webpack实现模块化打包? 如何通过Load ...
豌豆夹Redis解决方案Codis源码剖析：Proxy代理
豌豆夹Redis解决方案Codis源码剖析:Proxy代理 1.预备知识 1.1 Codis Codis就不详细说了,摘抄一下GitHub上的一些项目描述: Codis is a proxy base ...
es6的Proxy(代理)
es6的Proxy(代理) Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作.一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处 //代理: var ...
分布式系统——zabbix 用 onealert实现报警、agent主动模式、proxy代理
实验环境物理机: rhel 7.3系统--172.25.54.250 server1:rhel 7.3系统--172.25.54.1 server2:rhel 6.5系统--172.25.54.11 ...
[网络安全自学篇] 三.Burp Suite安装配置、Proxy基础用法及流量分析示例
最近开始学习网络安全相关知识,接触了好多新术语,感觉自己要学习的东西太多,真是学无止境,也发现了好几个默默无闻写着博客.做着开源的大神.接下来系统分享一些网络安全的自学笔记,希望读者们喜欢. 上一篇文 ...
关于Vue 3.0 的改进 Proxy 代理实现数据驱动视图
Vue 3.0 中使用了 Proxy 对象代理进行拦截实现了数据绑定视图的驱动操作.弥补了vue2.0中的局限,比如属性删除增加监听.对数组基于下标的修改.长度变化等等. 参考一下网上流传的机制图 P ...
第十二节：ES6 Proxy代理和去银行存款有什么关系？
ES:给开发者提供了一个新特性:Proxy,就是代理的意思.也就是我们这一节要介绍的知识点. 以前,ATM还没有那么流行的时候(暴露年纪),我们去银行存款或者取款的时候,需要在柜台前排队,等柜台工作人 ...
vue跨域问题：proxy代理跨域
前端跨域,本地跨域,vue项目跨域问题疑问1: 前端开发中解决浏览器的跨域问题 (推荐阅读) 什么是跨域? 为什么要跨域? 解决"跨域"的五种常见方式: 1. JSONP 2. ...

proxy（代理）用法

1、什么是Proxy?

语法

参数

扩展使用代理实现双向绑定

proxy（代理）用法相关推荐

最新文章

热门文章

proxy（代理）用法

1、什么是Proxy?

语法

参数

扩展 使用代理实现双向绑定

proxy（代理）用法相关推荐

最新文章

热门文章

扩展使用代理实现双向绑定