JavaScript利用反射实现方法注入

javascript,利用,反射,实现,方法,注入 · 浏览次数 : 11

小编点评

**引言** Reflect是一种在 JavaScript 中提供动态访问和修改类 (对象) 属性和方法的机制。它是一个内置的对象,提供反射操作的方法。 **主要功能** * 获取属性描述符。 * 设置或获取属性。 * 创建新方法并设置新方法。 * 替换原方法。 **示例** ```javascript const obj = { method: function () { console.log('Original method'); } }; // 获取对象的属性描述符 const descriptor = Reflect.getOwnPropertyDescriptor(obj, 'method'); // 保存原有方法的引用 const originalMethod = descriptor.value; // 修改方法的特性 Reflect.defineProperty(obj, 'method', descriptor); // 调用方法 obj.method(); // 输出:Original method // 创建一个新方法并设置新方法 Reflect.defineProperty(obj, 'method', { value: function () { console.log('Modified method'); } }); // 调用方法 obj.method(); // 输出:Modified method ``` **其他** * Reflect 是一个静态对象,所有属性和方法都是静态的。 * 可以使用 `new` 运算符创建 Reflect 对象,但不能使用 `call` 或 `apply` 方法调用它。 * `Reflect` 对象提供许多其他方法,可用于更复杂的动态操作。

正文

1. 引言

反射是一种能够在程序运行时动态访问、修改某个类(对象)中属性和方法的机制

JavaScript在ES6中提供了Reflect 这一个内置的对象,它提供拦截 JavaScript 操作的方法

与之功能类似的有 proxy handler (en-US)Object.getOwnPropertyDescriptor()

以下记述利用反射来实现对JavaScript对象的方法注入,主要使用ReflectObject.getOwnPropertyDescriptor()来实现

2. Reflect

Reflect并非一个构造函数,所以不能通过 new 运算符对其进行调用,或者将 Reflect 对象作为一个函数来调,Reflect 的所有属性和方法都是静态的(就像 Math 对象),详细文档可参考MDN:Reflect - JavaScript | MDN (mozilla.org)

Reflect的主要功能就是对JavaScript对象进行操作,包括获取属性、修改属性等

在这里,要实现对JavaScript对象的原有方法进行注入,基本思路就是获取对象的原方法,设置一个新方法,在新方法中修改或调用原方法,最后将新方法替换原方法,示例代码如下:

// 定义一个对象
const obj = {
    method: function () {
        console.log('Original method');
    }
};

// 获取对象的属性描述符
const descriptor = Reflect.getOwnPropertyDescriptor(obj, 'method');

// 保存原有方法的引用
const originalMethod = descriptor.value;

// 修改方法的特性
descriptor.value = function () {
    // 调用原有方法
    Reflect.apply(originalMethod, this, arguments);

    console.log('Modified method');
};

// 定义修改后的方法
Reflect.defineProperty(obj, 'method', descriptor);

// 调用方法
obj.method(); // 输出: Original method Modified method

3. Object

Object是JavaScript标准内置对象,其内置多个操作对象方法和属性的静态方法,包括获取属性、修改属性等,更为详细的文档可参考MDN:Object - JavaScript | MDN (mozilla.org)

在这里,要实现对JavaScript对象的原有方法进行注入,基本思路就是和上面是相同的:获取对象的原方法,设置一个新方法,在新方法中修改或调用原方法,最后将新方法替换原方法,示例代码如下:

// 定义一个对象
const obj = {
    method: function () {
        console.log('Original method');
    }
};

// 获取对象的属性描述符
const descriptor = Object.getOwnPropertyDescriptor(obj, 'method');

// 保存原有方法的引用
const originalMethod = descriptor.value;

// 修改方法的特性
descriptor.value = function () {
    // 调用原有方法
    originalMethod.apply(this, arguments);

    console.log('Modified method');
};

// 定义修改后的方法
Object.defineProperty(obj, 'method', descriptor);

// 调用方法
obj.method(); // 输出: Original method Modified method

其实使用Object的静态方法与使用Reflect对象的静态方法差不多,没有太大区别

4. 示例

4.1 添加新方法

JavaScript内置的Date对象没有输出指定格式的方法,可以使用反射进行注入,实现对象的扩展,示例如下:

