面试题：JavaScript prototype 在复杂应用场景下的问题及解决方案

Question

在大型 JavaScript 应用中，基于 prototype 的面向对象编程可能会遇到哪些问题，例如内存泄漏、原型链过长等，针对这些问题，你会提出哪些有效的解决方案？请结合实际项目经验进行分析。

Answer 1

基于 prototype 的面向对象编程在大型 JavaScript 应用中可能遇到的问题

1. 内存泄漏：
   • 问题分析：当对象之间形成循环引用时，可能导致内存无法释放。例如，一个对象 A 的属性引用了对象 B，而对象 B 的属性又引用了对象 A，垃圾回收机制可能无法识别这种情况，从而导致内存泄漏。在实际项目中，如果频繁创建和销毁包含循环引用的对象，随着时间推移，内存会不断增加，最终可能导致应用性能下降甚至崩溃。
   • 示例代码：

function A() {
    this.b;
}
function B() {
    this.a;
}
let a = new A();
let b = new B();
a.b = b;
b.a = a;
// 这里a和b形成了循环引用，在某些情况下可能导致内存泄漏

2. 原型链过长：
   • 问题分析：随着继承层次的加深，原型链会不断拉长。当访问对象的属性或方法时，JavaScript 引擎需要沿着原型链逐级查找，这会增加查找时间，降低性能。在实际项目中，如果有复杂的继承体系，例如多层嵌套的类继承，对属性和方法的访问可能变得缓慢。
   • 示例代码：

function Animal() {}
Animal.prototype.move = function() {
    console.log('I can move');
};
function Mammal() {}
Mammal.prototype = Object.create(Animal.prototype);
Mammal.prototype.constructor = Mammal;
function Dog() {}
Dog.prototype = Object.create(Mammal.prototype);
Dog.prototype.constructor = Dog;
let dog = new Dog();
// 这里从dog对象查找move方法，要经过Dog -> Mammal -> Animal的原型链，层次较多

3. 原型污染：
   • 问题分析：恶意代码可以通过修改原型对象，影响所有继承自该原型的对象。例如，攻击者可以在全局对象（如 Object.prototype）上添加恶意属性或方法，使得应用中的所有对象都受到影响，这可能导致安全漏洞。在实际项目中，如果引入了不可信的第三方库或者用户输入没有经过严格验证，就可能发生原型污染。
   • 示例代码：

// 恶意代码
Object.prototype.evilMethod = function() {
    console.log('You have been hacked!');
};
let obj = {};
obj.evilMethod(); // 即使obj没有定义evilMethod，由于原型污染也会执行恶意代码

针对这些问题的解决方案

1. 解决内存泄漏：
   • 方案一：手动解除引用：在对象不再使用时，手动将循环引用的属性设置为 null。例如上述 A 和 B 的例子，当不再需要 a 和 b 时：

a.b = null;
b.a = null;
a = null;
b = null;
// 这样垃圾回收机制就可以回收相关内存

• 方案二：使用 WeakMap 或 WeakSet：WeakMap 和 WeakSet 中的键或值是弱引用，当对象没有其他引用时，垃圾回收机制可以自动回收其内存。例如，在需要存储对象关系时，可以使用 WeakMap 代替普通 Map：

let weakMap = new WeakMap();
let obj1 = {};
let obj2 = {};
weakMap.set(obj1, obj2);
// 当obj1不再有其他引用时，垃圾回收机制可以回收obj1和相关的WeakMap项

2. 解决原型链过长：
   • 方案一：优化继承结构：尽量减少继承层次，避免不必要的多层嵌套继承。可以考虑使用组合模式代替继承，将功能模块化，通过组合不同的模块来实现对象的功能，而不是通过深度继承。例如，在上述动物的例子中，可以将 move 功能作为一个独立模块，通过组合的方式添加到 Dog 对象中：

let moveModule = {
    move: function() {
        console.log('I can move');
    }
};
function Dog() {}
Object.assign(Dog.prototype, moveModule);
let dog = new Dog();
dog.move();

• 方案二：缓存常用属性和方法：对于经常访问的属性或方法，可以在对象自身上缓存，避免每次都通过原型链查找。例如，如果 Dog 对象经常调用 move 方法，可以在构造函数中缓存：

function Dog() {
    this.move = function() {
        console.log('I can move');
    };
}
let dog = new Dog();
dog.move();
// 这样直接在dog对象自身查找move方法，提高性能

3. 解决原型污染：
   • 方案一：避免扩展原生原型：尽量不要在原生对象（如 Object.prototype、Array.prototype 等）上添加属性或方法，除非有绝对必要。如果需要扩展功能，可以使用 Object.defineProperty 来创建不可枚举的属性，降低污染风险。
   • 方案二：严格验证输入：在接收用户输入或引入第三方库时，进行严格的输入验证。可以使用 Object.freeze 方法冻结对象，防止其被修改。例如，对于不可信的对象输入：

let untrustedObj = {
    someProp: 'value'
};
let trustedObj = Object.freeze(untrustedObj);
// 现在trustedObj不能被修改，防止原型污染