JS-对象-3

2021-03-08

Proxy语法介绍

/* */
/* const p = new Proxy(target, handler); */
let user = { name:'li',age:12 };
let p = new Proxy(user,{
    get(obj,prop){/* 代理user getter :
    其中的两个参数：obj:被代理的数据，prop:当用户获取obj的某属性时prop就是这个属性名*/
        return obj[prop];
    },
    set(obj,prop,value){
        /* setter 比get多出的一个参数：value:要给属性设置的值 */
        obj[prop] = value;
    }
})
p.name;//"li"
p.name='ll'

在Proxy的构造函数中有两个参数

target
要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler
一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

使用代理控制函数

function sum(a,b){
    return a+b;
}
/* handler.apply() 方法用于拦截函数的调用 */
let handler = {
    /* 三个参数：target目标对象（函数）thisArg被调用时的上下文对象 argumentsList被调用时的参数数组*/
    apply(target,thisArg,argumentsList){
        /* 在此处进行要代理的行为 */console.log(`${target}-${thisArg}-${argumentsList}`);
    }
}
let p = new Proxy(sum,handler);
p(1,2);//输出函数，undefined，1,2
p.apply(window,[1,2]);//此时thisArg：window

使用代理控制数组

let lesson = [
    { title:"响应式布局 JS",price:200 },
    { title:"服务器渲染",price:200 },
    { title:"响应式布局2 JS",price:220 },
    { title:"响应式布局3 JS",price:300 },
]

let p = new Proxy(lesson,{
    get(array,index){
        const title = array[index].title;
        console.log(title);
    }
});
p[0];//响应式布局 JS