0

0

ES6中Proxy和Reflect的介绍(代码示例)

不言

不言

发布时间:2018-10-26 16:07:31

|

2227人浏览过

|

来源于segmentfault

转载

本篇文章给大家带来的内容是关于es6中proxy和reflect的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

Proxy代理

{
    // 原始对象,或者真实数据,可以理解为供应商
    let obj = {
        time: '2018-10-05',
        name: 'lucy',
        age: 16,
        _is: true
    };

    // 代理对象,可以理解为代理商,对用户来说,直接操作monitor,而不能直接操作obj
    let monitor = new Proxy(obj, {
        // 拦截对象属性的读取
        get(target, key) {
            return target[key].replace('2018', '2019');
        },
        // 拦截对象设置属性
        set(target, key, value) {
            // 只让用户修改name属性,其他的不允许修改
            if (key === 'name') {
                return target[key] = value;
            } else {
                return target[key];
            }
        },
        // 拦截 key in object 操作
        has(target, key) {
            // 只暴露name属性,其他的都不暴露
            if (key === 'name') {
                return target[key];
            } else {
                return false;
            }
        },
        // 拦截delete
        deleteProperty(target, key) {
            // 属性名以_下划线开头的,就允许删除,否则不允许删除
            if (key.indexOf('_') > -1) {
                delete target[key];
                return true;
            } else {
                return target[key];
            }
        },
        // 拦截Object.keys Object.getOwnPropertySymbols, Object.getOwnPropertyNames
        ownKeys(target) {
            // 拦截了time属性
            return Object.keys(target).filter(item => item != 'time');
        }
    });
    console.log('get', monitor.time); // 2019-10-05
    monitor.time = '2020';
    monitor.name = 'can';
    console.log('set', monitor.time, monitor.name); // 2019-10-05 can
    console.log('has', 'name' in monitor, 'time' in monitor); // true false
    delete monitor.time;
    delete monitor._is;
    console.log(monitor); // Proxy {time: "2018-10-05", name: "can", age: 16}
    console.log('ownKeys', Object.keys(monitor)) // ["name", "age"]
}

Reflect反射

台讯电子企业网站管理系统  简繁全功能版
台讯电子企业网站管理系统 简繁全功能版

超级适合代理建设企业站点的企业源码,超方面实用!程序说明: 1.特色:简繁中文切换、产品展示系统、新闻发布系统、会员管理系统、留言本计数器、网站信息统计、强大后台操作 功能等; 2.页面包括:首页、企业介绍、滚动公告通知发布系统、企业新闻系统、产品展示系统、企业案例发布展示系 统、企业招聘信息发布系统、信息资源下载系统、在线定单系统、在线客服系统、在线留言本系统、网站调查投票系统、友情连接系统、会

下载

反射的是 object,Reflect的方法跟Proxy一样,都有get,set,has...

{
    let obj = {
        time: '2018-10-05',
        name: 'ahhh',
        age: 16,
        _is: true
    };
    console.log(Reflect.get(obj, 'time')); // 2018-10-05
    Reflect.set(obj, 'name', 'lxc');
    console.log(obj); // {time: "2018-10-05", name: "lxc", age: 16, _is: true}
    console.log(Reflect.has(obj, 'name')); // true
}

数据校验例子

{
    function validator(target, validator) {
        return new Proxy(target, {
            _validator: validator,
            // 对set进行拦截
            set(target, key, value, proxy) {
                if (target.hasOwnProperty(key)) {
                    let va = this._validator[key]; // 拿到_validator配置好的方法
                    if (!!va(value)) {
                        // 允许修改
                        return Reflect.set(target, key, value, proxy);
                    } else {
                        // 抛出异常
                        throw Error(`不能设置${key}到${value}`);
                    }
                } else {
                    throw Error(`${key} 不存在`);
                }
            }
        });
    }

    const personValidators = {
        name(val) {
            // 如果name设置为字符串,则允许修改,否则抛出异常
            return typeof val === 'string';
        },
        age(val) {
            // 如果age设置为数值类型并且大于18,则允许修改,否则抛出异常
            return typeof val === 'number' && val > 18;
        }
    };

    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
            // 返回了一个Proxy对象,用户操作的并不是Person这个实例,而是这个实例的代理对象
            return validator(this, personValidators);
        }
    }

    const person = new Person('haha', 18);
    console.log(person); // Proxy {name: "haha", age: 18}

    // person.name = 46; // 不能设置name到46
    // person.age = 20; // 不能设置age到12
    // person.number = 111; // number 不存在

    person.name = 'yoyo';
    person.age = 20;
    console.log(person); // Proxy {name: "yoyo", age: 20}
}

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

97

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

188

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

221

2025.12.24

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

23

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

6

2026.01.26

苹果官方查询网站 苹果手机正品激活查询入口
苹果官方查询网站 苹果手机正品激活查询入口

苹果官方查询网站主要通过 checkcoverage.apple.com/cn/zh/ 进行,可用于查询序列号(SN)对应的保修状态、激活日期及技术支持服务。此外,查找丢失设备请使用 iCloud.com/find,购买信息与物流可访问 Apple (中国大陆) 订单状态页面。

21

2026.01.26

npd人格什么意思 npd人格有什么特征
npd人格什么意思 npd人格有什么特征

NPD(Narcissistic Personality Disorder)即自恋型人格障碍,是一种心理健康问题,特点是极度夸大自我重要性、需要过度赞美与关注,同时极度缺乏共情能力,背后常掩藏着低自尊和不安全感,影响人际关系、工作和生活,通常在青少年时期开始显现,需由专业人士诊断。

3

2026.01.26

windows安全中心怎么关闭 windows安全中心怎么执行操作
windows安全中心怎么关闭 windows安全中心怎么执行操作

关闭Windows安全中心(Windows Defender)可通过系统设置暂时关闭,或使用组策略/注册表永久关闭。最简单的方法是:进入设置 > 隐私和安全性 > Windows安全中心 > 病毒和威胁防护 > 管理设置,将实时保护等选项关闭。

5

2026.01.26

2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】
2026年春运抢票攻略大全 春运抢票攻略教你三招手【技巧】

铁路12306提供起售时间查询、起售提醒、购票预填、候补购票及误购限时免费退票五项服务,并强调官方渠道唯一性与信息安全。

29

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号