JavaScript Proxy基本用法详解

目录
  • 1.语法
  • 2.基本用法
  • 3.可消除的Proxy
  • 4.Vue为什么要用Proxy重构
  • 5.Proxy与defineProperty的对比

1.语法

const proxy = new Proxy(target, handle);
  • target，被代理的对象
  • handle，拦截规则

2.基本用法

const obj = {};
const proxy = new Proxy(obj, {
    // target 目标对象；propKey 属性名；receiver 实例本身；
    get: function(target, propKey, receiver) {
        return 10;
    }
})
console.log(proxy.a); // 10
console.log(proxy.b); // 10
console.log(obj.a); // undefined
console.log(obj.b); // undefined

​ 以上代码对obj对象的get操作进行了拦截，任何读取操作都仅会返回10，且该操作只作用在代理对象proxy上，对原对象本身是不起作用的。

ps.若obj对象是不可写及不可配置的，代理对象的返回值要与被代理对象的返回值保持一致；若被代理对象没有配置get方位方法，即get方法是undefined，那么返回值必须是undefined

handle对象的常用方法：

方法 描述
has in操作符捕捉器
get 属性读取操作符捕捉器
set 属性设置操作符读取器
deleteProperty delete操作符读取器
ownKeys Object.getOwnPropertyNames 方法和
Object.getOwnPropertySymbols 方法的捕捉器。
apply 函数调用捕捉器
construct new操作符的捕捉器

3.可消除的Proxy

​ Proxy有一个唯一的静态方法Proxy.revocable(target, handler)，可以用来创建一个可撤销的代理对象，该方法的返回值是一个对象，其结构为： {"proxy": proxy, "revoke": revoke}。

  • proxy 表示新生成的代理对象本身，和用一般方式 new Proxy(target, handler) 创建的代理对象没什么不同，只是它可以被撤销掉。
  • revoke 撤销方法，调用的时候不需要加任何参数，就可以撤销掉和它一起生成的那个代理对象。

ps.该方法常用于完全封闭对目标对象的访问。

4.Vue为什么要用Proxy重构

​ Vue3.0之前，双向绑定主要是由defineProperty实现的。而defineProperty这个方法本身其实是存在不足的，比如说对于对象属性增加、数组按下标修改等一下操作无法做到原生实现。虽然Vue有提供相应的手动observer方法，但在使用体验上还是不尽如人意的。而想较于defineProperty针对属性进行拦截，Proxy直接劫持了整个对象，即不需要对特殊的操作做单独处理。

5.Proxy与defineProperty的对比

（1）Proxy作为新标准，浏览器支持良好

（2）Proxy能观察的类型比defineProperty 更丰富

（3）Proxy不兼容IE，也没有polyfill，defineProperty 可以支持到IE9

（4）defineProperty 劫持对象的属性，当新增属性时，需要再次defineProperty；Proxy直接劫持整个对象，不需要额外操作。

（5）defineProperty 在原对象本身进行拦截操作，而Proxy只能在生成的拦截的对象上进行拦截操作。

