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

Posted elva3zora

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6 第十五节 用proxy进行预处理相关的知识,希望对你有一定的参考价值。

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


第十五节 用proxy进行预处理

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

Proxy的应用可以使函数更加强大,业务逻辑更加清楚,而且在编写自己的框架或者通用组件时非常好用。

先回顾一下定义对象的方法。

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

};
console.log(obj.add(100));
console.log(obj.name);

声明了一个obj对象,增加了一个对象方法add和一个对象属性name,然后在控制台进行了打印。

声明Proxy

用new的方法对Proxy进行声明。

声明Proxy的基本形式:

new Proxy({},{});

第一个花括号就相当于我们方法的主体,后边的花括号就是Proxy代理处理区域,相当于我们写钩子函数的地方。

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

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: ‘I am Da0sy‘
}, {
        get:function(target,key,property){
            console.log(‘come in Get‘);
            return target[key];
        }
    });

console.log(pro.name);

技术图片

可以在控制台看到结果,先输出了come in Get。相当于在方法调用前的钩子函数。

get属性

get属性是在你得到某对象属性值时预处理的方法,他接收三个参数:

  • **target:**得到的目标值
  • **key:**目标的key值,相当于对象的属性
  • **property:**这个不太常用,用法还在研究中,还请大神指教。

set属性

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

  • **target:**目标值。
  • **key:**目标的Key值。
  • **value:**要改变的值。
  • **receiver:**改变前的原始值。
var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: ‘I am Da0sy‘
}, {
        get:function(target,key){
            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);

技术图片

apply的使用

apply的作用是调用内部的方法,它使用在方法体是一个匿名函数时。

get = function () {
    return ‘I am Da0sy‘;
};
var handler = {
    apply(target, ctx, args) {
        console.log(‘do apply‘);
        return Reflect.apply(...arguments);
    }
}

var pro = new Proxy(target, handler);

console.log(pro());

以上是关于ES6 第十五节 用proxy进行预处理的主要内容,如果未能解决你的问题,请参考以下文章

学习笔记第十五节课

centos mysql 实战 第十五节课

嵌入式Linux从入门到精通之第十五节:嵌入式系统简介

python学习第十五节(正则)

第十五节:pandas之concat()级联

第十五节——Map