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 进行预处理(简单学习)
来源: http://www.bubuko.com/infodetail-2876441.html