原型继承 js

在JavaScript中，原型继承是一种实现对象间属性和方法共享的机制。以下是关于原型继承的基础概念、优势、类型、应用场景以及常见问题解答：

基础概念

1. 原型（Prototype）：每个JavaScript对象都有一个原型，它是一个对象，包含了共享的属性和方法。
2. 原型链（Prototype Chain）：当访问一个对象的属性或方法时，如果对象本身没有这个属性或方法，JavaScript会沿着原型链向上查找，直到找到该属性或方法或到达原型链的末端。

优势

1. 代码复用：通过原型继承，多个对象可以共享同一份代码，减少内存占用。
2. 动态扩展：可以在运行时动态地向原型添加属性和方法，所有基于该原型的对象都会立即获得这些新特性。

类型

1. 构造函数继承：通过调用父类构造函数来继承属性。
2. 原型链继承：通过将子类的原型设置为父类的一个实例来继承方法。
3. 组合继承：结合构造函数继承和原型链继承的优点。
4. ES6类继承：使用class和extends关键字实现继承，语法更简洁明了。

应用场景

• 当需要创建多个具有相似属性和方法的对象时，可以使用原型继承来简化代码。
• 在构建复杂的JavaScript应用时，原型继承有助于组织和管理代码结构。

常见问题及解决方法

问题1：为什么会出现“TypeError: Cannot read property 'xxx' of undefined”？

这通常是因为在访问一个对象的属性时，该对象或其原型链上的某个对象是undefined。解决方法是确保在访问属性之前，对象及其原型链上的所有对象都已被正确初始化。

问题2：如何避免原型链继承中的属性共享问题？

在使用原型链继承时，如果父类的某个属性是一个引用类型（如数组或对象），那么所有子类实例将共享这个属性。为了避免这个问题，可以在子类的构造函数中重新创建这个属性。

示例代码：

// 父类构造函数
function Parent() {
  this.name = 'Parent';
  this.arr = [1, 2, 3]; // 引用类型属性
}

// 子类构造函数
function Child() {
  Parent.call(this); // 调用父类构造函数，继承属性
  // 重新创建引用类型属性，避免共享
  this.arr = [...this.arr];
}

// 设置子类的原型为父类的实例
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

// 创建子类实例
const child1 = new Child();
const child2 = new Child();

// 修改child1的arr属性，不会影响child2的arr属性
child1.arr.push(4);
console.log(child1.arr); // [1, 2, 3, 4]
console.log(child2.arr); // [1, 2, 3]

在这个示例中，通过在子类构造函数中重新创建arr属性，我们避免了子类实例之间共享同一个数组的问题。