当前位置: 首页 > news >正文

前端 JS 经典:Reflect 本质

1. 什么是 Reflect

Reflect 可以调用对象的基本方法(内部方法),在 ES6 之前我们是没有任何方法去直接调用对象的基本方法的。只能间接调用,间接调用它又会给你做一些额外得事。

2. 对象的基本方法

什么是对象的基本方法呢,对象内部运行的方法就是对象的基本方法。对象的基本方法有哪些,它对应的反射方法是什么。如下:

// 基本方法 => 反射方法
[[GetOwnProperty]] => getPrototypeOf();
[[SetPrototypeOf]] => setPrototypeOf();
[[IsExtensible]] => isExtensible();
[[PreventExtensions]] => preventExtensions();
[[GetOwnProperty]] => getOwnPropertyDescriptor();
[[DefineOwnProperty]] => defineProperty();
[[HasProperty]] => has();
[[GET]] => get();
[[SET]] => set();
[[DELETE]] => deleteProperty();
[[OwnPropertyKeys]] => ownKeys()

3. Reflect 有什么用

我们举个例子,下面这两个语句是同样的作用,都是设置 name 的值:

let obj = { name: "yq" };
obj.name = "yqcoder";
console.log(obj); // { name: 'yqcoder' }
let obj = { name: "yq" };
Reflect.set(obj, "name", "yqcoder");
console.log(obj); // { name: 'yqcoder' }

那么既然都是做的同样的是,它们有什么区别呢。区别在于,通过语法或者一些 API 去调用对象的内部方法的话,它会经过一些规则和步骤,在这些规则和步骤当中,有一步是在调用这个内部方法。如果你不希望有这些额外步骤存在,那就需要你直接去调用对象的基本方法了。使用 Reflect。

4. 为什么要用 Reflect

有小伙伴就问了,我为啥要直接调用对象的基本方法,用语法进行对象操作不好吗。肯定是因为 Reflect 可以做一些语法做不到的事,我们才会去使用 Reflect。比如:

let obj = {a: 1,b: 2,get c() {return this.a + this.b;},
};
obj.c; // 3

上面的 obj.c 实际是通过[[GET]](obj, 'c', obj),去得到的值,当我们想通过 obj.c 改变 this 的指向,这时做不到的,用 Reflect 就可以。如下,就改变了 this 的指向。

let obj = {a: 1,b: 2,get c() {return this.a + this.b;},
};
Reflect.get(obj, "c", { a: 3, b: 4 }); // 7

另外,有的时候我们去封装代理对象的时候,也需要用到 Reflect,比如,我们需要得到这么一个代理,访问 proxy.c 时,需要将 a,b 一起打印出来。

let obj = {a: 1,b: 2,get c() {return this.a + this.b;},
};
const proxy = new Proxy(obj, {get(target, key) {console.log(key);return Reflect.get(target, key, proxy);},
});
proxy.c; // c a b

 再比如,我们需要获取到对象得所有属性

let obj = {a: 1,b: 2,
};
Object.defineProperty(obj, "c", {value: 3,enumerable: false,
});
Object.keys(obj); // ['a', 'b']
Reflect.ownKeys(obj); // ['a', 'b', 'c']

http://www.lryc.cn/news/365344.html

相关文章:

  • accelerate 的一个tip:early stopping 处可能存在的bug
  • 企业数据挖掘建模平台极简建模流程
  • 使用pkg打包了一个使用了sqlite3的nodejs项目,启动后闪退
  • 网络编程(UPD和TCP)
  • cesium 之 flyTo、setView、lookat
  • 超速解读多模态InternVL-Chat1.5 ,如何做到开源SOTA——非官方首发核心技巧版(待修订)
  • Vue 组件_动态组件+keep-alive
  • 深入理解Redis:多种操作方式详解
  • stm32太阳能追光储能系统V2
  • Docker笔记-解决非交互式运行python时print不输出的问题
  • 06- 数组的基础知识详细讲解
  • CentOS6系统因目录有隐含i权限属性致下属文件无法删除的故障一例
  • 【视频转码】ZLMediaKit漏洞报告的问题
  • 100道大模型面试八股文
  • 【ARM Cache 及 MMU 系列文章 6.2 -- ARMv8/v9 Cache 内部数据读取方法详细介绍】
  • 使用Vue.js将form表单传递到后端
  • 6、架构-服务端缓存
  • 服务器遭遇UDP攻击时的应对与解决方案
  • 美团发布2024年一季度财报:营收733亿元,同比增长25%
  • sql注入-布尔盲注
  • docker-compose部署 kafka 3.7 集群(3台服务器)并启用账号密码认证
  • LeetCode-704. 二分查找【数组 二分查找】
  • Rust 性能分析
  • Gradle和Maven都是广泛使用的项目自动化构建工具
  • Seed-TTS语音编辑有多强?对比实测结果让你惊叹!
  • Vue3——实现word,pdf上传之后,预览功能(实测有效)
  • JVM之【类的生命周期】
  • 分库分表场景下,如何设计与实现一种高效的分布式ID生成策略
  • 机器人系统ros2-开发学习实践16-RViz 用户指南
  • 安全测试 之 安全漏洞 CSRF