• 用Proxy进行预处理


    如果你学过我的Vue的课程,一定会知道钩子函数,那如果你刚接触我的博客,并没有学习Vue,那我这里给你简单解释一下什么是钩子函数。当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一些数据,
    在改变对象值后做一些善后处理。这些都算钩子函数,Proxy的存在就可以让我们给函数加上这样的钩子函数,你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。Proxy的应用可以
    使函数更加强大,业务逻辑更加清楚,而且在编写自己的框架或者通用组件时非常好用。Proxy涉及的内容非常多,那这里我就带你入门并且介绍给你后续的学习方法。
    在学习新知识之前,先来回顾一下定义对象的方法。
    var obj={
        add:function(val){
            return val+10;
        },
        name:'I am Jspang'
        
    };
    console.log(obj.add(100));
    console.log(obj.name);
    声明了一个obj对象,增加了一个对象方法add和一个对象属性name,然后在控制台进行了打印。

    声明Proxy

    我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。
    new Proxy({},{});
    需要注意的是这里是两个花括号,第一个花括号就相当于我们方法的主体,后边的花括号就是Proxy代理处理区域,相当于我们写钩子函数的地方。
    现在把上边的obj对象改成我们的Proxy形式。
    var pro = new Proxy({
        add: function (val) {
            return val + 10;
        },
        name: 'I am Jspang'
    }, {
            get:function(target,key,property){
                console.log('come in Get');
                return target[key];
            }
        });
     
    console.log(pro.name);
    可以在控制台看到结果,先输出了come in Get。相当于在方法调用前的钩子函数。

    get属性

    get属性是在你得到某对象属性值时预处理的方法,他接受三个参数
      target:得到的目标值
      key:目标的key值,相当于对象的属性
      property:这个不太常用,用法还在研究中,还请大神指教。

    set属性

    set属性是值你要改变Proxy属性值时,进行的预先处理。它接收四个参数。
        target:目标值。
        key:目标的Key值。
        value:要改变的值。
        receiver:改变前的原始值。
    var pro = new Proxy({
        add: function (val) {
            return val + 10;
        },
        name: 'I am Jspang'
    }, {
            get:function(target,key){
                console.log('come in Get');
                return target[key];
            },
            set:function(target,key,value,receiver){
                console.log(`    setting ${key} = ${value}`);
                return target[key] = value;
            }
     
        });
     
        console.log(pro.name);
        pro.name='技术胖';
        console.log(pro.name);

    apply的使用

    apply的作用是调用内部的方法,它使用在方法体是一个匿名函数时。看下边的代码。
    let target = function () {
        return 'I am JSPang';
    };
    var handler = {
        apply(target, ctx, args) {
            console.log('do apply');
            return Reflect.apply(...arguments);
        }
    }
     
    var pro = new Proxy(target, handler);
     
    console.log(pro());
    其实proxy的知识是非常多的,这里我建议看阮一峰大神的《ES6》。我这里只能算是入门课程,俗话说得好:“师傅领进门,修行靠个人”。
  • 相关阅读:
    区间dp_学习笔记
    状态压缩dp_学习笔记
    第十一届蓝桥杯C/C++ J题网络分析(带权并查集水题)
    状态机dp学习笔记_AcWing
    洛谷P4052 [JSOI2007]文本生成器(AC自动机+DP)
    洛谷P5840 [COCI2015]Divljak (AC自动机+fail树上dfs序+树上差分线段树维护)
    洛谷P3401 [USACO12JAN]Video Game G(AC自动机+记忆化搜索)
    HDU3613 Best Reward (exKMP/manacher)
    洛谷P2375 [NOI2014]动物园(KMP+倍增优化)
    ICPC2017南宁站题解(A,E,F,H,I,J,L,M)
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7217133.html
Copyright © 2020-2023  润新知