Vue3 中的 Proxy--读懂ES6中的Proxy

Proxy用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)

1.用法 

Proxy为 构造函数,用来生成 Proxy实例

var proxy = new Proxy(target, handler)

参数

target表示所要拦截的目标对象(任何类型的对象,包括原生数组,函数,甚至另一个代理))

handler通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 p 的行为

handler解析

关于handler拦截属性,有如下:

  • get(target,propKey,receiver):拦截对象属性的读取
  • set(target,propKey,value,receiver):拦截对象属性的设置
  • has(target,propKey):拦截propKey in proxy的操作,返回一个布尔值
  • deleteProperty(target,propKey):拦截delete proxy[propKey]的操作,返回一个布尔值
  • ownKeys(target):拦截Object.keys(proxy)for...in等循环,返回一个数组
  • getOwnPropertyDescriptor(target, propKey):拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象
  • defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc),返回一个布尔值
  • preventExtensions(target):拦截Object.preventExtensions(proxy),返回一个布尔值
  • getPrototypeOf(target):拦截Object.getPrototypeOf(proxy),返回一个对象
  • isExtensible(target):拦截Object.isExtensible(proxy),返回一个布尔值
  • setPrototypeOf(target, proto):拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值
  • apply(target, object, args):拦截 Proxy 实例作为函数调用的操作
  • construct(target, args):拦截 Proxy 实例作为构造函数调用的操作

Reflect

若需要在Proxy内部调用对象的默认行为,建议使用Reflect,其是ES6中操作对象而提供的新 API

基本特点:

  • 只要Proxy对象具有的代理方法,Reflect对象全部具有,以静态方法的形式存在
  • 修改某些Object方法的返回结果,让其变得更合理(定义不存在属性行为的时候不报错而是返回false
  • Object操作都变成函数行为

下面我们介绍proxy几种用法:

get()

get接受三个参数,依次为目标对象、属性名和 proxy 实例本身,最后一个参数可选

var person = {name: "张三"
};var proxy = new Proxy(person, {get: function(target, propKey) {return Reflect.get(target,propKey)}
});proxy.name // "张三"

get能够对数组增删改查进行拦截,下面是试下你数组读取负数的索引

function createArray(...elements) {let handler = {get(target, propKey, receiver) {let index = Number(propKey);if (index < 0) {propKey = String(target.length + index);}return Reflect.get(target, propKey, receiver);}};let target = [];target.push(...elements);return new Proxy(target, handler);
}let arr = createArray('a', 'b', 'c');
arr[-1] // c

注意:如果一个属性不可配置(configurable)且不可写(writable),则 Proxy 不能修改该属性,否则会报错

const target = Object.defineProperties({}, {foo: {value: 123,writable: false,configurable: false},
});const handler = {get(target, propKey) {return 'abc';}
};const proxy = new Proxy(target, handler);proxy.foo
// TypeError: Invariant check failed

set()

set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身

假定Person对象有一个age属性,该属性应该是一个不大于 200 的整数,那么可以使用Proxy保证age的属性值符合要求

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 // 100
person.age = 'young' // 报错
person.age = 300 // 报错

如果目标对象自身的某个属性,不可写且不可配置,那么set方法将不起作用

const obj = {};
Object.defineProperty(obj, 'foo', {value: 'bar',writable: false,
});const handler = {set: function(obj, prop, value, receiver) {obj[prop] = 'baz';}
};const proxy = new Proxy(obj, handler);
proxy.foo = 'baz';
proxy.foo // "bar"

注意,严格模式下,set代理如果没有返回true,就会报错

'use strict';
const handler = {set: function(obj, prop, value, receiver) {obj[prop] = receiver;// 无论有没有下面这一行,都会报错return false;}
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
// TypeError: 'set' on proxy: trap returned falsish for property 'foo'

deleteProperty()

deleteProperty方法用于拦截delete操作,如果这个方法抛出错误或者返回false,当前属性就无法被delete命令删除

var handler = {deleteProperty (target, key) {invariant(key, 'delete');Reflect.deleteProperty(target,key)return true;}
};
function invariant (key, action) {if (key[0] === '_') {throw new Error(`无法删除私有属性`);}
}var target = { _prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop
// Error: 无法删除私有属性

注意,目标对象自身的不可配置(configurable)的属性,不能被deleteProperty方法删除,否则报错

取消代理

Proxy.revocable(target, handler);

 2.使用的场景

Proxy其功能非常类似于设计模式中的代理模式,常用功能如下:

  • 拦截和监视外部对对象的访问
  • 降低函数或类的复杂度
  • 在复杂操作前对操作进行校验或对所需资源进行管理

使用 Proxy 保障数据类型的准确性

let numericDataStore = { count: 0, amount: 1234, total: 14 };
numericDataStore = new Proxy(numericDataStore, {set(target, key, value, proxy) {if (typeof value !== 'number') {throw Error("属性只能是number类型");}return Reflect.set(target, key, value, proxy);}
});numericDataStore.count = "foo"
// Error: 属性只能是number类型numericDataStore.count = 333
// 赋值成功

声明了一个私有的 apiKey,便于 api 这个对象内部的方法调用,但不希望从外部也能够访问 api._apiKey

let api = {_apiKey: '123abc456def',getUsers: function(){ },getUser: function(userId){ },setUser: function(userId, config){ }
};
const RESTRICTED = ['_apiKey'];
api = new Proxy(api, {get(target, key, proxy) {if(RESTRICTED.indexOf(key) > -1) {throw Error(`${key} 不可访问.`);} return Reflect.get(target, key, proxy);},set(target, key, value, proxy) {if(RESTRICTED.indexOf(key) > -1) {throw Error(`${key} 不可修改`);} return Reflect.get(target, key, value, proxy);}
});console.log(api._apiKey)
api._apiKey = '987654321'
// 上述都抛出错误

还能通过使用Proxy实现观察者模式

观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行

observable函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数

const queuedObservers = new Set();const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});function set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver);queuedObservers.forEach(observer => observer());return result;
}

