As for the concept of class, I believe that those who have learned programming should be familiar with it, because it has been implemented in other programming languages for a long time, but not in JavaScript language. For a long time, developers have used function and prototype to simulate the class to achieve object-oriented programming .

In case you’ve forgotten, section 9 of the ES6 series introduces Object-Oriented JavaScript, and you can check it out.

Now, the good news is that ES6 brings the concept of a class to JavaScript. But in fact, the JavaScript class is essentially a further encapsulation of the prototype implementation, making it easier to use. That is, it is actually the function and prototype implementation.

Basic usage

So, let’s use the ES6 wrapped class to do what we want, and let’s learn the basics.

To declare a class:

Constructor constructor(color){this.color = color; }}Copy the code

The constructor method refers to the instantiated object of the class. This is the declaration that implements a class. The constructor method is called Animal.

Where constructor is a mandatory method for a class that returns an instance object by default; This method is called to initialize an instance object of a class when it is created. If you do not write a constructor method, it will be executed with a default empty constructor method.

Class properties and methods

Now that you know the nature of class declarations and the constructor constructor, let’s look at how to add attributes and methods to a class.

Class Animal {// constructor(name){// attribute name this.name = name; } // Custom method getNamegetName() {returnthis.name; }}Copy the code

We call the contents of the parentheses {} after the class name the body of the class, and we write the properties and methods of the class inside the body. In the above case, there are two methods in the class body: constructor() and getName().

The constructor method is called when instantiating a class. The constructor method is required and unique; a class body cannot contain more than one constructor method. We can customize some object properties within the method, such as the name property in the example.

In addition, we have a custom getName() method that belongs to the instance method of the class and can be called by the object after instantiation.

Class

Now that we know how to write class properties and methods, we’ll learn how to create objects and use instance methods of objects:

Class Animal {// constructor(name){// attribute name this.name = name; } // Custom method getNamegetName() {return 'This is a'+this.name; }} // Create an Animal instance object doglet dog = new Animal('dog'); dog.name; // Result: dog dog.getName(); // Result: This is a dogCopy the code

The constructor assigns the passed parameter “dog” to the name property of the object through this.name, so the name property of dog is “dog”. The object dog can also call its instance method getName(), The result returns: “This is a dog”.

There are a few things to note when creating instance objects:

  • You must use the new create word to create an instance object of the class

  • Declare the definition class first and then create the instance, otherwise an error will be reported

Class static methods

The custom methods mentioned above are instance methods, which are called only by an instantiated object, such as the getName() method in the example above. In addition to instance methods, we can define a method that is directly accessible using the class name, which we call “static methods.”

Let’s take a look at how static methods are defined:

Class Animal {// constructor(name){// attribute name this.name = name; } static friends(a1,a2){return `${a1.name} and ${a2.name}are friends`; }} // Create two instanceslet dog = new Animal('dog');
    let cat = new Animal('cat'); // Call the static method friends Animal. Friends (dog,cat); // Result: Dog and cat are friendsCopy the code

The difference between static methods and instance methods is that static methods are defined with the static keyword, while instance methods are not. In addition, static methods are called from class names, whereas instance methods are called from instance objects.

In the friends() method of the above case, we use the knowledge of String templates, which is a new feature of ES6 to String strings.

Class inheritance

When it comes to class inheritance, ES6 uses the extends keyword to extend a subclass from its parent class.

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

In the example above, we defined two classes, Animal as the parent and Dog as the subclass, and then inherited them using the extends keyword. In addition, we noticed a keyword super, which is equivalent to this in the parent class.

We can use super to refer to the parent class and access its methods. Let’s demonstrate:

Animal class constructor(constructor){// attribute name this.name = name; } // A custom method for the parent classsay() {return`This is a animal`; }} // class Dog extends Animal {constructor(name,color){super(name); this.color = color; } // The instance method of the subclassgetAttritube() {return `${super.say()}The name:${this.name},
                    color:${this.color}`; }} // Create an instance object of Doglet d = new Dog("dog"."black"); // Call the subclass Dog instance method d.gettattritube (); // Result: This is a animal, name: dog, color:blackCopy the code

In the parent class, we define the say method. To call the parent class’s say method in a subclass, we use super.say().

There are a few things to note when using super:

  • Subclasses must call the super method in the constructor method

  • You must call super() before you can use this, otherwise an error is reported

This is an introduction to class inheritance, with emphasis on the extends and super keywords, especially the use of super.

If you are completely new to class and object orientation, this section may not be completely understandable, but you can start by looking at the introduction of JavaScript object orientation in Section 9.

This section summary

Conclusion: ES6 introduced the concept and implementation of class to JavaScript, which is actually a wrapper around the traditional implementation. The keyword class defines a class, extends extends implements inheritance, and the super of a subclass is a reference to the parent class, which plays a very important role in inheritance.

Please pay attention to my column for more front-end learning content and articles.

Ali factory standard Web front end senior engineer tutorial directory, from the basic to the advanced, look to ensure that your salary rises a step

Here I have prepared a lot of learning materials for you

That’s the only thing that separates you from Ali engineers