钩子函数

在运行函数前初始化一些数据,在改变对象值后做一些善后处理。这些都算钩子函数,Proxy的存在就可以让我们给函数加上这样的钩子函数,你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。

定义对象的方法

        var obj = {
            add:function(val){
                return val + 10;
            },
            name:"i am jie"
        }
        console.log(obj.add(100));
        console.log(obj.name)

声明Proxy

new Proxy({},{});

        var pro = new Proxy({
            add: function (val) {
                return val + 10;
            },
            name: "i am jie"
        },{
            get:function(target,key,property){
                console.log('come in get');
                return target[key]
            }
        })
        console.log(pro.name)

clipboard.png

get属性

  1. target:得到的目标值
  2. key:目标的key值,相当于对象的属性
  3. property:这个不太常用,

set属性

  1. target:目标值。
  2. key:目标的Key值。
  3. value:要改变的值。
  4. receiver:改变前的原始值。
        var pro = new Proxy({
            add: function (val) {
                return val + 10;
            },
            name: "i am jie"
        }, {
                get: function (target, key, property) {
                    console.log('come in get');
                    return target[key]
                },
                set:function(target,key,value,receiver){
                    console.log(`setting${key} = ${value}`);
                    return target[key] = value;
                }
            })
        console.log(pro.name);
        pro.name = "杰";
        console.log(pro.name)

clipboard.png


渣渣辉
1.3k 声望147 粉丝