For the concept of class class, I believe people who have learned programming should see more of it. It is not surprising that 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 prototype to simulate class class and realize object-oriented programming

In the next study, we all know the traditional writing method of simulation class. If you have forgotten, ES6 series Section 9 introduces the object-oriented of JavaScript. Click to view it.

Now, ES6 brings us good news. It brings the concept of class to JavaScript. But in fact, the JavaScript class is essentially based on the prototype prototype, which further encapsulates the implementation method, making it easier for us to use. In other words, it is actually the implementation of function and prototype.

Basic Usage

Then, we will use the class encapsulated by ES6 to achieve the desired effect. Let's learn its basic usage.

Declare the writing of a class:

//Define a class called Animal
    class Animal {
        //constructor
        constructor(color){
            this.color = color;
        }
    }

The code is very short. We declare a class named Animal through the keyword class. You can see that there is a class named Animal in the class (in curly braces {}) constructor method , it is the constructor. this in the constructor refers to the instantiated object of the class, which is the declaration of a class.

Among them, the constructor method is a necessary method of a class, which is returned by default Instance object ； When creating an instance object of a class, this method will be called to initialize the instance object. If you do not write a constructor method, a default empty constructor method will be added when executing.

Class properties and methods

After understanding the class declaration and the characteristics of constructor constructor, let's learn how to add properties and methods to the class.

class Animal {
        //Construction method
        constructor(name){
            //Attribute name
            this.name = name;
        }

        //Custom method getName
        getName(){
            return this.name;
        }
    }

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

The constructor method is a construction method, which is called when instantiating a class. Constructor method is necessary and unique. A class body cannot contain multiple constructor construction methods. We can customize the attributes of some objects in the method, such as the name attribute in the case.

In addition, we have also customized a getName() method, which belongs to the class Example method , the object can call this method after instantiation.

Class

After mastering the writing method of class properties and methods, let's learn how to create objects and use object instance methods:

class Animal {
        //Construction method
        constructor(name){
            //Attribute name
            this.name = name;
        }

        //Custom method getName
        getName(){
            return 'This is a'+this.name;
        }
    }

    //Create an Animal instance object dog
    let dog = new Animal('dog');
    dog.name; //Result: dog
    dog.getName(); //Result: This is a dog

In the same class Animal, we create the instance object dog through new, and the constructor will pass the passed parameter "dog" through this Name is assigned to the name attribute of the object, so the name attribute of dog is "dog". The object dog can also call its own instance method getName(), and the result returns: "This is a dog".

There are several considerations for creating instance objects:

• You must use the new creation word to create an instance object of the class
• First declare the definition class and then create an instance, otherwise an error will be reported

Class Static method

The custom methods mentioned above are instance methods, that is, methods that can only be called by the instantiated object, such as the getName() method of the above case. In addition to the instance method, we can also define a method that can be accessed directly by using the class name, which we call "static method".

Let's take a look at how to implement the definition of static methods:

class Animal {
        //Construction method
        constructor(name){
            //Attribute name
            this.name = name;
        }

        //Customize a static method
        static friends(a1,a2){
            return `${a1.name} and ${a2.name} are friends`;
        }
    }

    //Create 2 instances
    let dog = new Animal('dog');
    let cat = new Animal('cat');

    //Call static method friends
    Animal.friends(dog,cat);
    //Results: dog and cat are friends

The difference between static methods and instance methods is that the definition of static methods needs to be identified by static keyword, while instance methods do not; In addition, static methods are called by class names, while instance methods are called by instance objects.

In the friends() method of the above case, we used character string The knowledge of templates is a new feature brought to String by ES6, There are explanations in Section 6. Click to view it.

Class inheritance

When it comes to class, we have to talk about class inheritance. ES6 uses the extends keyword to realize that the child class inherits the parent class. Let's demonstrate:

//Parent Animal
    class Animal {//...}

    //Subclass Dog
    class Dog extends Animal {
        //Construction method
        constructor(name,color){
            super(name);
            this.color = color;
        }
    }

In the above case, we define two classes, Animal class as the parent class and Dog class as the child class, and then implement inheritance through the keyword extends. In addition, we also notice a keyword super, which is equivalent to this in the parent class.

We can use super to reference the parent class and access the methods of the parent class. Let's demonstrate:

//Parent Animal
    class Animal {
        //Construction method
        constructor(name){
            //Attribute name
            this.name = name;
        }

        //Custom method of parent class
        say(){
            return `This is a animal`;
        }
    }


    //Subclass Dog
    class Dog extends Animal {
        //Construction method
        constructor(name,color){
            super(name);
            this.color = color;
        }

        //Subclass instance method
        getAttritube(){
            return `${super.say()},
                    name: ${this.name},
                    color:${this.color}`;
        }
    }

    //Create an instance object of Dog
    let d = new Dog("dog","black");

    //Call the instance method of the Dog of the subclass
    d.getAttritube();
    //Result: This is a animal,
                name: dog,
                color:black

In the parent class, we define say method If we want to call the say method of the parent class in the subclass, we use super.. Say().

There are several precautions for using super:

• The subclass must invoke the super method in the constructor method.
• You must call super() before you can use this, otherwise an error will be reported

The above is an introduction to class inheritance, focusing on the keywords extends and super, especially the understanding and use of super. You need to understand it thoroughly.

If you are a beginner who has never touched class and object-oriented, you may not fully understand this section. You can first turn to the introduction of JavaScript object-oriented in Section 9.