继承

JavaScript的继承与其他语言中的继承的工作不同,这可能很混乱。 ES6类提供了一种语法糖,试图缓解使用ES5中存在的原型继承的问题。

为了说明这一点,我们创建一个动物园应用,其中创建鸟类。在经典继承中,我们定义一个基类,然后将其子类化以创建一个派生类。

子类化

下面的示例代码显示如何使用extends关键字从Bird派生Penguin 。还要注意在Penguin的子类构造函数中使用的super关键字,它用于将参数传递给基类Bird的构造函数。

Bird类定义了Penguin类继承的方法walk,并且可以被Penguin对象的实例使用。 同样,Penguin类定义了不能用于Bird对象的方法swim。 继承从上到下从基类到它的子类。

对象初始化

当使用new运算符创建对象时,调用类构造函数,在完全创建对象之前将调用它。 consturctor用于传递参数以初始化新创建的对象。

对象创建的顺序从它的基类开始,然后向下移动到任何子类。

  1. // 基类 : ES6
  2. class Bird {
  3. constructor(weight, height) {
  4. this.weight = weight;
  5. this.height = height;
  6. }
  7. walk() {
  8. console.log('walk!');
  9. }
  10. }
  11. // 子类
  12. class Penguin extends Bird {
  13. constructor(weight, height) {
  14. super(weight, height);
  15. }
  16. swim() {
  17. console.log('swim!');
  18. }
  19. }
  20. // Penguin object
  21. let penguin = new Penguin(...);
  22. penguin.walk(); //walk!
  23. penguin.swim(); //swim!

下面我们展示了在class引入JavaScript之前,原型继承是如何实现的。

  1. // JavaScript classical inheritance.
  2. // Bird constructor
  3. function Bird(weight, height) {
  4. this.weight = weight;
  5. this.height = height;
  6. }
  7. // Add method to Bird prototype.
  8. Bird.prototype.walk = function() {
  9. console.log("walk!");
  10. };
  11. // Penguin constructor.
  12. function Penguin(weight, height) {
  13. Bird.call(this, weight, height);
  14. }
  15. // Prototypal inheritance (Penguin is-a Bird).
  16. Penguin.prototype = Object.create( Bird.prototype );
  17. Penguin.prototype.constructor = Penguin;
  18. // Add method to Penguin prototype.
  19. Penguin.prototype.swim = function() {
  20. console.log("swim!");
  21. };
  22. // Create a Penguin object.
  23. let penguin = new Penguin(50,10);
  24. // Calls method on Bird, since it's not defined by Penguin.
  25. penguin.walk(); // walk!
  26. // Calls method on Penguin.
  27. penguin.swim(); // swim!