Talk more about class inheritance in JavaScript

“This is the 17th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

👉 Previous review: Basic introduction to JavaScript Class

In this section, which focuses on inheritance in a class, let’s start with a common example

The extends keyword

Let’s say I created an Animal class

class Animal { constructor(name) { this.speed = 0; this.name = name; } run(speed) { this.speed = speed; Console. log(' ${this.name} runs at ${this.speed}. '); } stop() { this.speed = 0; Console. log(' ${this.name} stop running '); } } let animal = new Animal("My animal");Copy the code

Now I want to create another Dog class, because Dog Dog is an Animal, so [Dog] should be based on [Animal], it needs to be able to access [Animal] method, so that [Dog] can do things that “ordinary” animals can do.

This is where you can use class inheritance,

📖 keyword extends,

📖 Basic syntax class Child extends Parent

Now try creating a puppy that inherits from an animal.

Class Dog extends Animal {speak() {console.log(' ${this.name} 'extends Animal {speak() {console.log(' ${this.name}') `); }}Copy the code

🍉 Running result:

You can see that puppies can access the run() and stop() methods in animals as well as their own speak() methods.

💡 Example analysis:

Internally, the extends keyword works using the old stereotype mechanism.

It sets dog.prototype.[[prototype]] to animal.prototype. So, if you can’t find a method in dog. prototype, JavaScript gets that method from animal. prototype.

Portal: Archetypal inheritance

Override the method of the parent class

If I write a stop() method in dog, which one will be executed?

🍉 Running result:

As can be seen from the running results, the execution priority of [own] method is higher than that of [parent], but sometimes, we just want to adjust or expand on the basis of [parent] method, and do not want to completely replace [parent] method, so how to achieve this?

Class provides the “super” keyword for this purpose.

• performsuper.method(...)To call a superclass method.
• performsuper(...)To call a parent class constructor (only in our constructor).

Now let’s try again. Let the dog bark when it stops running

class Dog extends Animal {
  stop() {
    super.stop(); // 调用父类的 stop
    console.log(`${this.name} 叫了一声！`);
  }
}
Copy the code

🍉 Running result:

Rewrite the constructor

Finally, we can see that none of the above dogs have their own constructor.

According to the specification, if a class extends another class without constructor, the following “empty” constructor is generated:

Class Dog extends Animal {// Constructor generated for an extension class that doesn't have its own constructor(... args) { super(... args); }}Copy the code

It calls the parent class’s constructor and passes all the arguments. This is what happens if we don’t write our own constructor.

Now let’s add a custom constructor for Dog

class Animal {
 constructor(name) {
    this.speed = 0;
    this.name = name;
  }
}
class Dog extends Animal {
 constructor(name, earLength) {
    this.speed = 0;
    this.name = name;
    this.earLength = earLength;
  }
}

let dog = new Dog("Dog", 10);
Copy the code

🍉 Running result:

As you can see, an error is reported when you try to create a new dog.

This is because ** inherits the constructor class and must call super(…). , and be sure to call it before using this. ** So for Dog’s constructor to work properly, it needs to call super() before using this.

🎨 example:

. class Dog extends Animal { constructor(name, earLength) { super(name); // key this.name = name; this.earLength = earLength; }}...Copy the code

🍉 Running result:

References:

MDN Classes

WIKI Class (computer programming)

Class basic syntax

---

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 Product, technology, design and other areas of the Internet “basic terms” literacy

👉 Web security defense means are here!

👉 7 types of JavaScript to fill in the gaps!

👉 JavaScript deep copy and shallow copy read this article is enough!