当前位置:   article > 正文

ES6 Class 的继承(十一)

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/844020
推荐阅读
相关标签
  

闽ICP备14008679号