本节知识点
- 钩子函数
钩子函数
- 比如我们在函数运行前需要初始化一些数据，在改变对象的值以后需要做一些善后处理.这些可以理解为钩子函数
- 钩子函数简单理解为在执行方法前预处理一些代码,也可以理解为函数或者对象的生命周期
proxy
proxy的应用可以使得函数更加强大业务逻辑更加清楚，而且在编写自己的框架或者通用组件的时候很好用.proxy涉及的内容非常多。下面讲述几个
在学习proxy之前，我们先来看看对象的定义方法
var obj = {
add:function(val){
return val+10
},
name:"I am Hello"
};
console.log(obj.add(10));
console.log(obj.name);
(一) 声明proxy
new Proxy({},{})
需要注意的就是这里是两个花括号，第一个花括号就是我们的主体函数，第二个花括号就是Proxy待处理的区域,相当于我们写钩子函数的地方,在执行主函数前必须要执行钩子函数
现在我们把上边的obj对象改成我们的Proxy形式
let Pro = new Proxy({
add:function (val) {
return val+10
},
name: "今天天气不错"
},{
get:function(target,key)
{
console.log("输出之前打印");
if(key in target)
{
return target[key];
}else
{
throw new Error("对不起没有这个属性");
}
}
});
console.log(Pro.name);
console.log(Pro.add(10));
console.log(Pro.aaaa);
输出结果就是
2018-02-04_124355.jpg
- get 属性
get属性就是在你得到对象属性值时候预处理的方法，他接受2个参数
(1) target 就是主函数
(2) key 就是主函数的属性。
- set属性
set属性是当你要改变主函数里面的值时候，他要进行的预处理函数
let Pro = new Proxy({
add:function (val) {
return val+10
},
name: "今天天气不错"
},{
get:function(target,key)
{
console.log("输出之前打印");
if(key in target)
{
return target[key];
}else
{
throw new Error("对不起没有这个属性");
}
},
set:function(target,key,value,receiver){
console.log(`${key}=${value}`);
}
});
Pro.name= "今天天气太差了";
console.log(Pro.name);
- target 就是主函数
- key 就是键位
- value 就是要改变的值
- receiver 就是改变前的原始值
