Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to achieve inheritance in es6". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In es6, inheritance can be achieved by using the class keyword in conjunction with the extends keyword. The class keyword is introduced in ES6 to declare the class, while class can inherit the properties and methods in the parent class through extends, with the syntax "class subclass name extends parent class name {.};".

The operating environment of this tutorial: windows7 system, ECMAScript version 6, Dell G3 computer.

Class keyword and extends keyword can be used to realize inheritance in es6.

In ES6, class (class) is introduced as a template for objects, and classes can be defined through the class keyword.

Es6 inheritance

Class can inherit through the extends keyword

Class Animal {} class Cat extends Animal {}

A Cat class is defined in the above code, which inherits all the properties and methods in the Animal class through the extends keyword. But since no code is deployed, the two classes are exactly the same, which is tantamount to copying an Animal class. Next, let's add code inside Cat.

Class Cat extends Animal {constructor (name, age, color) {/ / call parent's constructor (name, age) super (name, age); this.color = color;} toString () {return this.color +'+ super.toString (); / / call parent's toString ()}}

The super keyword appears in both the constructor method and the toString method, where it represents the constructor of the parent class and is used to create the this object of the parent class.

It is important to note that the class keyword is only the syntax sugar of the prototype, and JavaScript inheritance is still based on the prototype.

Class Pet {constructor (name, age) {this.name = name; this.age = age;} showName () {console.log ("calling the method of the parent class"); console.log (this.name, this.age);}} / / define a subclass class Dog extends Pet {constructor (name, age, color) {super (name, age); / / call the constructor of the parent class this.color = color through super } showName () {console.log ("calling methods of subclasses"); console.log (this.name, this.age, this.color);}}

Advantages:

Clear and convenient

Disadvantages:

Not all browsers support class.

This is the end of "how to implement inheritance in es6". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.