JavaScript中的Proxy对象


Posted in Javascript onNovember 27, 2020

Js中Proxy对象

Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。

语法

const proxy = new Proxy(target, handler);
  • target: 要使用Proxy包装的目标对象,可以是任何类型的对象,包括原生数组,函数,甚至另一个代理。
  • handler: 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理proxy的行为。

描述

Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改。这个词的原理为代理,在这里可以表示由它来代理某些操作,译为代理器。

var target = {a: 1};
var proxy = new Proxy(target, {
  set: function(target, key, value, receiver){ 
    console.log("watch");
    return Reflect.set(target, key, value, receiver);
  },
  get: function(target, key, receiver){ 
    return target[key];
  }
});
proxy.a = 11; // watch
console.log(target); // {a: 11}

Object.defineProperty是用于监听属性,而Proxy是监听整个对象,通过调用new Proxy(),可以创建一个代理用来替代另一个对象被称为目标,这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当作同一个对象来对待。代理允许拦截在目标对象上的底层操作,而这原本是Js引擎的内部能力,拦截行为使用了一个能够响应特定操作的函数,即通过Proxy去对一个对象进行代理之后,我们将得到一个和被代理对象几乎完全一样的对象,并且可以从底层实现对这个对象进行完全的监控。

// 常见的一道面试题 实现 a===1&&a===2&&a===3 为true

// Object.defineProperty 定义的是属性
// 可以实现对于题目的要求
var _a = 0;
Object.defineProperty(window, "a", {
  get:function(){
    return ++_a;
  }
})
console.log(a===1 && a===2 && a===3); // true

// proxy 代理的是对象 
// 因此在调用时实际与题目要求并不太相符
// 但同样也是一种实现方式
var _a = 0;
var proxy = new Proxy(window, {
  set: function(target, key, value, receiver){ 
    return Reflect.set(target, key, value, receiver);
  },
  get: function(target, key, receiver){
    if(key === "a") return ++_a;
    else return window[key];
  }
});
console.log(proxy.a===1 && proxy.a===2 && proxy.a===3); //true

方法

Proxy.revocable()

Proxy.revocable(target, handler)
Proxy.revocable()方法可以用来创建一个可撤销的代理对象,其返回一个包含了代理对象本身和它的撤销方法的可撤销Proxy对象。

  • target: 将用Proxy封装的目标对象,可以是任何类型的对象,包括原生数组,函数,甚至可以是另外一个代理对象。
  • handler: 一个对象,其属性是一批可选的函数,这些函数定义了对应的操作被执行时代理的行为。

该方法的返回值是一个对象,其结构为{"proxy": proxy, "revoke": revoke},一旦某个代理对象被撤销,它将变得几乎完全不可调用,在它身上执行任何的可代理操作都会抛出TypeError异常,注意可代理操作一共有14种,执行这14种操作以外的操作不会抛出异常。一旦被撤销,这个代理对象便不可能被直接恢复到原来的状态,同时和它关联的目标对象以及处理器对象都有可能被垃圾回收掉。再次调用撤销方法revoke()则不会有任何效果,但也不会报错。

var revocable = Proxy.revocable({}, {
 get: function(target, key) {
  return `[[ ${key} ]]`;
 }
});
var proxy = revocable.proxy;
console.log(proxy.example); // [[ example ]]
revocable.revoke();
// console.log(proxy.example); // 抛出 TypeError
// proxy.example = 1;      // 抛出 TypeError
// delete proxy.example;    // 抛出 TypeError
// typeof proxy         // "object",因为 typeof 不属于可代理操作

handler对象方法

handler对象是一个容纳一批特定属性的占位符对象,它包含有Proxy的各个捕获器trap。所有的捕捉器是可选的,如果没有定义某个捕捉器,那么就会保留源对象的默认行为。

  • handler.getPrototypeOf(): Object.getPrototypeOf方法的捕捉器。
  • handler.setPrototypeOf(): Object.setPrototypeOf方法的捕捉器。
  • handler.isExtensible(): Object.isExtensible方法的捕捉器。
  • handler.preventExtensions(): Object.preventExtensions方法的捕捉器。
  • handler.getOwnPropertyDescriptor(): Object.getOwnPropertyDescriptor方法的捕捉器。
  • handler.defineProperty(): Object.defineProperty方法的捕捉器。
  • handler.has(): in操作符的捕捉器。
  • handler.get(): 属性读取操作的捕捉器。
  • handler.set(): 属性设置操作的捕捉器。
  • handler.deleteProperty(): delete操作符的捕捉器。
  • handler.ownKeys(): Reflect.ownKeys、Object.getOwnPropertyNames、Object.keys、Object.getOwnPropertySymbols方法的捕捉器。
  • handler.apply(): 函数调用操作的捕捉器。
  • handler.construct(): new操作符的捕捉器。
