面试题：JavaScript 中基于类对象和闭包模块兼容性的常见问题及解决方法

兼容性问题及举例

基于类对象：
- 旧浏览器支持：在较旧的浏览器（如 Internet Explorer）中，ES6 类的语法可能不被支持。例如：

class MyClass {
    constructor() {
        this.message = 'Hello';
    }
    sayHello() {
        console.log(this.message);
    }
}
const myObj = new MyClass();
myObj.sayHello();

在不支持 ES6 类的浏览器中，上述代码会报错。

闭包模块：
- 内存泄漏：在某些旧版本的浏览器中，如果闭包使用不当，可能会导致内存泄漏。例如，当闭包持有对 DOM 元素的引用，而该 DOM 元素被移除但闭包仍然存在时，就可能出现内存泄漏。

function outer() {
    const element = document.getElementById('myElement');
    return function inner() {
        console.log(element.textContent);
    };
}
const func = outer();
// 假设'myElement' 被从 DOM 中移除，但闭包 'func' 仍持有对它的引用

解决方法

基于类对象：
- 使用 Babel：可以使用 Babel 将 ES6 类的语法转换为 ES5 兼容的语法。首先安装 Babel 相关工具：

npm install --save -dev @babel/core @babel/cli @babel/preset -env

然后在项目根目录创建 .babelrc 文件，配置如下：

{
    "presets": ["@babel/preset -env"]
}

最后在 package.json 中添加脚本：

{
    "scripts": {
        "build": "babel src -d dist"
    }
}

这样就可以将 src 目录下的 ES6 代码转换为 ES5 代码并输出到 dist 目录。

闭包模块：
- 手动解除引用：在闭包不再需要时，手动将其持有的引用设置为 null。例如，在上述闭包例子中，可以在 myElement 被移除时，手动将闭包中的引用设为 null：

function outer() {
    let element = document.getElementById('myElement');
    return function inner() {
        if (element) {
            console.log(element.textContent);
        }
    };
}
const func = outer();
// 当'myElement' 被移除时
element = null;

星途面试题库

面试题：JavaScript 中基于类对象和闭包模块兼容性的常见问题及解决方法

知识考点

面试题答案

兼容性问题及举例

解决方法