面试题：JavaScript 中为已有类添加方法的兼容性常见问题及解决思路

Question

在 JavaScript 中，假设你有一个内置类 `Array`，现在要为它添加一个新方法 `customSum` 用于计算数组所有元素之和。请描述在不同浏览器环境下可能出现的兼容性问题，并说明一种常见的解决思路。

Answer 1

兼容性问题

1. 旧版本浏览器：在一些较旧的浏览器（如IE8及以下），直接给内置类（如Array）原型添加方法可能会导致兼容性问题。因为这些浏览器对内置对象原型的扩展支持不完善，可能会出现不可预料的错误，比如在IE8及以下，向Object.prototype添加新属性或方法时，可能会影响到for...in循环遍历对象属性的行为。
2. 严格模式：在严格模式下，如果使用eval或with等可能改变作用域链的语法，可能会导致新添加的方法行为异常。例如eval内部创建的函数作用域与外部作用域对Array.prototype的扩展认知可能不同。

常见解决思路

1. 检测是否已存在该方法：

if (!Array.prototype.customSum) {
    Array.prototype.customSum = function() {
        return this.reduce((acc, val) => acc + val, 0);
    };
}

这样可以确保在不同浏览器环境下，只有当Array.prototype上不存在customSum方法时才进行添加，避免覆盖已有的自定义实现。同时，使用reduce方法计算数组元素之和是一种简洁且兼容性较好的方式，现代浏览器基本都支持reduce，对于不支持的旧浏览器，可以先对Array.prototype添加reduce方法的垫片（polyfill），例如：

if (!Array.prototype.reduce) {
    Array.prototype.reduce = function(callback, initialValue) {
        let accumulator;
        let i;
        if (initialValue === undefined) {
            accumulator = this[0];
            i = 1;
        } else {
            accumulator = initialValue;
            i = 0;
        }
        for (; i < this.length; i++) {
            accumulator = callback(accumulator, this[i], i, this);
        }
        return accumulator;
    };
}

然后再添加customSum方法。