面试题：JavaScript 反射 API 兼容性在复杂场景下的应用

Question

假设你正在开发一个跨浏览器的 JavaScript 库，该库需要频繁使用反射 API 的 Reflect.getPrototypeOf 方法来获取对象原型。但不同浏览器对该方法的支持存在差异，且你需要确保库在旧版本浏览器（如 IE11）中也能正常工作。请详细阐述你的兼容性解决方案，包括如何检测浏览器支持情况、如何编写有效的 polyfill 以及在性能方面需要考虑哪些因素。

Answer 1

1. 检测浏览器支持情况

可以通过简单的代码检查 Reflect 对象是否存在以及 Reflect.getPrototypeOf 方法是否是一个函数来判断浏览器是否支持该方法。

if (typeof Reflect === 'object' && typeof Reflect.getPrototypeOf === 'function') {
    // 浏览器支持 Reflect.getPrototypeOf
} else {
    // 浏览器不支持，需要 polyfill
}

2. 编写有效的 polyfill

Reflect.getPrototypeOf 的 polyfill 实现其实就是模拟该方法的功能。在 JavaScript 中，获取对象原型可以使用 Object.getPrototypeOf 方法（该方法在较旧浏览器如 IE9+ 都有支持）。

if (typeof Reflect === 'object' && typeof Reflect.getPrototypeOf === 'function') {
    // 浏览器支持，无需 polyfill
} else {
    Reflect = Reflect || {};
    Reflect.getPrototypeOf = function(target) {
        if (typeof target!== 'object' && typeof target!== 'function') {
            throw new TypeError('Target must be an object');
        }
        return Object.getPrototypeOf(target);
    };
}

上述代码首先检查 Reflect 对象是否存在以及 Reflect.getPrototypeOf 方法是否可用。如果不可用，则创建 Reflect 对象并定义 getPrototypeOf 方法。该方法会检查传入的 target 是否为对象或函数，如果不是则抛出类型错误，否则使用 Object.getPrototypeOf 获取原型。

3. 性能方面需要考虑的因素

• 避免重复检测：在库的初始化阶段进行一次浏览器支持检测即可，避免在库的使用过程中反复检测，以减少性能开销。
• 原生方法优先：当浏览器支持原生的 Reflect.getPrototypeOf 时，直接使用原生方法，因为原生方法通常经过了浏览器的优化，性能更好。
• polyfill 性能：虽然 Object.getPrototypeOf 已经是一个性能相对较好的获取原型的方法，但在 polyfill 中额外的类型检查等操作可能会带来一些性能损耗，尽量保持 polyfill 的简洁性，减少不必要的操作。