【JS】Proxy(代理)

Proxy

Proxy
Proxy的set和get捕获器
Proxy的has和deleteProperty捕获器
其他捕获器

Proxy

ES6里的新增类，帮助创建一个代理，如果我们希望监听一个对象的相关操作，那么可以先创建一个代理对象（Proxy对象），之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听对原对象进行了哪些操作。可以通过重写捕获器trap（13种）完成想要的操作。也就是说对原对象进行访问控制和增加功能。
简单演示：

const obj = {name: "yyy",age: 88
}
//需要new Proxy对象，并且传入需要侦听的对象以及一个处理对象（可以称之为handler）const p = new Proxy(target, handler)
const objProxy = new Proxy(obj,{});
//{}默认不修改里面的捕捉器
console.log(objProxy.name);
console.log(objProxy.age);
objProxy.name = "ooo";//同时修改了obj里的name
console.log(obj.name);

输出：yyy 88 ooo

Proxy的set和get捕获器

set和get分别对应的是函数类型

set函数有四个参数：

target：目标对象（侦听的对象）
property：将被设置的属性key
value：新属性值
receiver：调用的代理对象

get函数有三个参数：

target：目标对象（侦听的对象）
property：被获取的属性key
receiver：调用的代理对象

const objProxy = new Proxy(foo,{//获取值时的捕获器get: function(target, key){console.log(target,`对象的${key}被访问了`);return target[key];},//设置值时的捕获器set: function(target, key, newValue){target[key] = newValue;console.log(`${target}对象的${key}被修改了`);}
});

Proxy的has和deleteProperty捕获器

  // 监听in的捕获器has: function(target, key) {console.log(`监听到对象的${key}属性in操作`, target)return key in target},// 监听delete的捕获器deleteProperty: function(target, key) {console.log(`监听到对象的${key}属性in操作`, target)delete target[key]}console.log("name" in objProxy);delete objProxy.name;

其他捕获器

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.ownKeys()
Object.getOwnPropertyNames 方法和
Object.getOwnPropertySymbols 方法的捕捉器。
handler.has()
in 操作符的捕捉器。
handler.get()
属性读取操作的捕捉器。
handler.set()
属性设置操作的捕捉器。
handler.deleteProperty()
delete 操作符的捕捉器。
handler.apply()
函数调用操作的捕捉器。
handler.construct()
new 操作符的捕捉器。

12和13用于函数对象

【JS】Proxy(代理)相关推荐

vue.config.js配置proxy代理解决跨越；proxy代理报404；
像我们本地的vue项目运行起来,访问的地址一般是localhost,这个时候请求后台的接口,端口号也不一致,肯定就会存在跨域问题,所以我们要是想正常访问接口的话,就需要解决掉跨域问题. 本文我们是在v ...
vue跨域问题：proxy代理跨域
前端跨域,本地跨域,vue项目跨域问题疑问1: 前端开发中解决浏览器的跨域问题 (推荐阅读) 什么是跨域? 为什么要跨域? 解决"跨域"的五种常见方式: 1. JSONP 2. ...
vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）
vue-cli的使用现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
webpack的proxy代理配置
webpack的proxy代理配置在实际项目中不可避免会遇到跨越问题,webpack中的proxy就是解决前端跨域的方法之一. 跨越问题:协议.域名.端口三者只要有一个与服务端的不一致,就会报跨域 ...
proxy代理报错： Uncaught (in promise) Error: Request failed with status code 500
POST http://localhost:8013/check/login 500 (Internal Server Error) createError.js:16 Uncaught (in pr ...
双向绑定 / proxy 代理整理
class Vue {constructor(el, data) {this.el = document.querySelector(el)this.data = datathis.domPool = ...
http proxy 代理
配合webpack 和 webpack-dev-server处理安装 // 安装 cnpm html-webpack-plugin --save -D cnpm install webpack we ...
axios请求与proxy代理配置
如果是不考虑跨域问题,那么请求后台数据使用的就是该路径.但是根据同源策略,3000端口(前端页面端口)无法访问5000端口(后台数据端口),此时就需要使用proxy代理配置了. /** * 获取所有的 ...
webpack-dev-server实现静态资源加载和proxy代理
文章目录 webpack专辑 webpack Dev Server 配置选项 1.静态资源访问 2.Proxy 代理小结 webpack专辑如何使用webpack实现模块化打包? 如何通过Load ...
proxy代理的使用（解决跨域，配置多个代理）
proxy代理的使用(解决跨域,配置多个代理) 一.什么是代理字面意思就是类似中间商,开启代理,原理就是在本地创建一个虚拟服务器,发送请求数据,同时接受请求的数据, 利用服务器与服务器间,交互,不会 ...

【JS】Proxy(代理)

Proxy

Proxy

Proxy的set和get捕获器

Proxy的has和deleteProperty捕获器

其他捕获器

【JS】Proxy(代理)相关推荐

最新文章

热门文章