面试题：JavaScript 类和构造函数在 ES6 与 ES5 过渡中的深度优化技巧

1. 兼容性优化

转译工具：使用 Babel 进行转译，确保 ES6 代码能在不支持 ES6 的环境中运行。例如，在项目中安装 Babel 相关依赖：

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

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

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["ie >= 11"]
        }
      }
    ]
  ]
}

Polyfill：对于一些 ES6 新增的全局对象和方法，如 Promise、Array.from 等，在低版本环境中不存在，可引入 core - js 作为 Polyfill。安装：

npm install --save core - js

在入口文件引入：

import 'core - js/stable';
import 'regenerator - runtime/runtime';

2. 性能优化

方法定义：在 ES6 类中，方法直接定义在类体中，相比 ES5 构造函数通过原型链添加方法，在查找方法时性能更优。

// ES5 构造函数模式
function PersonES5(name) {
  this.name = name;
}
PersonES5.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// ES6 类模式
class PersonES6 {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

避免不必要的计算：在类的属性初始化时，避免进行复杂且重复的计算。如果需要，可以使用 getter 方法延迟计算。

class Circle {
  constructor(radius) {
    this.radius = radius;
  }
  get area() {
    return Math.PI * this.radius * this.radius;
  }
}

3. 可维护性优化

多重继承处理：ES6 类本身不支持多重继承，但可以通过混入（Mixin）模式模拟多重继承。

// 定义混入函数
function mixin(target, ...sources) {
  sources.forEach(source => {
    Object.getOwnPropertyNames(source.prototype).forEach(name => {
      if (name!== 'constructor' &&!Object.prototype.hasOwnProperty.call(target.prototype, name)) {
        Object.defineProperty(target.prototype, name, Object.getOwnPropertyDescriptor(source.prototype, name));
      }
    });
  });
  return target;
}

// 定义混入类
class Flyable {
  fly() {
    console.log('I can fly');
  }
}

class Swimmable {
  swim() {
    console.log('I can swim');
  }
}

// 使用混入
class Duck {
  constructor(name) {
    this.name = name;
  }
}

mixin(Duck, Flyable, Swimmable);

const donald = new Duck('Donald');
donald.fly();
donald.swim();

属性描述符转换：在 ES6 类中，属性默认是可枚举的。如果在 ES5 构造函数中有特定的属性描述符需求，如不可枚举、只读等，需要使用 Object.defineProperty 进行设置。

// ES5 构造函数中设置不可枚举属性
function CarES5() {
  this._engine = 'V8';
}
Object.defineProperty(CarES5.prototype, 'engine', {
  get() {
    return this._engine;
  },
  enumerable: false
});

// ES6 类实现同样效果
class CarES6 {
  constructor() {
    this._engine = 'V8';
  }
  get engine() {
    return this._engine;
  }
}
Object.defineProperty(CarES6.prototype, 'engine', { enumerable: false });

面试题：JavaScript 类和构造函数在 ES6 与 ES5 过渡中的深度优化技巧

知识考点

面试题答案

1. 兼容性优化

2. 性能优化

3. 可维护性优化