const getFormattedDate = function (date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}-${month}-${day}`;
};

const date = new Date();

Reflect.defineProperty(date, 'getFormattedDate', {
    value: getFormattedDate
});

console.log(date.getFormattedDate(date)); // 输出: '2023-7-24'

4.2 扩展原方法

JavaScript内置的Date.prototype.getMonth()方法,返回一个指定的日期对象的月份,为基于 0 的值(0 表示一年中的第一月)

const date = new Date();
console.log(date.getMonth()); // 输出: 6

现在修改为基于 1 的值(1 表示一年中的第一月)

    const date = new Date();

    const originalMethod = Reflect.get(date, 'getMonth');

    Reflect.defineProperty(date, 'getMonth', {
      value: function () {
        return originalMethod.apply(this, arguments) + 1;
      }
    });

    console.log(date.getMonth()); // 输出: 7

5. 参考资料

[1] Reflect - JavaScript | MDN (mozilla.org)

[2] Object - JavaScript | MDN (mozilla.org)

[3] Date - JavaScript | MDN (mozilla.org)

与JavaScript利用反射实现方法注入相似的内容:

JavaScript利用反射实现方法注入

利用反射来实现对JavaScript对象的方法注入,主要使用Reflect和Object.getOwnPropertyDescriptor()来实现

javascript import maps 特性现已被全部主流浏览器支持

值得庆祝 Import maps 特性现在可以在全部三个主要浏览器内使用 现在主流现代web 应用 引入和利用javascript 是通过 Es module 模块实现。 在开发javascript上,比起无模块化功能的旧版浏览器,现代浏览器支持模块化且提供了许多好用的功能 引入 es module

JavaScript 如何验证 URL

前言 当开发者需要为不同目的以不同形式处理URL时,比如说浏览器历史导航,锚点目标,查询参数等等,我们经常会借助于JavaScript。然而,它的频繁使用促使攻击者利用其漏洞。这种被利用的风险是我们必须在我们的JavaScript应用程序中实现URL验证的原因。 URL验证检查URL是否遵循正确的U

【JS】await异常捕获,这样做才完美

文章关注JavaScript中async/await的异常处理,指出未捕获异常的潜在风险。1)使用try-catch,虽全面但冗余;2)借助Promise的catch,减少冗余; 3) 利用await-to-js库简化异常处理

Semantic Kernel入门系列:利用Handlebars创建Prompts functions

引言 本章我们将学习通过Handlebars Prompts Template来创建Prompts functions。 什么是Handlebars? Handlebars是一个流行的 JavaScript 模板引擎,它允许你通过在 HTML 中使用简单的占位符来创建动态的 HTML。 它使用模板和

我们都是调包侠

应用层 在应用层的角度看,比如 JavaScript 开发、Typescript开发、Java 开发、Android 应用开发等等,利用高级编程语言来控制计算机设备,根本无需关注硬件部分,操作系统部分也无需关注,除非是性能优化,可能需要关注操作系统的一些细节。大多数时候我们是利用高级编程语言以及这些

【动画进阶】极具创意的鼠标交互动画

最近,群里在讨论这么一个有趣的交互效果,来源于:vueflow.dev: 通过审查元素,发现原效果借助了 Canvas 实现。 思索了一番,觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番,最终完美的复刻了该效果: 过程中还是有非常多有意思的技巧

SonarQube系列-架构与外部集成

介绍 Sonar是一个代码质量管理的开源平台,基于Java开发的,用于管理源代码的质量,通过插件形式,可以支持包括java、C#、JavaScript等二十余种编程语言的代码质量管理与检测。 它具有免费的社区版本和其他付费版本。 SonarQube之采购选型参考 利用SonarQube的主要好处是:

Flask框架:运用Ajax轮询动态绘图

Ajax是异步JavaScript和XML可用于前后端交互,在之前`《Flask 框架:运用Ajax实现数据交互》`简单实现了前后端交互,本章将通过`Ajax`轮询获取后端的数据,前台使用`echart`绘图库进行图形的生成与展示,后台通过`render_template`方法返回一串JSON数据集,前台收到后将其应用到绘图库上,实现动态监控内存利用率的这个功能。

高级前端开发需要知道的 25 个 JavaScript 单行代码

1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. ...