到此这篇关于JavaScript Proxy基本用法详解的文章就介绍到这了,更多相关JS Proxy内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript 对象管家 Proxy

    目录 正文 语法 对象方法 属性获取器/设置器 函数方法 捕捉器 get set 应用场景 验证和过滤 缓存 监听属性变化 防止误操作 虚拟化 总结 正文 JavaScript 在 ES6 中,引入了一个新的对象类型 Proxy,它可以用来代理另一个对象,并可以在代理过程中拦截.覆盖和定制对象的操作.Proxy 对象封装另一个对象并充当中间人,其提供了一个捕捉器函数,可以在代理对象上拦截所有的操作,包括访问属性.赋值属性.函数调用等等.通过拦截这些操作,可以对代理对象进行定制和控制. 在开始介绍

  • JavaScript Object.defineProperty与proxy代理模式的使用详细分析

    目录 1. Object.defineProperty 2. Object.defineProperties 3. proxy 代理模式 总结 1. Object.defineProperty const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符 返回值:被传递给函数的对象 descript接收一个对象作为配置: writable 属性是否可写 默认

  • JS 中Proxy代理和 Reflect反射方法示例详解

    目录 正文 1.属性描述符 2.Reflect 3.Proxy 3.1 创建空代理 3.2 定义捕获器 3.3 捕获器不变式 3.4 可撤销代理 4.代理捕获器与反射方法 4.1 get() 4.2 set() 4.3 has() 4.4 deleteProperty() 4.5 apply() 4.6 construct() 正文 总所周知,Vue2 => Vue3 时,数据响应式方法从Object.defineProperty()方法变成了Proxy(),所以今天与大家 Proxy(代理)和

  • vue.config.js中devServer.proxy配置说明及配置正确不生效问题解决

    目录 proxy 配置确认.解析 原因 一 原因二 注意 详解 pathRewrite changeOrigin 总结 proxy 配置确认.解析 devServer: { https: true, // 开启https模式 // 配置服务器代理 proxy: { '/api': { // 匹配访问路径中含有 '/api' 的路径 target: 'http://localhost:3000/', // 测试地址.目标地址 changeOrigin: true, ws: true, // 是否开

  • JavaScript Proxy基本用法详解

    目录 1.语法 2.基本用法 3.可消除的Proxy 4.Vue为什么要用Proxy重构 5.Proxy与defineProperty的对比 1.语法 const proxy = new Proxy(target, handle); target,被代理的对象 handle,拦截规则 2.基本用法 const obj = {}; const proxy = new Proxy(obj, { // target 目标对象:propKey 属性名:receiver 实例本身: get: functi

  • JavaScript之clipboard用法详解

    (1)介绍: clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件.通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; (2)clipboard复印内容的方式有 从target复印目标内容 通过function 要复印的内容 通过属性返回复印的内容 target复印目标内容,这里不说,就

  • JavaScript自定义函数用法详解

    JavaScript自定义函数用法详解

    JavaScript中的函数分为两种:系统函数和自定义函数,这里主要讲解自定义函数. 自定义函数 1.语法: 注意: 传入的参数是可选的. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi

  • js中 javascript:void(0) 用法详解

    javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a> 这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here</

  • Javascript中的return作用及javascript return关键字用法详解

    javascript 中的return一直用的都比较火,关于javascript中的return作用大家了解吗,下面通过本文给大家详细介绍,具体内容如下所示: return 语句从当前函数退出,并从那个函数返回一个值. 语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值.如果省略,则该函数不返回值. 用 return 语句来终止一个函数的执行,并返回 expression 的值.如果 expression 被省略,或在函数内没有 re

  • javascript some()函数用法详解

    参数说明 callback: 要对每个数组元素执行的回调函数. thisObject : 在执行回调函数时定义的this对象. 功能说明 对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false.它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略. 回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象. 如参数

  • JavaScript RegExp 对象用法详解

    当您检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp 就是这种模式. 简单的模式可以是一个单独的字符. 更复杂的模式包括了更多的字符,并可用于解析.格式检查.替换等等. 您可以规定字符串中的检索位置,以及要检索的字符类型,等等. 1.基本用法 <script> // 创建正则 var reg = /hello/ // 检测某个字符串是否有符合正则格式的文本 var flag = reg.test("hello world") console.log(flag

  • Javascript对象及Proxy工作原理详解

    Javascript对象及Proxy工作原理详解

    正文 这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对.但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样. Javascript中一切皆对象 这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨 const str = '' const str2 = new String() const obj = {} const obj2 = Object.create() 但是根据ECMA,

  • JavaScript中SetInterval与setTimeout的用法详解

    setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

  • JavaScript中eval()函数用法详解

    eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参数是Javascript语句,eval()将执行 Javascript 语句. 语法 复制代码 代码如下: eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eva

随机推荐