面试题：JavaScript构造函数与原型方法性能优化实践

理解构造函数和原型方法的性能差异
- 构造函数：每次通过构造函数创建新实例时，都会在实例上重新创建一遍定义在构造函数内部的方法。这意味着如果有大量实例创建需求，每个实例都会占用额外的内存来存储这些重复的方法，性能较低。例如：
```
function Person(name) {
    this.name = name;
    this.sayHello = function() {
        console.log(`Hello, I'm ${this.name}`);
    };
}
```
这里sayHello方法会在每个Person实例创建时重新创建。
- 原型方法：定义在原型对象上的方法，所有实例共享这些方法，不会在每个实例上重复创建，节省内存空间，适合大量实例创建的场景。例如：
```
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log(`Hello, I'm ${this.name}`);
};
```
所有Person实例共享sayHello方法。
优化策略
- 将不变的方法定义在原型上：把应用中每个实例都需要的，且逻辑不变的方法定义在构造函数的原型对象上。这样，无论创建多少个实例，这些方法只在内存中存在一份，节省内存，提高性能。例如，在一个游戏角色构造函数中，如果walk方法是每个角色都有的且逻辑固定：
```
function Character(name) {
    this.name = name;
}
Character.prototype.walk = function() {
    console.log(`${this.name} is walking`);
};
```
- 避免在构造函数内部定义复杂的、可复用的函数：复杂函数如果在构造函数内部定义，会在每个实例创建时重复创建，消耗性能。应将其提取到原型上。
- 使用Object.create()优化继承（如果有继承需求）：传统的通过new关键字实现继承可能会在实例化时产生一些不必要的操作。Object.create()方法可以创建一个新对象，使用现有的对象来提供新创建对象的__proto__，更加灵活且性能较好。例如：
```
function Animal() {}
Animal.prototype.move = function() {
    console.log('The animal is moving');
};
function Dog(name) {
    this.name = name;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
    console.log(`${this.name} is barking`);
};
```
实现思路
- 分析业务逻辑：首先梳理应用中每个实例需要的行为和属性，区分哪些是每个实例特有的属性（放在构造函数中定义），哪些是共享的方法（放在原型上定义）。
- 重构代码：将可共享的方法从构造函数内部迁移到原型对象上。
- 测试与优化：完成重构后，进行性能测试，比如使用performance.now()或者专业的性能测试工具（如Lighthouse）来测量实例创建的时间和内存占用，根据测试结果进一步优化。例如，可以对比优化前后创建1000个实例的时间消耗：
```
// 优化前构造函数方式创建实例的性能测试
console.time('beforeOptimization');
for (let i = 0; i < 1000; i++) {
    new Person(`User${i}`);
}
console.timeEnd('beforeOptimization');

// 优化后原型方法方式创建实例的性能测试
console.time('afterOptimization');
for (let i = 0; i < 1000; i++) {
    new Person(`User${i}`);
}
console.timeEnd('afterOptimization');
```

通过以上策略和实现思路，可以有效利用构造函数和原型方法的性能差异，优化具有大量实例创建需求的JavaScript应用的性能。

星途面试题库

面试题：JavaScript构造函数与原型方法性能优化实践

知识考点

面试题答案