es6:proxy

简介: es6:proxy

es6:proxy

  1. Proxy 是 ES6 中新增的功能,它可以用来自定义对象中的操作。
  2. target 代表需要添加代理的对象,handler 用来自定义对象中的操作,比如可以用来自定义 set 或者 get 函数。
  3. 使用演示:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>proxy</title>
</head>
<body>
   <script>
       const person  = { name:'zhang',age:22};
       const personProxy = new Proxy(person,{
           get(target,key){
               console.log(target,key);
               return target[key].toUpperCase();
           },
           set(target,key,value){
               if(typeof value === 'string'){
                   target[key] = value.trim();
               }
           }
       });//target:要代理的目标对象;handler:对象,包含了我们重写的一些操作
       personProxy.name = 'codecasts'
   </script>
</body>
</html>
  1. 实例代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>实例</title>
</head>
<body>
  <script>
      const phonerHandler = {
       set(target,key,value){
           target[key] = value.match(/[0-9]/g).join('');
       },
       get(target,key){
           return target[key].replace(/(\d{3})(\d{4})(\d{4})/,'$1-$2-$3');
       }
      }
      const phoneNumber = new Proxy({},phonerHandler);
       // phoneNumber.home = '181 9803 1039'
       // "181 9803 1039"
       // phoneNumber.work = '191 9252 1039'
       // "191 9252 1039"
       // phoneNumber
       // Proxy {home: "18198031039", work: "19192521039"}
       // phoneNumber.work
       // "191-9252-1039"
       // phoneNumber.home
       // "181-9803-1039"
   </script>
</body>
</html>
相关文章
|
消息中间件 存储 算法
【软件设计师备考 专题 】操作系统的内核(中断控制)、进程、线程概念
【软件设计师备考 专题 】操作系统的内核(中断控制)、进程、线程概念
523 0
|
网络协议 算法 网络性能优化
TCP滑动窗口、流量控制及拥塞控制详解
TCP滑动窗口、流量控制及拥塞控制详解
|
Linux
mount 挂载 NTFS 格式U盘
【1月更文挑战第4天】
1836 1
|
7月前
|
存储 消息中间件 分布式计算
Hologres实时数仓在B站游戏的建设与实践
本文介绍了B站游戏业务中实时数据仓库的构建与优化过程。为满足日益增长的数据实时性需求,采用了Hologres作为核心组件优化传统Lambda架构,实现了存储层面的流批一体化及离线-实时数据的无缝衔接。文章详细描述了架构选型、分层设计(ODS、DWD、DIM、ADS)及关键技术挑战的解决方法,如高QPS点查、数据乱序重写等。目前,该实时数仓已广泛应用于运营分析、广告投放等多个场景,并计划进一步完善实时指标体系、扩展明细层应用及研发数据实时解析能力。
Hologres实时数仓在B站游戏的建设与实践
|
消息中间件 Prometheus 监控
基于 RocketMQ Prometheus Exporter 打造定制化 DevOps 平台
本文将对 RocketMQ-Exporter 的设计实现做一个简单的介绍,读者可通过本文了解到 RocketMQ-Exporter 的实现过程,以及通过 RocketMQ-Exporter 来搭建自己的 RocketMQ 监控系统。RocketMQ 在线可交互教程现已登录知行动手实验室,PC 端登录 start.aliyun.com 即可直达。
基于 RocketMQ Prometheus Exporter 打造定制化 DevOps 平台
|
11月前
|
小程序 开发者
鸿蒙原生开发手记:04-一个完整元服务案例
鸿蒙原生开发手记:04-一个完整元服务案例
648 4
鸿蒙原生开发手记:04-一个完整元服务案例
|
10月前
|
存储 SQL 监控
Dynamic Table快速入门
本次分享的主题是Dynamic Table快速入门,由Hologres PD 梅酱分享。今天的分享分为三个部分。首先,第一部分为Table的基本概念;第二部分进行Table的实操;第三部分为一些使用Table的建议和最佳实践。
411 12
|
存储 Java 数据安全/隐私保护
Spring Boot中实现邮箱登录/注册接口
Spring Boot中实现邮箱登录/注册接口
|
SQL Arthas 缓存
使用篇丨链路追踪(Tracing)其实很简单:请求轨迹回溯与多维链路筛选
本章我们将以业务 Owner(小帅)的视角,逐步了解分布式链路追踪的各种基础用法:小到单次用户请求的异常根因诊断,大到全局系统的强弱依赖梳理,分布式链路追踪都能给予确定性答案。
20294 98
使用篇丨链路追踪(Tracing)其实很简单:请求轨迹回溯与多维链路筛选
|
SQL 存储 关系型数据库
在 Postgres 中使用 RIGHT
【8月更文挑战第7天】
281 0
在 Postgres 中使用 RIGHT