面试题：JavaScript原型链与函数继承在复杂应用场景下的优化与实践

可能出现问题的原因

函数继承导致的性能问题：
- 在多层函数继承中，每次调用构造函数都会重新创建方法，即使这些方法在不同实例间是相同的。例如：

function Parent() {
    this.sayHello = function() {
        console.log('Hello from Parent');
    };
}
function Child() {
    Parent.call(this);
}
let child1 = new Child();
let child2 = new Child();
// child1.sayHello 和 child2.sayHello 是不同的函数实例，占用额外内存

这会导致大量重复的函数实例创建，增加内存消耗，降低性能。

原型链查找导致的性能问题：
- 复杂的原型链结构使得属性和方法查找变得缓慢。当访问一个对象的属性或方法时，JavaScript会沿着原型链一直查找，直到找到目标或者到达原型链顶端。例如：

function GrandParent() {}
GrandParent.prototype.someMethod = function() {
    console.log('Method in GrandParent');
};
function Parent() {}
Parent.prototype = new GrandParent();
function Child() {}
Child.prototype = new Parent();
let child = new Child();
// 查找 someMethod 时，需要沿着 Child -> Parent -> GrandParent 的原型链查找

原型链越长，查找时间越长，性能越差。

内存泄漏风险：
- 当对象之间存在循环引用时，可能导致内存泄漏。例如：

function A() {
    this.b;
}
function B() {
    this.a;
}
let a = new A();
let b = new B();
a.b = b;
b.a = a;
// a 和 b 相互引用，若没有其他外部引用，垃圾回收机制无法回收它们占用的内存

优化方案

使用寄生组合式继承优化函数继承：
- 寄生组合式继承结合了寄生式继承和组合式继承的优点，避免了在子类构造函数中重复创建父类方法。
- 示例代码：

function Parent(name) {
    this.name = name;
}
Parent.prototype.sayName = function() {
    console.log('My name is'+ this.name);
};
function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}
function inheritPrototype(subType, superType) {
    let prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
inheritPrototype(Child, Parent);
let child = new Child('John', 25);
child.sayName();
// 通过寄生组合式继承，sayName 方法不会在每个 Child 实例中重复创建

避免不必要的原型链嵌套：
- 尽量减少原型链的深度，合理设计对象结构。例如，如果某些功能不需要通过原型链继承，可以直接作为对象的属性或方法。
- 示例代码：

function Parent() {
    this.commonMethod = function() {
        console.log('Common method');
    };
}
function Child() {
    Parent.call(this);
    // 对于不依赖原型链继承的功能，直接作为自身方法
    this.specificMethod = function() {
        console.log('Specific method for Child');
    };
}
let child = new Child();
child.commonMethod();
child.specificMethod();
// 减少了原型链查找深度，提高性能

打破循环引用：
- 在适当的时候，手动打破对象之间的循环引用，以便垃圾回收机制能够回收内存。
- 示例代码：

function A() {
    this.b;
}
function B() {
    this.a;
}
let a = new A();
let b = new B();
a.b = b;
b.a = a;
// 当不再需要 a 和 b 时，打破循环引用
a.b = null;
b.a = null;
// 此时垃圾回收机制可以回收 a 和 b 占用的内存

星途面试题库

面试题：JavaScript原型链与函数继承在复杂应用场景下的优化与实践

知识考点

面试题答案

可能出现问题的原因

优化方案