木子屋
 

标题: ES6学习笔记：Proxy对象

作者: dnawo

日期: 2022-04-10 06:29 PM

分类: 脚本语言

内容: 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

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.063 ms

标题: ES6学习笔记：Proxy对象

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.063 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.063 ms