ES6 Class 的继承（十一）

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

javascript 复制代码

class Point {
}
class ColorPoint extends Point {
}

继承的特性：

extends 关键字：使用 extends 来表示一个类继承自另一个类。
super 关键字：在子类的构造函数中使用 super() 调用父类的构造函数。
方法重写：子类可以重写父类的方法。
访问控制：子类可以访问父类的公共和受保护的成员，但不能直接访问私有成员。
对象实例化：子类实例化时，首先执行父类的构造函数。
原型链：子类的原型是父类的实例，子类继承了父类的原型链。

继承的用法：

使用 extends 来实现继承。
在子类的构造函数中使用 super 调用父类的构造函数。
重写父类的方法以提供新的实现。
利用原型链的特性来实现方法的继承。

1. 基本继承

javascript 复制代码

class Animal {
    constructor(name) {
        this.name = name;
    }

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

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

let dog = new Dog('Rex');
console.log(dog.speak()); // 输出: Rex barks.

2. 调用父类的构造函数

javascript 复制代码

class Rectangle {
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }

    getArea() {
        return this.width * this.height;
    }
}

class Square extends Rectangle {
    constructor(sideLength) {
        super(sideLength, sideLength); // 调用父类的构造函数
    }
}

let square = new Square(5);
console.log(square.getArea()); // 输出: 25

3. 方法重写

javascript 复制代码

class Person {
    greet() {
        return 'Hello';
    }
}

class Student extends Person {
    greet() {
        return 'Hello, my name is ' + this.name;
    }
    introduce() {
        return `${this.greet()}, I am a student.`;
    }
}

let student = new Student();
student.name = 'Alice';
console.log(student.introduce()); // 输出: Hello, my name is Alice, I am a student.

4. 访问父类的静态方法

javascript 复制代码

class Animal {
    static getClassName() {
        return 'Animal';
    }
}

class Dog extends Animal {
    static getClassName() {
        return super.getClassName() + ' (Dog)';
    }
}

console.log(Dog.getClassName()); // 输出: Animal (Dog)

5. 原型链方法调用

javascript 复制代码

class Vehicle {
    start() {
        console.log('Vehicle is starting.');
    }
}

class Car extends Vehicle {
    start() {
        super.start(); // 调用父类的 start 方法
        console.log('Car is starting.');
    }
}

let car = new Car();
car.start(); // 输出: Vehicle is starting. 然后 Car is starting.

6. Object.getPrototypeOf 方法可以用来从子类上获取父类。

javascript 复制代码

Object.getPrototypeOf(ColorPoint) === Point
// true

可以使用这个方法判断，一个类是否继承了另一个类。

7. 类的 prototype 属性和proto属性

大多数浏览器的 ES5 实现之中，每一个对象都有 proto 属性，指向对应的构造函数的 prototype 属性。Class 作为构造函数的语法糖，同时有 prototype 属性和 proto 属性，因此同时存在两条继承链。

子类的 proto 属性，表示构造函数的继承，总是指向父类。
子类 prototype 属性的 proto 属性，表示方法的继承，总是指向父类的 prototype 属性。

javascript 复制代码

class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

javascript 复制代码

//类的继承模式
class A {
}
class B {
}
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
const b = new B();

8. 原生构造函数的继承

原生构造函数是指语言内置的构造函数，通常用来生成数据结构。ECMAScript 的原生构造函数大致有下面这些。

Boolean()

Number()

String()

Array()

Date()

Function()

RegExp()

Error()

Object()

9. Mixin 模式的实现

Mixin 指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口。它的最简单实现如下。

javascript 复制代码

const a = {
  a: 'a'
};
const b = {
  b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}