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>