var target = {
  a: 1,
  f: function(...args){
    console.log(...args);
  }
};
var proxy = new Proxy(target, {
  getPrototypeOf: function(target) {
    console.log("getPrototypeOf");
    return Object.getPrototypeOf(target);
  },
  setPrototypeOf: function(target, prototype) {
    console.log("setPrototypeOf");
    return Object.setPrototypeOf(target, prototype);
  },    
  isExtensible: function(target) {
    console.log("isExtensible");
    return Object.isExtensible(target);
  },
  preventExtensions: function(target) {
    console.log("preventExtensions");
    return Object.preventExtensions(target);
  },
  getOwnPropertyDescriptor: function(target, prop) {
    console.log("getOwnPropertyDescriptor");
    return Object.getOwnPropertyDescriptor(target, prop);
  },
  defineProperty: function(target, prop, descriptor) {
    console.log("defineProperty");
    return Object.defineProperty(target, prop, descriptor);
  },
  has: function(target, prop) {
    console.log("has");
    return prop in target;
  },
  get: function(target, prop, receiver) {
    console.log("get");
    return target[prop];
  },
  set: function(target, prop, value, receiver) {
    console.log("set");
    target[prop] = value;
    return true;
  },
  deleteProperty: function(target, property) {
    console.log("deleteProperty");
    delete target[property];
    return true;
  },
  ownKeys: function(target) {
    console.log("ownKeys");
    return Reflect.ownKeys(target);
  }
})


var proxyF = new Proxy(target.f, {
  construct: function(target, argumentsList, newTarget) {
    console.log("construct");
    return new target(...argumentsList);
  },
  apply: function(target, thisArg, argumentsList) {
    console.log("apply");
    return target.apply(thisArg, argumentsList);
  },

})

const _prototype = {test: 1};
Object.setPrototypeOf(proxy, _prototype); // setPrototypeOf
console.log(Object.getPrototypeOf(proxy)); // getPrototypeOf // { test: 1 }

Object.preventExtensions(proxy); // preventExtensions
console.log(Object.isExtensible(proxy)); // isExtensible // false

Object.defineProperty(proxy, "a", {configurable: true}); // defineProperty
console.log(Object.getOwnPropertyDescriptor(proxy, "a")); // getOwnPropertyDescriptor // { value: 1, writable: true, enumerable: true, configurable: true }

proxy.a = 11; // set
console.log(proxy.a); // get // 11

console.log(Object.keys(proxy)); // ownKeys getOwnPropertyDescriptor getOwnPropertyDescriptor // [ 'a', 'f' ]
delete proxy.a; // deleteProperty
console.log("a" in proxy); // has // false

proxyF(1, 2, 3); // apply 1 2 3
new proxyF(1, 2, 3); // construct 1 2 3

每日一题

https://github.com/WindrunnerMax/EveryDay

以上就是JavaScript中的Proxy对象的详细内容,更多关于JavaScript Proxy对象的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
javascript修改图片src的方法
Jan 27 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
详解JavaScript中的链式调用
Nov 27 #Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 #Vue.js
JavaScript用document.write()输出换行的示例代码
Nov 26 #Javascript
vue单元格多列合并的实现
Nov 26 #Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
You might like
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php中的ini配置原理详解
2014/10/14 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
python定时执行指定函数的方法
2015/05/27 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
py-charm延长试用期限实例
2019/12/22 Python
pytorch构建多模型实例
2020/01/15 Python
Python类继承和多态原理解析
2020/02/05 Python
python能开发游戏吗
2020/06/11 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
 Alo Yoga官网:购买瑜伽服装
2018/06/17 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
党的群众路线专项整治方案
2014/11/03 职场文书
死亡赔偿协议书
2015/01/28 职场文书
庆七一晚会主持词
2015/06/30 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android