ES6 Class 的继承（十一）

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

class Point {
}
class ColorPoint extends Point {
}
1
2
3
4

继承的特性：

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

继承的用法：

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

1. 基本继承

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. 调用父类的构造函数

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 方法重写

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

4. 访问父类的静态方法

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

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

console.log(Dog.getClassName()); // 输出: Animal (Dog)
1
2
3
4
5
6
7
8
9
10
11
12
13

5. 原型链方法调用

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

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

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

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

class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true
1
2
3
4
5
6

//类的继承模式
class A {
}
class B {
}
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
const b = new B();
1
2
3
4
5
6
7
8
9
10

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

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()

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

const a = {
  a: 'a'
};
const b = {
  b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}
1
2
3
4
5
6
7