js高级-代理与反射

最新推荐文章于 2024-03-18 12:07:22 发布
最新推荐文章于 2024-03-18 12:07:22 发布
阅读量209 收藏 2
点赞数
分类专栏： js高级 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53614495/article/details/126757289
版权

目录

一、代理

1、创建空代理

2、创建捕获器

3、捕获参数和反射API

4、捕获器不变式：

 5、撤销代理

6、代理另一个代理

二、代理捕获器与反射方法

三、代理模式

1、跟踪属性访问

2、隐藏属性

3、属性验证

一、代理

它可以用作目标对象的替身，但又完全独立于目标对象。目标对象既可以直接被操作，也可以通过代理来操作。但直接操作会绕过代理施予的行为。

1、创建空代理

代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象。

目标对象：要使用 Proxy 包装的目标对象

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

let target = {
            name: 'zs'
        }
        let handler = {}
        let proxy = new Proxy(target, handler)
        //访问同一个属性值
        console.log(target.name, proxy.name);
        // 给目标属性赋值会反映在两个对象上
        // 因为两个对象访问的是同一个值
        target.name = 'ls'
        console.log(target.name, proxy.name);
        // 给代理属性赋值会反映在两个对象上
        // 因为这个赋值会转移到目标对象
        proxy.name = 'ww'
        console.log(target.name, proxy.name);
        // hasOwnProperty()方法在两个地方
        // 都会应用到目标对象
        console.log(target.hasOwnProperty('name'));
        console.log(proxy.hasOwnProperty('name'));
        // Proxy.prototype 是 undefined
        console.log(target instanceof Proxy);
        console.log(proxy instanceof Proxy);

结果：

2、创建捕获器

使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。 

let target = {
            name: 'zs'
        }
        let handler = {
            get() {
                return 'hello zs'
            }
        }
        let proxy = new Proxy(target, handler)
        //通过proxy[property]操作触发访问器
        console.log(proxy[name]);//hello zs
        //通过proxy.property操作触发访问器
        console.log(proxy.name);//hello zs
        //这些行为只有在代理对象上才会被触发，目标对象还是正常行为
        console.log(target.name);//zs

3、捕获参数和反射API

所有捕获器都可以访问相应的参数，基于这些参数可以重建被捕获方法的原始行为。比如，get()捕获器会接收到目标对象、要查询的属性和代理对象三个参数。

let target = {
            name: 'zs'
        }
        let handler = {
            get(targetObj, property, proxyObj) {
                console.log(targetObj === target);//true
                console.log(property);//name
                console.log(proxyObj === proxy);//true
            }
        }
        let proxy = new Proxy(target, handler)
        proxy.name

重建被捕获方法的原始行为：

let target = {
            name: 'zs'
        }
        let handler = {
            get(targetObj, property, proxyObj) {
                return targetObj[property]
            }
        }
        let proxy = new Proxy(target, handler)
        console.log(proxy.name);//zs

实际上，开发者并不需要手动重建原始行为，而是可以通过调用全局 Reflect 对象上（封装了原始行为）的同名方法来轻松重建。

let target = {
            name: 'zs'
        }
        let handler = {
            get() {
                return Reflect.get(...arguments)
            }
        }
        let proxy = new Proxy(target, handler)
        console.log(proxy.name);//zs

简化：

let target = {
            name: 'zs'
        }
        let handler = {
            get: Reflect.get

        }
        let proxy = new Proxy(target, handler)
        console.log(proxy.name);//zs

如果真想创建一个可以捕获所有方法，然后将每个方法转发给对应反射 API 的空代理，那么甚至不需要定义处理程序对象：

let target = {
            name: 'zs'
        }
        let proxy = new Proxy(target, Reflect)
        console.log(proxy.name);//zs

反射 API 为开发者准备好了样板代码，在此基础上开发者可以用最少的代码修改捕获的方法。

let target = {
            name: "zs",
            age: 20
        }
        let handler = {
            get(targetObj, property, proxyObj) {
                let modifier = ''
                if (property === 'name') {
                    modifier = 'hello'
                }
                return modifier + ' ' + Reflect.get(...arguments)
            }
        }
        let proxy = new Proxy(target, handler)
        console.log(proxy.age);//20
        console.log(proxy.name);//hello zs

