JS Proxy （代理）

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

语法：

const p = new Proxy(target, handler)

参数：

target ：

要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler ：

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

示例

在以下简单的例子中，当对象中不存在属性名时，返回"该对象没有该属性" 。下面的代码以此展示了 set 的使用场景。

当设置对象除了 age 以外的其它值，则弹出异常。下面的代码以此 get 的使用场景。

    //声明一个名为obj的对象var obj = {name: "ZHouMao",age: 18}//示例化一个代理p，代理的对象是objvar p = new Proxy(obj, {//get 属性读取时的操作get(target, prop) {//target 就是 obj 这个对象//prop 是 obj 的属性名if (prop in target) {//如果该属性名存在与该对象中，则返回该属性值return target[prop];} else {//否则返回字符串 "该对象没有该属性"return "该对象没有该属性";}},//set 属性设置时的操作set(target, prop, value) {//target 就是 obj 这个对象//prop 是 obj 的属性名//value 是 要设置的值if (prop === "age") {//如果该属性名是age，则返回修改后的值target[prop] = value;} else {//否则弹出异常内容throw "除年龄外，其它属性不可以更改";}}})

在该示例中，我们在控制台访问对象时，如图：

我们修改对象的值时，如图：

可以发现，只有age的值可以修改，当修改name值时会弹出异常！

总结

Proxy 可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。

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 （代理）

语法：

参数：

示例

总结

JS Proxy （代理）相关推荐

最新文章

热门文章