ES6 Proxy详解-CSDN博客

es6：proxy

Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。
target 代表需要添加代理的对象，handler 用来自定义对象中的操作，比如可以用来自定义 set 或者 get 函数。
使用演示：

<!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>

实例代码

<!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>