es6proxy_0">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>