JavaScript利用反射实现方法注入

1. 引言

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

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

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

以下记述利用反射来实现对JavaScript对象的方法注入，主要使用Reflect和Object.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)