4、捕获器不变式：

使用捕获器几乎可以改变所有基本方法的行为，但也不是没有限制。根据 ECMAScript 规范，每个捕获的方法都知道目标对象上下文、捕获函数签名，而捕获处理程序的行为必须遵循“捕获器不变式”。

如果目标对象有一个不可配置且不可写的数据属性，那么在捕获器返回一个与该属性不同的值时，会抛出异常。

let target = {
            name: 'zs',
            age: 20
        }
        Object.defineProperty(target, 'name', {
            value: 'ls',
            writable: false,
            configurable: false
        })
        let handler = {
            get(targetObj, property, proxyObj) {
                if (property === 'name') {
                    return 'ww'
                }
            }
        }
        let proxy = new Proxy(target, handler)
        console.log(proxy.name);

 结果：

 5、撤销代理

Proxy 也暴露了 revocable()方法，这个方法支持撤销代理对象与目标对象的关联。撤销代理的操作是不可逆的。而且，撤销函数（revoke()）是幂等的，调用多少次的结果都一样。撤销代理之后再调用代理会抛出 TypeError。

let target = {
            name: 'zs'
        }
        let handler = {
            get() {
                return 'ls'
            }
        }
        let { proxy, revoke } = Proxy.revocable(target, handler)
        console.log(proxy.name);
        revoke()
        console.log(proxy.name);

结果：

6、代理另一个代理

代理可以拦截反射 API 的操作，而这意味着完全可以创建一个代理，通过它去代理另一个代理。这样就可以在一个目标对象之上构建多层拦截网。

let target = {
            name: 'zs'
        }
        let fristProxy = new Proxy(target, {
            get() {
                console.log('第一层代理');
                return Reflect.get(...arguments)
            }
        })
        let secondProxy = new Proxy(fristProxy, {
            get() {
                console.log('第二层代理');
                return Reflect.get(...arguments)
            }
        })
        console.log(secondProxy.name);//第二层代理 第一层代理 zs

二、代理捕获器与反射方法

正如前面示例所展示的，有几种不同的 JavaScript 操作会调用同一个捕获器处理程序。不过，对于在代理对象上执行的任何一种操作，只会有一个捕获处理程序被调用。不会存在重复捕获的情况。只要在代理上调用，所有捕获器都会拦截它们对应的反射 API 操作。

let target = {}
        let proxy = new Proxy(target, {
            //get()捕获器会在获取属性值的操作中被调用。对应的反射 API 方法为 Reflect.get()。
            //get()捕获器
            //targetObj目标对象
            //property引用的目标对象上的字符串键属性
            //proxyObj代理对象或继承代理对象的对象
            get(targetObj, property, proxyObj) {
                console.log('get()');
                return Reflect.get(...arguments)
            },
            //set()捕获器会在设置属性值的操作中被调用。对应的反射 API 方法为 Reflect.set()。
            // set()捕获器 
            //targetObj目标对象
            //property引用的目标对象上的字符串键属性
            //value要赋给属性的值
            //receive接收最初赋值的对象
            set(targetObj, property, value, receive) {
                console.log('set()');
                return Reflect.set(...arguments)
            },
            //has()捕获器会在 in 操作符中被调用。对应的反射 API 方法为 Reflect.has()。
            //has()捕获器
            //targetObj目标对象
            //property引用的目标对象上的字符串键属性
            has(targetObj, property) {
                console.log('has()');
                return Reflect.has(...arguments)
            }
        })
        proxy.name
        proxy.name = 'zs'
        name in proxy

结果：

 

三、代理模式

1、跟踪属性访问

通过捕获 get、set 和 has 等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象何时在何处被访问过：

let target = {
            name: 'zs'
        }
        let proxy = new Proxy(target, {
            get(targetObj, property, proxyObj) {
                console.log(`获取到了${property}`);
                return Reflect.get(...arguments)
            },
            set(targetObj, property, value, receive) {
                console.log(`设置了${property}属性=${value}`);
                return Reflect.set(...arguments)
            }
        })
        proxy.name//获取到了name
        proxy.age = 20//设置了age属性=20

