js prototype 继承

JavaScript 中的 prototype 继承是一种基于原型的对象继承机制。每个 JavaScript 对象都有一个内部属性 [[Prototype]]，它指向另一个对象，即该对象的原型。当试图访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的末端（即 null）。

基础概念

• 原型（Prototype）：每个函数都有一个 prototype 属性，它指向一个对象，这个对象包含可以被该函数的所有实例共享的属性和方法。
• 实例（Instance）：通过 new 关键字调用构造函数创建的对象称为实例。
• 原型链（Prototype Chain）：当访问一个对象的属性时，JavaScript 引擎会首先在该对象本身查找，如果没有找到，就会在其 [[Prototype]] 上查找，依此类推，直到找到属性或到达原型链的末端。

示例代码

function Animal(name) {
    this.name = name;
}

Animal.prototype.sayName = function() {
    console.log('My name is ' + this.name);
};

function Dog(name, breed) {
    Animal.call(this, name); // 调用父类构造函数
    this.breed = breed;
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修复 constructor 指向

Dog.prototype.sayBreed = function() {
    console.log('My breed is ' + this.breed);
};

var myDog = new Dog('Buddy', 'Golden Retriever');
myDog.sayName(); // 输出: My name is Buddy
myDog.sayBreed(); // 输出: My breed is Golden Retriever

优势

1. 共享属性和方法：通过原型继承，可以将方法定义在原型上，这样所有实例都可以共享这些方法，节省内存。
2. 动态性：可以在运行时向原型添加新的属性和方法，这些更改会立即反映在所有实例上。
3. 灵活性：原型继承允许创建复杂的继承结构，可以轻松地实现多重继承的效果。

类型

• 原型链继承：通过设置子类的原型为父类的实例来实现继承。
• 构造函数继承：通过在子类构造函数中调用父类构造函数来实现继承。
• 组合继承：结合原型链继承和构造函数继承的优点。
• 寄生组合继承：优化组合继承，避免两次调用父类构造函数。

应用场景

• 创建具有相似行为的对象：当多个对象需要共享某些方法时，可以将这些方法定义在它们的原型上。
• 实现类库和框架：原型继承是许多 JavaScript 类库和框架的基础。
• 构建复杂的数据结构：通过原型继承可以创建具有层次结构的对象系统。

常见问题及解决方法

问题：原型链过长导致性能问题

原因：当原型链过长时，查找属性或方法的时间会增加，影响性能。

解决方法：

• 尽量保持原型链简洁。
• 使用缓存机制存储常用属性和方法。

问题：原型污染

原因：如果多个对象共享同一个原型，一个对象的属性更改可能会影响到其他对象。

解决方法：

• 使用 Object.create(null) 创建没有原型的对象。
• 在设置原型时使用深拷贝，避免引用共享。

通过理解这些基础概念和最佳实践，可以有效地利用 JavaScript 的原型继承机制来构建可维护和高效的代码。