ES6 Proxy

最新推荐文章于 2024-04-15 06:00:00 发布

五仁卤鸡翅

最新推荐文章于 2024-04-15 06:00:00 发布

阅读量154

点赞数

分类专栏： ES6 文章标签： javascript es6

本文链接：https://blog.csdn.net/MoonNight608/article/details/104329729

版权

ES6 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

介绍

本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记

Proxy

Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。这个词的原理为代理，在这里可以表示由它来“代理”某些操作，译为“代理器”。

proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截

var proxy = new Proxy(target, handler);

new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为

var target = {
   name: 'poetries'
 };
 var logHandler = {
   get: function(target, key) {
     console.log(`${key} 被读取`);
     return target[key];
   },
   set: function(target, key, value) {
     console.log(`${key} 被设置为 ${value}`);
     target[key] = value;
   }
 }
 var targetWithLog = new Proxy(target, logHandler);
 
 targetWithLog.name; // 控制台输出：name 被读取
 targetWithLog.name = 'others'; // 控制台输出：name 被设置为 others
 
 console.log(target.name); // 控制台输出: others

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proxy</title>
</head>
<body>
<script>
const person={
    name: 'Lavarist',
    age: 2000
}
const personProxy = new Proxy(person,{
    // get方法
    // target ：对象
    // key: 对象中的属性
    get(target,key){
        console.log('some ask for',targer,key);
        return target[key].upperCase(); 
    }
    set(target,key,value){
        if (typeof(value) === 'string'){
            target[key] = value;
        }
    }
})


// 控制台输出内容如下:
// some ask for person{name: 'Lavarist',age: 2000} name
personProxy.name   // 返回值 为LAVARIST


// 将对象中的name值设置为'codeCasts'
personProxy.name = 'codeCasts';

// 将love属性值设置为 I love codeCasts
personProxy.love='I love codeCasts';

// 获取love值
personProxy.love // 输出I LOVE CODECASTS
</script>

</body>
</html>

Proxy example:
1、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proxy example</title>
</head>
<body>
<script>
const phoneHandler={
    // 对存入的属性值进行处理
    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({},phoneHandler);

// 使用proxy设置对象的属性值
phoneNumber.home = '131 1881 2281';
phoneNumber.work = '159 155 15511';


phoneNumer // 输出{ home: '131 1881 2281',work: '159 155 15511'}

// 获取对象的属性值
phoneNumer.home // 
phoneNumber.work //
</script>
</body>
</html>

2、
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序可使用 for…in 循环遍历该对象时返回的顺序一致。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proxy example</title>
</head>
<body>
<script>

// 使用proxy,对对象进行封装，当对对象的属性值进行设定时，不论使用属性
// 值得大小写，都可以设置成功
const safeHandler={
    set(target,key,value){
    // 去除对象得属性值，并将其转换成小写，同时于传入的属性值得小写
    // 进行比较，是否存在相同的属性值，如果两者的小写都相同，则可以
    // 设置成功
    const likekey = Object.keys(target).find(k=>k.toLowerCase()
    === key.toLowerCase());
       
    if(!(key in target) && likekey){
        throw new Error("opos!")
    }
    
    target[key] = value;
    }
    
    
}
const safetyProxy=new Proxy({id:2},safeHandler)
// 使用id得大写也可以设置
safetyProxy.ID = 5;
// 使用这种设置方式也可以设定对象属性值
safetyProxy.Id = 5;

</script>
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 Proxy

目录介绍Proxy介绍本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记ProxyProxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一层拦截，外部所有的访问都必须先通过这层拦截，因此提供了一种机制，可以对外部的访问进行过滤和修改。这个词的原理为代理，在这里可以表示由它来“代理”某些操作，译为“代理器”。proxy在目标对象的外层搭建了一层拦截，外...
复制链接

扫一扫

专栏目录