如果你学过我的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》。我这里只能算是入门课程,俗话说得好:“师傅领进门,修行靠个人”。

用Proxy进行预处理的更多相关文章

  1. ES6系列_13之Proxy进行预处理(简单学习)

    1.理解什么是预处理? 当我们在操作一个对象或者方法时会有几种动作,比如:在运行函数前初始化一些数据,在改变对象值后做一些善后处理.这些都算钩子函数,Proxy的存在就可以让我们给函数加上这样的钩子函 ...

  2. 重开ES6

    一.ES6的开发环境搭建 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法. 1.建立工程目录: 先建立一个项 ...

  3. es6 + 笔记整理

    1. ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数: const required = () => {throw new Error('Missing ...

  4. ES6学习之二

    本文的学习来自技术胖大神的教程:https://jspang.com/ 1扩展运算符和rest运算符 扩展运算符和rest运算符,它们都是…(三个点). 它们有很多相似之处,甚至很多时候不用特意去区分 ...

  5. 动态代理proxy与CGLib的区别

    什么是代理? 静态代理与动态代理 静态代理实例 JDK动态代理实例 CGLib 简介 CGLib 与JDK动态代理的区别 代理模式是Java中常见的一种模式,英文名字叫走Proxy或者Surrogat ...

  6. Proxy Pattern(Java动态代理和cglib的实现)

    代理模式:给某一个对象提供代理对象,由代理对象控制具体对象的引用. 代理,指的就是一个角色对表另一个角色采取行动,就生活中,一个红酒厂商,是不会直接把红酒零销给客户的,都是通过代理完成他的销售业务.而 ...

  7. php设计模式 Proxy (代理模式)

    代理,指的就是一个角色代表另一个角色采取行动,就象生活中,一个红酒厂商,是不会直接把红酒零售客户的,都是通过代理来完成他的销售业务.而客户,也不用为了喝红酒而到处找工厂,他只要找到厂商在当地的代理就行 ...

  8. 七个结构模式之代理模式(Proxy Pattern)

    定义: 给某一个对象提供一个代理或者占位符,并由代理类来控制对原对象的访问.代理对象在客户端和实际对象之间启到了中介作用,并且强调了代理类对原对象的控制作用.例如:安全代理.缓冲代理.远程代理等. 结 ...

  9. Java基础-设计模式之-代理模式Proxy

    代理模式是对象的结构模式.代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. 代理模式是常用的Java 设计模式,它的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理 ...

随机推荐

  1. 如何登录Sitecore CMS

    这是关于学习如何使用和开发Sitecore CMS的系列文章中的第一篇. 在使用Sitecore CMS之前,必须先登录.新Sitecore开发人员常见的一个问题是“我该在哪里登录?” 安装任何版本的 ...

  2. Spring源码阅读(六)

    这一讲分析spring bean属性注入代码populateBean,源码分析如下 /** * Populate the bean instance in the given BeanWrapper ...

  3. 20165305 实验二:Java面向对象程序设计

    2-1 参考 http://www.cnblogs.com/rocedu/p/6371315.html#SECUNITTEST 参考http://www.cnblogs.com/rocedu/p/67 ...

  4. hive的find_in_set函数

    集合查找函数: find_in_set语法: find_in_set(string str, string strList) 返回值: int说明: 返回str在strlist第一次出现的位置,str ...

  5. 【转】基于 Kylin 的推荐系统效果评价系统

    OLAP(联机分析处理)是数据仓库的主要应用之一,通过设计维度.度量,我们可以构建星型模型或雪花模型,生成数据多维立方体Cube,基于Cube可以做钻取.切片.旋转等多维分析操作.早在十年前,SQL ...

  6. Failed to start component [StandardEngine[Tomcat].StandardHost[localhost]]

    1.问题场景描述:一个maven项目启动时候,偶尔会报tomcat的这个错误(如图:) 随机报错,有时频率很高,要一直重新启动很多次可能还是启动不了,有时不报错.. 2.解决过程:网上各种寻找解决办法 ...

  7. c# 图像呈现控件PictureBox

    在c#中可以使用PictureBox控件来呈现图像,图像资源可以来自文件,也可以是存在内存中的位图对象.可以显示本地图像文件或来自网络的图片,也可以来自项目文件中的图像. 从URI加载图像文件. 调用 ...

  8. Codeforce 834A - The Useless Toy

    Walking through the streets of Marshmallow City, Slastyona have spotted some merchants selling a kin ...

  9. 使用GoldenGate初始化的两种方式

    在使用OGG开始增量数据的实时复制之前,一般需要对当前的存量数据进行初始化,如果是同构数据库,则可以使用数据库自带的工具完成,比如Oracle DB中的rman, expdp/impdp等. 其实og ...

  10. P4577 [FJOI2018]领导集团问题

    P4577 [FJOI2018]领导集团问题 我们对整棵树进行dfs遍历,并用一个multiset维护对于每个点,它的子树可取的最大点集. 我们遍历到点$u$时: 不选点$u$,显然答案就为它的所有子 ...