ES6系列_13之Proxy进行预处理（简单学习）

Posted 2021-01-25 bfwbfw

1.理解什么是预处理？

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

Proxy进行预处理可以简单理解为：执行方法前，先预处理代码（预热工作）。

 

2.对比引入Proxy

我们先来回顾一下定义对象的方法。

var obj={
    add:function(val){
        return val+100;
    },
   name:"小红"
};
console.log(obj.add(100)); //200
console.log(obj.name);//小红

声明了一个obj对象，增加了一个对象方法add和一个对象属性name，然后在控制台进行了打印。

这个时候我们想在执行obj对象之前做一些事，我们应该怎么办呢？我们的es6提供的proxy就出场了。它给我们提供了预处理机制，在某件事情执行之前，先做一些预热工作，然后才真正执行我们的目标。

（1）Proxy的声明

我们用new的方法对Proxy进行声明，基本格式如下：

new Proxy（{},{}）;

需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。

将上述代码改进一下，完成在执行add方法前先在控制台输出一个"准备执行add方法"的文字。

var pro = new Proxy({
    add: function (val) {
        return val + 100;
    },
    name: ‘小红‘
}, {
        get:function(target,key,property){
            console.log(‘准备执行add方法‘);
            return target[key];
        }
    });
console.log(pro.name);

结果为：先输出：准备执行add方法，在输出小红

总结：相当于在方法调用前的钩子函数。

下面来看看get方法中的一些参数：

get属性：

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

• target：得到的目标值
• key：目标的key值，相当于对象的属性
• property：被获取的属性名。

 

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: ‘张三‘
}, {
    set:function(target,key,value,receiver){
        console.log(`setting ${key} = ${value}`);
        return target[key] = value;
    }
});
pro.name="李四";
console.log(pro.name); //李四

输出结果为:

 

set属性

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

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

3.apply的使用

方法的预处理。

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

let target = function () {
    return ‘doing target‘;
};
var handler = {
    apply(target, ctx, args) {
        console.log(‘do apply‘);
        return Reflect.apply(...arguments);
    }
}
var pro = new Proxy(target, handler);
console.log(pro());

apply方法可以接收三个参数，依次是目标对象，目标对象的上下文对象（this）和目标对象的参数数组。

上面代码中，每当执行proxy函数（直接调用或call和apply调用），就会被apply方法拦截。

 

 每天学习一点，加油。待续。。。。