第十三节、用 Proxy 进行预处理

相信大家对钩子函数会有一定的了解，这里简单解释一下什么是钩子函数。当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，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代理处理区域，相当于我们写钩子函数的地方。

get 属性

get 属性是你在得到某个对象属性值时预处理的方法，他接受三个参数

• targer：得到的目标值
• key：目标的 key 值，相当于对象的属性
• property ：这个不太常用

set 属性

set 属性是指你要改变 Proxy 属性值时，进行的预先处理。它接收四个参数：

• target：目标值
• key：目标的 key 值
• value：要改变的值
• receiver：改变前的原始值

var pro = new Proxy({
    add:function (val) {
        return val+10;
    },
    name:'proxy'
},{
    get:function (target,key,property) {
        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='angle';
console.log(pro.name);

apply 的使用

apply 的作用是调用内部的方法，它使用在方法体是一个匿名函数时。

let target = function () {
    return 'proxy';
};
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》。这里只能算是入门课程。