观察者函数都放进Set集合,当修改obj的值,在会set函数中拦截,自动执行Set所有的观察者

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/218253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode:2697. 字典序最小回文串 | 双指针 + 贪心】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

静态HTTP应用:理解其工作原理与优势

随着互联网的普及和发展&#xff0c;Web应用已经成为人们日常生活和工作中不可或缺的一部分。而静态HTTP应用作为Web应用的一种重要形式&#xff0c;也越来越受到开发者的青睐。本文将带你了解静态HTTP应用的工作原理和优势&#xff0c;让你更好地理解这种应用形式。 一、静态…

TallyBook Technical support

Thanks for using our app! If you have any problems using our products, please contact us by email and we will serve you 24 hours a day! Email address:eshanacsungmail.com Thank you!

binlog+mysqldump恢复数据(误删数据库或者表)

表删除恢复 1、准备数据 首先准备数据库环境&#xff0c;测试数据库为speech1&#xff0c;如下&#xff1a; 为test数据表添加3条记录&#xff0c;如下&#xff1a;三行为新加的记录&#xff0c;添加后将test表删除。 2、恢复数据 查看binlog日志状态 SHOW MASTER STATUS…

<软考高项备考>《论文专题 - 5 论文如何准备》

1 原创写作 优缺点缺点方法掌握写作方法和思路&#xff0c;参考几篇优质范文&#xff0c;就可以进行原创写作手上有项目的IT行业同学适合对象1、写作能力较强的朋友2、时间比较充格&#xff0c;喜欢钻研&#xff0c;善于运用各种工具&#xff0c;解决问题能力较强的朋友不会被…

多线程案例-定时器(附完整代码)

定时器是什么 定时器是软件开发中的一个重要组件.类似于一个"闹钟".达到一个设定的时间之后,就执行某个指定好的代码. 定时器是一种实际开发中非常常用的组件. 比如网络通信种,如果对方500ms内没有返回数据,则断开尝试重连. 比如一个Map,希望里面的某个key在3s之后过…

uniapp+vite+ts+express踩坑总结

1 关于引入express包报 import express from "express"; ^^^^^^ SyntaxError: Cannot use import statement outside a module的问题。 解决方案&#xff1a; 在package.json中添加type&#xff1a;“module”选项 2 Response is a type and must be imported …

c语言 词法分析器 《编译原理》课程设计

设计、编制并调试一个词法分析程序&#xff0c;加深对词法分析原理的理解。 针对表达各类词语的一组正规表达式&#xff0c;设计一个确定化的最简的有限自动机&#xff0c;对输入的符号串进行单词划分及词类识别。 要求词法分析器的输入是字符串&#xff0c;输出是源程序中各…

