ES6 - 用Proxy进行预处理

最新推荐文章于 2024-03-13 11:49:24 发布

原创最新推荐文章于 2024-03-13 11:49:24 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

javascript高级 es5/es6 专栏收录该内容

43 篇文章

订阅专栏

本文介绍JavaScript中Proxy对象的应用，重点讲解如何利用Proxy增强对象和函数的生命周期管理，通过预处理机制实现属性获取与设置的自定义逻辑。

代理的意思

// proxy 代理 增强对象和函数(方法) 生命周期(钩子函数) 预处理
let obj = {
    add:function(val){
        return val + 100;
    },
    name:'I am Js'
}

let pro = new Proxy({
    // 对象体
    add:function(val){
        return val + 100;
    },
    name:'I am Js'
},{
    // 预处理机制
    // get set apply
    get:function(target,key,property){  //  在取得一个属性的时候进行预先处理
        console.log('come in Get');
        console.log(target);
        return target[key];
    },
    // value新值，receiver原始值
    set:function(target,key,value,receiver){                 //  改变值前预先处理
        console.log(`setting ${key} = ${value}`);
        return target[key] = value + '111';
    },
});

console.log(pro.name);
pro.name = '脚本';
console.log(pro.name);

// apply

这里写图片描述

let target = function(){
    return 'I am Js';
}

//  预处理
let handler = {
    // 方法预处理
    apply(target,ctx,args){
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}

let pro = new Proxy(target,handler);

console.log(pro());