ES6 Proxy的简单使用

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

new Proxy（{},{}）;

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

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

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

get属性

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

target：得到的目标值
key：目标的key值，相当于对象的属性
property：这个不太常用。

set属性

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

target:目标值。
key：目标的Key值。
value：要改变的值。
receiver：改变前的原始值。

apply的使用

apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码。

target = function () {return 'I am mayouchen';
};
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的简单使用相关推荐

ES6 Proxy 性能之我见
ES6 Proxy 性能之我见本文翻译自https://thecodebarbarian.com/thoughts-on-es6-proxies-performance Proxy是ES6的一个强力 ...
Proxy代理简单使用
Proxy代理简单使用使用Proxy实现织入额外代码 1.需要先定义接口和被代理类: public interface UserBean {String getUser();String print ...
深入实践 ES6 Proxy Reflect
原文: https://zhuanlan.zhihu.com/p/60126477 引言 Vue中的数据绑定 Vue作为前端框架的三驾马车之一,在众多前端项目中具有极其重要的作用. Vue中具有一个重 ...
ES6 Proxy 和 Reflect 的理解
Vue中的数据绑定 ps:观察者模式 (下面有重点) Vue作为前端框架的三驾马车之一,在众多前端项目中具有极其重要的作用. Vue中具有一个重要的功能点--"数据绑定".使用者无 ...
es6 --- Proxy的属性(get、set除外)
apply(): 拦截函数的调用.call和apply操作 var target = function () { return 'I am the target';}; var handler = { ...
es6 --- Proxy实例的get方法
写一个拦截函数,访问目标对象不存在属性时,会抛出不存在该属性的错误如果存在该属性时,就返回其值. var person = {name: "张三" };var proxy = n ...
第十二节：ES6 Proxy代理和去银行存款有什么关系？
ES:给开发者提供了一个新特性:Proxy,就是代理的意思.也就是我们这一节要介绍的知识点. 以前,ATM还没有那么流行的时候(暴露年纪),我们去银行存款或者取款的时候,需要在柜台前排队,等柜台工作人 ...
ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
es6 Proxy 简介
Proxy 简介 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy ...

ES6 Proxy的简单使用

ES6 Proxy的简单使用相关推荐

最新文章

热门文章