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

Posted bfwbfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6系列_13之Proxy进行预处理(简单学习)相关的知识,希望对你有一定的参考价值。

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方法拦截。

 

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

以上是关于ES6系列_13之Proxy进行预处理(简单学习)的主要内容,如果未能解决你的问题,请参考以下文章

es6之proxy学习

ES6系列_3之变量的解构赋值

ES6系列_5之数字操作

ES6系列_16之模块化操作

ES6系列_8之函数和数组

ES6 第十五节 用proxy进行预处理