ES6学习-用Proxy进行预处理

1.概述

在了解钩Proxy之前，首先需要知道什么是钩子函数。所谓钩子函数，即当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数。Proxy的存在就可以让我们给函数加上这样的钩子函数，Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作。你也可以理解为在 执行方法前预处理一些代码。类似vue或react的生命周期。

2.定义

在学习Proxy之前，我们先定义一个对象。

var obj={
    add:function(val){
        return val+10;
    },
    name:'I am Proxy'
    
};
console.log(obj.add(10)); //20
console.log(obj.name); //I am Proxy

接着我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。

new Proxy({},{});

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

现在把上边的obj对象改成我们的Proxy形式。

var obj={
    add:function(val){
        return val+10;
    },
    name:'I am Proxy'
    
};

var pro = new Proxy(obj, {
        get:function(target,key,property){
            console.log('我先执行');
            console.log(target,key); 
            return target[key];
        }
    });
 
console.log(pro.name); 


//我先执行
 //obj对象,name
//I am Proxy

可以在控制台看到结果，先输出了我先执行。相当于在方法调用前的钩子函数。

属性-get（获取属性值前的预处理）

通过上例，我们把对象放进Proxy里面，那我们想要获取里面的内容怎么办，这就用到上例的get函数了。

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

target：目标对象（这里即obj）
key：调用的对象的属性（这里因为调用pro.name,所以这里为name）
property：Proxy对象，这个不太常用，用法还在研究中。

注：1.get必须返回target[key]，即属性值，否则调用时是得不到值，为undefined

属性-set（改变属性值前的预处理）

现在在得到属性值前进行输出，我先执行，那我要修改属性值前进行一些预处理操作怎么办？

var obj={
    add:function(val){
        return val+10;
    },
    name:'I am Proxy'
    
};

var pro = new Proxy(obj, {
        get:function(target,key,property){
            console.log('获取值');
            return target[key];
        },
        set:function(target,key,value,receiver){
            console.log(`改变 ${key} = ${value}`);
            return target[key] = value;
        }
    });


console.log(pro.name); //获取值
                        // I am Proxy
   
pro.name='我是预处理';  //改变 name = 我是预处理

console.log(pro.name);//获取值
                        // 我是预处理

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

target:目标对象（这里即obj）
key：调用的对象的属性（这里因为调用pro.name,所以这里为name）
value：要改变的值。
receiver：Proxy对象（属性值改变前的对象），这个不太常用，用法还在研究中。

2.注：set必须返回target[key]，即属性值，若不返回，和get不一样。set调直接会报错而get为undefined

3.注：调用对象属性会执行get函数（这里console.log(pro.name)会调用get函数）；

改变对象属性值会执行set函数（这里pro.name='我是预处理'会调用set函数）；

ES6学习-用Proxy进行预处理