Class class usage method and tutorial in es6

Posted by diesel_heart on Thu, 29 Aug 2019 08:56:56 +0200

class Course in ES6 (Basic Part)

1. constructor (constructor)

The function of the constructor constructor is that whenever the new class is used, the code in the constructor constructor will be executed first.

Traditional constructors:

function Animal (name, age) {
 	   //Instance attributes
         this.name = name;
         this.age = age;
     }
const a1 = new Animal('dog', 3);

Class class:

class Animal {
         constructor(name, age){
             //Instance attributes
             this.name = name;
             this.age = age;
         }
     }
const a2 = new Animal('cat', 2);

Each class class class has a constructor constructor. If you do not specify the constructor constructor manually, you can think of an invisible, empty constructor inside the class class class.
```
class Animal {
 //constructor(){Here is the invisible, empty constructor constructor
//}
}
```

2. Creating static attributes using static (not much to be used in the future)

What are static attributes?
Attributes accessed directly through the constructor;
For example, the following sounds are mounted directly to Animal, so sounds are static attributes

	function Animal (name, age) {
        this.name = name;
        this.age = age;
    }
    Animal.sounds = 'yayaya';
    console.log(Animal.sounds)// yayaya

    const a1 = new Animal('dog', 3);
    console.log(a1.sounds)// undefined
    console.log(a1.name)//dog
    console.log(a1.age)//3

On the contrary, name, age, can be accessed by instance a1 from new, so name and age are instance attributes.

How to define static attributes within a class
The attributes modified by the static keyword are static attributes.

	class Animal {
         constructor(name, age){
             this.name = name;
             this.age = age;
         }
         static sounds = 'yayaya';
     }
     console.log(Animal.sounds)//yayaya

     const a2 = new Animal('cat', 2);
     console.log(a2.sounds)//undefined
     console.log(a2.name)//cat
     console.log(a2.age)//2

3. Examples (which will be frequently used in the future)

What is an example method?
A method that can be accessed by a new instance

Traditional constructors define instance methods in the following ways:

	function Animal (name, age) {
         this.name = name;
         this.age = age;
     }
     Animal.prototype.sounds = function () {
         console.log('yayaya')
     }

     const a1 = new Animal('dog', 3);
     a1.sounds()//yayaya

In the class class class, the way to define instance methods is as follows:

	class Animal {
         constructor(name, age){
             this.name = name;
             this.age = age;
         }
         sounds () {
             console.log('yayaya')
         }
     }

     const a2 = new Animal('cat', 2);
     a2.sounds()//'yayaya'

class Internal Definition Instance Method, and constructor, static Level Definition

As you can see from the console print a1 and a2, the instance method is defined on the prototype chain, so the two methods are essentially the same.

4. Use static to create static methods (which will not be used much in the future)

The static method is the method mounted on the constructor, and the new instance can not be accessed.

Traditional constructors define static methods in the following ways:

	function Animal (name, age) {
         this.name = name;
         this.age = age;
     }
     Animal.sounds = function () {
         console.log('yayaya')
     }
     Animal.sounds() //yayaya

     const a1 = new Animal('dog', 3);
     a1.sounds()// Error reporting: a1.sounds is not a function

How static methods are defined within class classes:

	class Animal {
         constructor(name, age){
             this.name = name;
             this.age = age;
         }
         static sounds () {
             console.log('yayaya')
         }
     }
     Animal.sounds() //yayaya

     const a2 = new Animal('cat', 2);
     a2.sounds() // Error reporting: a2.sounds is not a function

Within class classes, static attributes and static methods are defined by static keywords!

Matters needing attention:

Within the {} interval within the class class class, only constructor constructors, static static methods, static static attributes and instance methods can be written (instance attributes are in the constructor constructor)!
In the class class class extends, super advanced article please see the next article!

Programmer Think