安装odoo17 Windows版时,PostgreSQL Database无法被勾选

安装odoo17 Windows版时&#xff0c;PostgreSQL Database无法被勾选。 出现的原因是&#xff0c;曾经安装过PostgreSQL Database&#xff1b;虽然可能已被卸载&#xff0c;但注册表内还有残余信息&#xff0c;导致odoo认为PostgreSQL Database仍存在于系统之中。 解决方案 删…

MySQL忘记root密码和修改root密码的解决方法

文章目录 &#xff08;1&#xff09;简介&#xff08;2&#xff09;MySQL 5.5 忘记root密码&#xff08;3&#xff09;MySQL 5.6 忘记root密码&#xff08;4&#xff09;MySQL 8.0 忘记root密码&#xff08;5&#xff09;MySQL 5.6修改root密码&#xff08;6&#xff09;MySQL …

美易官方:构建多元化证券投资组合

掌握美股投资的黄金法则&#xff1a;构建多元化证券投资组合 亲爱的投资者朋友们&#xff0c;当我们迈入充满活力与机遇的美股市场&#xff0c;我们的心中都满怀期待和激动。在这个全球关注的金融舞台上&#xff0c;如何构建一个可靠、安全且多样化的证券投资组合成为了一门艺…

三勾商城新功能-电子面单发货

商家快递发货时可以选择在线下单,在线获取和打印电子面单。免去手写面单信息以及避免填写运单号填错,系统会自动填写对应发货商品的运单信息 快递100电子面单1、进入快递100&#xff0c;点击登录 2、登录成功后&#xff0c;点击“电子面单与云打印” 3、进入电子面单与云打印后…

15、vue3(十五):首页实现,暗黑模式,主体颜色设置

目录 一、首页实现 1.代码实现 2.效果展示 二、暗黑模式 1.思路分析

arcgis api for js 中的query实现数据查询

相当于服务地址中的query查询 获取图层范围内的数据4.24 import Query from arcgis/core/rest/support/Query; import * as QueryTask from "arcgis/core/rest/query";//获取图层范围内的数据4.24 _returnFeatureFromWhere(url, where, geo) {const self thisretu…

基于Java食堂餐饮店铺管理系统

基于Java食堂餐饮店铺管理系统 功能介绍 1、订单管理&#xff1a;对食堂的订单进行管理&#xff0c;包括订单的录入、查询、修改等功能。 2、菜品管理&#xff1a;对食堂的菜品进行管理&#xff0c;包括菜品的添加、删除、修改等功能&#xff0c;同时能够设置菜品的原材料、…

AI全栈大模型工程师(二十七)如何部署自己 fine-tune 的模型

服务器价格计算器 火山引擎提供的这个价格计算器很方便&#xff0c;做个大概的云服务器 GPU 选型价格参考。其它服务厂商价格相差不是很多。 https://www.volcengine.com/pricing?productECS&tab2 高稳定和高可用地部署模型 序号模块名称描述1负载均衡将流入的请求分发到多…

GKeyFile 是一个用于存储和检索按键值对

Glibc 中的 GKeyFile 库 GKeyFile 是一个用于存储和检索按键值对的文件格式&#xff0c;其中按键名称和值可以是任意字符串。在 GKeyFile 文件中&#xff0c;每个条目都由一行文本组成&#xff0c;其中键和值由等号&#xff08;&#xff09;分隔。 以下是一个使用 g_key_file…

基于Java SSM框架实现沙县小吃门店连锁点餐订餐系统项目【项目源码+论文说明】

基于java的SSM框架实现县小吃门店连锁点餐订餐系统演示 摘要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 沙县小吃点餐系统&#xff0c;主要的模块包括实现管理员&#xff1b;个人中心、用户管…

WebSocket实现数据的实时推送

一、简介&#xff08;什么是WebSocket&#xff09; WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工&#xff08;full-duplex&#xff09;通信&#xff0c;即允许服务器主动发送信息给客户端。因此&#xff0c;在WebSocket中&#xff0c;浏览器和服务…

FastDDS 安装 foonathan_memory_vendor 找不到 not found

FastDDS 安装 foonathan_memory_vendor 找不到 cmake -v 3.23.2 git clone https://github.com/eProsima/foonathan_memory_vendor.git cd foonathan_memory_vendor mkdir build && cd build # cmake .. 编译不成功需要替换为如下&#xff1a; cmake -DCMAKE_INSTALL…