博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js-ES6学习笔记-Proxy
阅读量:6558 次
发布时间:2019-06-24

本文共 1621 字,大约阅读时间需要 5 分钟。

1、Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。

2、Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

3、ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

4、一个技巧是将 Proxy 对象,设置到object.proxy属性,从而可以在object对象上调用。

var object = { proxy: new Proxy(target, handler) };

5、get方法用于拦截某个属性的读取操作。下面是一个拦截读取操作的例子。

var person = {  name: "张三"};var proxy = new Proxy(person, {  get: function(target, property) {    if (property in target) {      return target[property];    } else {      throw new ReferenceError("Property \"" + property + "\" does not exist.");    }  }});proxy.name // "张三"proxy.age // 抛出一个错误

6、set方法用来拦截某个属性的赋值操作。

let validator = {  set: function(obj, prop, value) {    if (prop === 'age') {      if (!Number.isInteger(value)) {        throw new TypeError('The age is not an integer');      }      if (value > 200) {        throw new RangeError('The age seems invalid');      }    }    // 对于age以外的属性,直接保存    obj[prop] = value;  }};let person = new Proxy({}, validator);person.age = 100;person.age // 100person.age = 'young' // 报错person.age = 300 // 报错

7、apply方法拦截函数的调用、call和apply操作。apply方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(this)和目标对象的参数数组。

var twice = {  apply (target, ctx, args) {    return Reflect.apply(...arguments) * 2;  }};function sum (left, right) {  return left + right;};var proxy = new Proxy(sum, twice);proxy(1, 2) // 6proxy.call(null, 5, 6) // 22proxy.apply(null, [7, 8]) // 30

 

转载地址:http://uzhco.baihongyu.com/

你可能感兴趣的文章
ViewFlipper(多图层控件)及手势识别,代码创建动画效果
查看>>
[编程题] 钓鱼比赛
查看>>
BLOB类型对应Long binary,CLOB对应Long characters
查看>>
sqlplus与shell互相传值的几种情况
查看>>
面向对象中特殊方法的补充、isinstance/issubclass/type、方法和函数、反射
查看>>
Cookie&Session
查看>>
Deferred Shading延迟渲染
查看>>
eas之设定table选择模式
查看>>
Android中显示进度的控件
查看>>
Lubuntu下安装Python3.6
查看>>
〖Linux〗zigbee实验之cc2430移植tinyos2.x的步骤(Ubuntu13.10)
查看>>
PHP(五)session和文件上传初步
查看>>
【JS库】URI.js
查看>>
XML 解析之 dom4j 解析器
查看>>
BZOJ4314 倍数?倍数!
查看>>
js获取json对象中的key和value,并组成新数组
查看>>
作诗2(玄学)
查看>>
UOJ #449. 【集训队作业2018】喂鸽子
查看>>
biztalk 2010 映射
查看>>
MongoDB数据库
查看>>