脚本语言 订阅所有【脚本语言】的日志

ES6学习笔记：Proxy对象

编辑:dnawo 日期:2022-04-10

字体大小: 小 中 大
Proxy原意是代理，可以理解成，在目标对象之前架设一层拦截，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy对象创建语法：

复制内容到剪贴板程序代码 程序代码
let proxy = new Proxy(target, handler);

target表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。当不设置拦截时，访问proxy和target是一样的：

复制内容到剪贴板程序代码 程序代码
let target = {};
let proxy = new Proxy(target, {});

target.name = '张三';
console.log(proxy.name); //张三

接下来，我们添加拦截看下效果：

复制内容到剪贴板程序代码 程序代码
let target = {name: '张三', age: 30};
let proxy = new Proxy(target, {
    get:function(target, propKey) {
        if(propKey in target){
            if(propKey == 'name'){
                return `hello, ${target[propKey]}`;
            }else if(propKey == 'age'){
                return  `${target[propKey]} years old.`;
            }
        }else{
            throw `Prop name ${propKey} does not exist.`
        }            
    },
    set:function(target, propKey, value){
        if(propKey in target){
            if(propKey == 'age'){
                if(value>=1 && value<=100){
                    target[propKey] = value;
                }else{
                    throw 'The age seems invalid.'
                }
            }else{
                target[propKey] = value;
            }
        }else{
            throw `Prop name ${propKey} does not exist.`
        }      
    }
});

console.log(proxy.name); //hello, 张三
console.log(proxy.age); //30 years old.
console.log(proxy.sex); //err
proxy.age = 120; //err
proxy.sex = 1; //err


上一篇: ES6学习笔记：Promise对象
下一篇: ES6学习笔记：Iterator接口和Generator函数
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 757
发表评论
请登录后再发表评论！