编辑“︁JavaScript类继承”︁（章节）

= JavaScript类继承 =

'''JavaScript类继承'''是面向对象编程（OOP）的核心概念之一，它允许一个类（子类）基于另一个类（父类）来创建，继承父类的属性和方法，同时可以扩展或修改它们。在JavaScript中，类继承是通过原型链（prototype chain）实现的，ES6之后引入了更简洁的`class`和`extends`语法来支持继承。

== 介绍 ==
在JavaScript中，继承允许子类复用父类的代码，从而减少重复并提高代码的可维护性。继承的主要方式包括：
* '''原型继承'''（Prototypal Inheritance）：基于原型链的继承。
* '''类继承'''（Class Inheritance）：使用ES6的`class`和`extends`关键字实现。

== 原型继承 ==
在ES6之前，JavaScript使用原型链实现继承。每个对象都有一个内部属性`[[Prototype]]`（可通过`__proto__`或`Object.getPrototypeOf()`访问），指向其父类的原型对象。

=== 基本示例 ===
<syntaxhighlight lang="javascript">
// 父类
function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

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

// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 子类方法
Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

const dog = new Dog('Rex');
dog.speak(); // 输出: "Rex barks."
</syntaxhighlight>

'''解释'''：
1. `Animal`是父类，`Dog`是子类。
2. `Dog.prototype = Object.create(Animal.prototype)`确保`Dog`继承`Animal`的原型方法。
3. `Dog.prototype.constructor = Dog`修复构造函数指向。
4. 子类可以覆盖父类方法（如`speak`）。

== ES6类继承 ==
ES6引入了`class`和`extends`语法，使继承更直观。

=== 基本语法 ===
<syntaxhighlight lang="javascript">
class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex');
dog.speak(); // 输出: "Rex barks."
</syntaxhighlight>

'''解释'''：
1. `extends`关键字表示`Dog`继承`Animal`。
2. `super()`可在子类构造函数中调用父类构造函数（未显式调用时自动调用）。
3. 方法可被覆盖（如`speak`）。

=== `super`关键字 ===
`super`用于调用父类的方法或构造函数：
<syntaxhighlight lang="javascript">
class Cat extends Animal {
    speak() {
        super.speak(); // 调用父类的speak方法
        console.log(`${this.name} meows.`);
    }
}

const cat = new Cat('Whiskers');
cat.speak();
// 输出:
// "Whiskers makes a noise."
// "Whiskers meows."
</syntaxhighlight>

== 继承链与原型链 ==
JavaScript的继承基于原型链。以下是`Dog`实例的原型链示意图：
<mermaid>
graph LR
    dogInstance[Dog Instance] --> Dog.prototype
    Dog.prototype --> Animal.prototype
    Animal.prototype --> Object.prototype
    Object.prototype --> null
</mermaid>

== 实际应用案例 ==
=== 场景：UI组件继承 ===
假设有一个基础`Button`类，`PrimaryButton`和`SecondaryButton`继承它：
<syntaxhighlight lang="javascript">
class Button {
    constructor(text) {
        this.text = text;
    }

    render() {
        return `<button>${this.text}</button>`;
    }
}

class PrimaryButton extends Button {
    render() {
        return `<button class="primary">${this.text}</button>`;
    }
}

class SecondaryButton extends Button {
    render() {
        return `<button class="secondary">${this.text}</button>`;
    }
}

const primary = new PrimaryButton('Submit');
console.log(primary.render()); // 输出: "<button class="primary">Submit</button>"
</syntaxhighlight>

== 注意事项 ==
1. '''多重继承'''：JavaScript不支持多重继承（一个子类继承多个父类），但可通过混入（Mixins）或组合实现类似功能。
2. '''性能'''：过深的原型链可能影响性能。
3. '''`instanceof`检查'''：`instanceof`运算符基于原型链检查对象是否属于某个类。

== 总结 ==
JavaScript类继承通过原型链或ES6的`class`/`extends`实现，允许代码复用和层次化设计。理解原型链是关键，而`super`和`extends`提供了更清晰的语法。实际开发中，继承常用于构建可扩展的组件或模块。

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