ES6-Proxy理解

2022-06-09 20:37:56 阅读：169 来源： 互联网

标签：ES6 target 对象 value propKey per 理解 Proxy name

Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

1.使用proxy(),首先要实例化proxy()对象

let per = new Proxy(person,{})

person：第一个参数代表的是要代理的对象

{}：第二个参数传入要定义的属性

2.定义get方法和set方法

get:function(target, propKey, recevier){
        console.log(11111, target, propKey);
        // return 'hello'
        return target[propKey]
    },

target：目标对象
propKey: 目标对象的属性
recevier：可选的实例化对象

set:function(target, propKey, value, recevier){
        //  value 设置的新值
        console.log(2222, value);
        target[propKey]  = value;
}

target：目标对象
propKey: 目标对象的属性

value：设置的新值

recevier：可选的实例化对象

2.代码示例

let person = {
    name:'李四',
    age:19,
    sex:'男'
}
//  通过 Proxy() 代理对象后，不能再操作原对象了，而是操作实例化对象
let per = new Proxy(person, {
   get:function(target, propKey, recevier){
        console.log(target, propKey);
    },
   set:function(target, propKey, value, recevier){

    }
})

console.log(person.name); //李四

不使用拦截器进行访问,是不生效的，因为这时拦截器没有进行拦截

3.下面使用代理对象per进行访问,这时拦截器就会生效

console.log(per.name);

输出结果：

{name: '李四', age: 19, sex: '男'} '

name'

通过 Proxy() 代理对象后，不能再操作原对象了，而是操作实例化对象

4.先对per.name进行设置，然后进行访问,会先执行set方法

//对set方法进行设置
set: function (target, propKey, value, recevier) {
    target[propKey] = value;
}

per.name = '张三';
console.log(per.name);

输出结果

张三

{name: '张三', age: 19, sex: '男'} 'name'

标签：ES6,target,对象,value,propKey,per,理解,Proxy,name
来源： https://www.cnblogs.com/Eamon-18/p/16361018.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ES6-Proxy理解