编辑“︁JavaScript对象继承”︁

{{DISPLAYTITLE:JavaScript对象继承}}  
'''JavaScript对象继承'''是面向对象编程（OOP）的核心概念之一，允许一个对象（子类）基于另一个对象（父类）的属性和方法进行扩展。JavaScript通过原型链（Prototype Chain）实现继承，这与基于类的语言（如Java）不同。本文将详细解释原型继承、构造函数继承、组合继承等模式，并提供实际应用示例。

== 简介 ==  
在JavaScript中，对象可以通过继承共享其他对象的属性和方法，从而减少代码重复并提高可维护性。继承的主要方式包括：  
* '''原型继承'''：通过原型链实现属性和方法的共享。  
* '''构造函数继承'''：在子类构造函数中调用父类构造函数。  
* '''组合继承'''：结合原型继承和构造函数继承的优点。  
* '''ES6类继承'''：使用`class`和`extends`关键字简化继承语法。

== 原型继承 ==  
JavaScript中的每个对象都有一个内部属性`[[Prototype]]`（可通过`__proto__`或`Object.getPrototypeOf()`访问）。当访问对象的属性时，若对象本身没有该属性，则会沿着原型链向上查找。

=== 基本示例 ===  
<syntaxhighlight lang="javascript">  
// 父对象  
const animal = {  
  type: 'Animal',  
  describe() {  
    return `This is a ${this.type}`;  
  }  
};  

// 子对象继承自animal  
const dog = Object.create(animal);  
dog.type = 'Dog';  

console.log(dog.describe()); // 输出: "This is a Dog"  
</syntaxhighlight>  

'''解释'''：  
1. `Object.create(animal)`创建一个新对象`dog`，并将其`[[Prototype]]`指向`animal`。  
2. `dog.type`覆盖了原型中的`type`属性。  
3. `describe()`方法从原型链中继承。

=== 原型链图示 ===  
<mermaid>  
graph LR  
  dog --> animal --> Object.prototype --> null  
</mermaid>  

== 构造函数继承 ==  
通过调用父类构造函数初始化子类的实例属性，但无法继承父类原型上的方法。

<syntaxhighlight lang="javascript">  
function Animal(type) {  
  this.type = type;  
}  

Animal.prototype.describe = function() {  
  return `This is a ${this.type}`;  
};  

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

const myDog = new Dog('Dog', 'Rex');  
console.log(myDog.type); // 输出: "Dog"  
// console.log(myDog.describe()); // 报错：describe未定义  
</syntaxhighlight>  

'''问题'''：`Dog`实例无法访问`Animal.prototype`的方法。

== 组合继承 ==  
结合构造函数继承和原型继承，解决上述问题。

<syntaxhighlight lang="javascript">  
function Animal(type) {  
  this.type = type;  
}  

Animal.prototype.describe = function() {  
  return `This is a ${this.type}`;  
};  

function Dog(type, name) {  
  Animal.call(this, type); // 构造函数继承  
  this.name = name;  
}  

// 原型继承  
Dog.prototype = Object.create(Animal.prototype);  
Dog.prototype.constructor = Dog; // 修复constructor指向  

const myDog = new Dog('Dog', 'Rex');  
console.log(myDog.describe()); // 输出: "This is a Dog"  
</syntaxhighlight>  

'''关键步骤'''：  
1. `Animal.call(this)`初始化实例属性。  
2. `Object.create(Animal.prototype)`建立原型链。  
3. 修复`constructor`属性以确保类型正确。

== ES6类继承 ==  
ES6引入`class`和`extends`语法糖，简化继承实现。

<syntaxhighlight lang="javascript">  
class Animal {  
  constructor(type) {  
    this.type = type;  
  }  

  describe() {  
    return `This is a ${this.type}`;  
  }  
}  

class Dog extends Animal {  
  constructor(type, name) {  
    super(type); // 调用父类构造函数  
    this.name = name;  
  }  
}  

const myDog = new Dog('Dog', 'Rex');  
console.log(myDog.describe()); // 输出: "This is a Dog"  
</syntaxhighlight>  

'''优势'''：  
* 语法更清晰。  
* `super`关键字简化父类方法调用。

== 实际应用案例 ==  
'''场景'''：构建一个图形编辑器，支持多种形状（矩形、圆形）的公共属性和方法继承。

<syntaxhighlight lang="javascript">  
class Shape {  
  constructor(color) {  
    this.color = color;  
  }  

  draw() {  
    return `Drawing a ${this.color} shape`;  
  }  
}  

class Circle extends Shape {  
  constructor(color, radius) {  
    super(color);  
    this.radius = radius;  
  }  

  draw() {  
    return `${super.draw()} with radius ${this.radius}`;  
  }  
}  

const redCircle = new Circle('red', 10);  
console.log(redCircle.draw()); // 输出: "Drawing a red shape with radius 10"  
</syntaxhighlight>  

== 总结 ==  
JavaScript对象继承通过原型链实现，主要方式包括：  
* '''原型继承'''：适用于方法共享。  
* '''构造函数继承'''：适用于实例属性初始化。  
* '''组合继承'''：结合两者优势。  
* '''ES6类继承'''：推荐使用，语法简洁。  

理解这些模式有助于设计更灵活的代码结构。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript对象]]