MST

星途 面试题库

面试题:JavaScript 函数作为值的兼容性优化之中等题

在JavaScript中,当把函数作为值传递给不同浏览器环境下的第三方库时,经常会遇到兼容性问题。假设你有一个函数 `function add(a, b) { return a + b; }`,现在要将其传递给一个可能在旧版IE浏览器中运行的库,你会如何对这个函数进行简单的兼容性优化以确保它能正确传递和使用?
17.6万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试
  1. 使用 Function.prototype.bind 进行兼容性处理
    • 在旧版IE浏览器中,Function.prototype.bind 方法不存在,所以需要先进行兼容性的填充。
    • 可以使用以下代码进行填充:
if (!Function.prototype.bind) {
    Function.prototype.bind = function (oThis) {
        if (typeof this!== 'function') {
            throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
        }
        var aArgs = Array.prototype.slice.call(arguments, 1),
            fToBind = this,
            fNOP = function () { },
            fBound = function () {
                return fToBind.apply(this instanceof fNOP? this : oThis,
                    aArgs.concat(Array.prototype.slice.call(arguments)));
            };
        fNOP.prototype = this.prototype;
        fBound.prototype = new fNOP();
        return fBound;
    };
}
  • 对于 add 函数,可以这样处理:
function add(a, b) {
    return a + b;
}
var safeAdd = add.bind(null);
// 然后将safeAdd传递给第三方库,这样在旧版IE等不支持bind原生实现的浏览器中也能确保函数正确传递和使用
  1. 使用 callapply 进行替代(另一种思路)
    • 当传递函数到第三方库时,可以通过创建一个包装函数,在包装函数内部使用 callapply 来调用原始的 add 函数。
function add(a, b) {
    return a + b;
}
function wrapperAdd() {
    return add.apply(null, arguments);
}
// 将wrapperAdd传递给第三方库,在旧版IE浏览器中,通过apply也能正确调用add函数