2、隐藏属性

代理的内部实现对外部代码是不可见的，因此要隐藏目标对象上的属性也轻而易举。

let target = {
            name: 'zs',
            age: 20,
            sex: '男'
        }
        let HiddenTarget = ['name', 'age']
        let proxy = new Proxy(target, {
            get(targetObj, property, proxyObj) {
                if (HiddenTarget.includes(property)) {
                    return undefined
                } else {
                    return Reflect.get(...arguments)
                }
            },
            has(targetObj, property) {
                if (HiddenTarget.includes(property)) {
                    return false
                } else {
                    return Reflect.has(...arguments)
                }
            }
        })
        console.log(proxy.name, proxy.age, proxy.sex);
        console.log('name' in proxy, 'age' in proxy, 'sex' in proxy);

结果：

 

3、属性验证

因为所有赋值操作都会触发 set()捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值：

let obj = {
            password: 0
        }
        let proxy = new Proxy(obj, {
            set(targetObj, property, value, receive) {
                if (typeof value !== 'number') {
                    return false
                } else {
                    return Reflect.set(...arguments)
                }
            }
        })
        proxy.password = 123
        console.log(proxy.password);//123
        proxy.password = 'abc'
        console.log(proxy.password);//123

 

薛定谔的猫不是猫，是王维诗里的猫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6 如何改变JS内置行为的代理与反射
01-21
代理（Proxy）可以拦截并改变 JS 引擎的底层操作，如数据读取、属性定义、函数构造等一系列操作。ES6 通过对这些底层内置对象的代理陷阱和反射函数，让开发者能进一步接近 JS 引擎的能力。 一、代理与反射的基本概念 什么是代理和反射呢？ 代理是用来替代另一个对象（target），JS 通过new Proxy()创建一个目标对象的代理，该代理与该目标对象表面上可以被当作同一个对象来对待。 当目标对象上的进行一些特定的底层操作时，代理允许你拦截这些操作并且覆写它，而这原本只是 JS 引擎的内部能力。 如果你对些代理&反射的概念比较困惑的话，可以直接看后面的应用示例，最后再重新看这些定义
js轨迹跟踪（动画轨迹，记录鼠标点击过的坐标点）
08-10
js轨迹跟踪（动画轨迹，记录鼠标点击过的坐标点）
在javascript中，instanceof实现原理
我的博客简介
08-26 540
【代码】instanceof实现原理。
JavaScript高级程序设计 第4版 -- 代理与反射（proxy）
Cupid
04-16 610
第九章 代理与反射 9.1代理基础 9.1.1创建空代理 代理是使用 Proxy 构造函数创建的。这个构造函数接收两个参数：目标对象和处理程序对象。缺 少其中任何一个参数都会抛出 TypeError。要创建空代理，可以传一个简单的对象字面量作为处理程序对象。如下面的代码，在代理对象上执行的任何操作都会应用到目标对象 const target = { id: 'target' }; const handler = {}; const proxy = new Proxy(target, handler
Reflect
qq_41846172的博客
04-21 211
Refelct Reflect是一个内置的对象，他提供拦截的JavaScript的操作的方法。一共有 13 个静态的方法 Reflect的描述： reflect与大多数的对象不同，Reflect并非一个构造函数，所以不能通过new运算符来对其进行引用，或者将Reflect对象作为一个函数来调用，Reflect的所有方法和属性都是静态的，相当于Math，Refelct相当一一个静态的类。 Reflect的静态的方法： Relect.apply(target,thisargument,argument
如何判断元素是被proxy代理过的呢？
程序媛的梦工厂
03-14 4304
案例： let arr = []; let proxyer = new Proxy(arr, {}); console.log(proxyer instanceof Proxy); // 报错：Uncaught TypeError: Function has non-object prototype 'undefined' in instanceof check console.log(proxyer instanceof Array); // true console.log(proxyer.__prot
2020-11-28——ES6中的proxy
weixin_43415330的博客
11-28 7288
a.ES6中的proxy ES6中的proxy（代理）：是目标对象的抽象。有点像C++指针，可以用作目标对象的替身，但又完全独立于目标对象。目标对象可以通过代理来操作，并执行代理施予的行为，故代理可以用于目标对象属性、跟踪属性访问、函数参数验证、数据绑定…… const target = { id: 'target' }; const handler = {}; const proxy = new Proxy(target, handler); // id 属性会访问同一个值 console.log(tar
【Vue3】Vite打包发布错误若干问题解决方案，新手遇到的问题都在这里。
【敦厚的曹操】的专栏
02-22 7327
【Vue3】Vite打包发布错误若干问题解决方案，新手遇到的问题都在这里。
vue3+vite项目打包遇到的问题
最新发布
qq_48666244的博客
03-18 532
router/index.js，将路由模式改成hash模式。vite.config.js中，添加base: './'
JavaScript 中Proxy（代理）和Reflect（反射）基础知识
zhtbs的博客
03-31 1144
最近在Vue3项目开发中，我们经常使用与Proxy和Reflect相关的函数。这些函数以各种形式出现在Vue3 Reactivity函数、各种库和框架中。然而，对于JavaScript Proxy的概念和使用方法，许多人可能不太熟悉。因此，下面我将通过一个例子来更好地解释Proxy和Reflect的使用方法。Reflect和Proxy是EC6引入的两个新功能，可以帮助开发人员更轻松地操作和控制对象。
JavaScript类型判断总结
zem
04-29 1563
在对类型的识别进行总结前，首先明确一下，在JavaScript中，有七种内置类型，null，undefined，boolean，number，String，Object，Symbol（ES6中新增），接下来对几种常见的类型识别进行总结。 typeof typeof运算符是我们常用的用于检测类型的一种方式，该运算符会返回一个字符串来表示其识别到的类型，我们使用typeof对七种内置类型的类型进行...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08 jquery的查找筛选器 09 jquery练习之左侧菜单 第44章 01...
JavaScript高级教程-代理与反射
qq_36973122的博客
07-04 1239
JavaScript高级教程-代理与反射
JavaScript - 代理与反射（代理基础）
每天进步一点点
01-16 783
使用代理的主要目的是可以定义捕获器（trap）。捕获器就是在处理程序对象中定义的“基本操作的拦截器”。每个处理程序对象可以包含零个或多个捕获器，每个捕获器都对应一种基本操作，可以直接或间接在代理对象上调用。每次在代理对象上调用这些基本操作时，代理可以在这些操作传播到目标对象之前先调用捕获器函数，从而拦截并修改相应的行为。注意：捕获器（trap）是从操作系统中借用的概念。在操作系统中，捕获器是程序流中的一个同步中断，可以暂停程序流，转而执行一段子例程，之后再返回原始程序流。
代理与反射
每天都要努力学习哦~~
01-10 533
ES6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体就是，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。使用代理的主要目的是定义捕获器；捕获器：处理程序对象中定义的“基本操作的拦截器”；每个程序可以包括0个或多个；每个捕获器对应一种基本操作，可以直接或间接在代理对象上调用；
Proxy 和 Reflect深入，Reflect（映射），Proxy的局限性，Reflect搭配Proxy使用（二）
秋天，黄叶坠地，凉风有信。
03-07 611
Reflect Reflect 是一个内建对象，可简化 Proxy 的创建。 前面所讲过的内部方法，例如 [[Get]] 和 [[Set]] 等，都只是规范性的，不能直接调用。 Reflect 对象使调用这些内部方法成为了可能。它的方法是内部方法的最小包装。 以下是执行相同操作和 Reflect 调用的示例： 操作 Reflect 调用 内部方法 obj[prop] Reflect.get(obj, prop) [[Get]] obj[prop] = value Reflect.set(
js node-fetch添加代理
09-07
```javascript const fetch = require('node-fetch'); const HttpsProxyAgent = require('https-proxy-agent'); // 代理的地址和端口 const proxy = 'http://proxy.example.com:8080'; // 创建一个代理实例 const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值