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>
相关文章
|
4天前
ES6的Proxy到底是什么?
ES6的Proxy到底是什么?
14 2
|
6月前
|
监控 JavaScript 前端开发
|
3月前
|
JavaScript 前端开发
ES6新特性: Proxy
ES6新特性: Proxy
|
6月前
|
Python
proxy配置
proxy配置
|
6月前
|
缓存 安全 网络协议
什么是 Proxy?
什么是 Proxy?
195 0
|
6月前
es6中proxy如何使用
es6中proxy如何使用
69 0
|
6月前
|
前端开发 JavaScript 数据安全/隐私保护
ES6 什么是Proxy?什么是Promise?
ES6 什么是Proxy?什么是Promise?
76 0
|
6月前
|
JavaScript 前端开发
什么是Proxy?
什么是Proxy?
164 0
ES6 什么是proxy
ES6 什么是proxy
71 2
|
JavaScript 前端开发
【ES6】Proxy对象
【ES6】Proxy对象
111 0