“This is the 25th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

What is the

Class is a syntactic sugar structure in ES6, again based on stereotypes and constructors. How can you tell?

function Person1(name, age) { this.name = name this.age = age } Person1.prototype.say = function () { console.log(`My name is ${this.name},i am  ${this.age} years old.`) } class Person2 { constructor(name, age) { this.name = name this.age = age } say() { console.log(`My name is ${this.name},i am ${this.age} years old.`) } } Const xiaoming = new Person1(' xiaoming ', 18), xiaohong = new Person2(' xiaoming ', 18), 20) console.dir(xiaoming) xiaoming.say() console.dir(xiaohong) xiaohong.say()Copy the code

As can be seen, the print results of the two instances are basically the same, with both prototypes and constructors, and both types of say are stored in the prototype of the constructor. And both are instantiated with the new operator. And the result of printing typeof Person2 at this point is function. 😏

The basic use

class Person { constructor(name = 'person', age = 18) { this.name = name this.age = age } say() { console.log(`My name is ${this.name},i am ${this.age} years old.`) }} const person = new person (), xiaoming = new person (' xiaoming ', 20) console.dir(person) person.say() console.dir(xiaoming) xiaoming.say()Copy the code

As you can see, the arguments passed to the Person class instantiated with the new operator are received and used by constructor; if no arguments are needed, () can be left unwritten.

The static static class

Suppose we had a scenario where we wanted to batch generate student instances, we could write the class class like this:

class Student { constructor(name, Age) {this.name = name this.age = age this.school = 'JavaScript elementary school '} say() {console.log(' My name is ${this.name}, I am ${this.school}. ')}} const xiaoming = new Student(${this.school}. ') 8) Xiaoming. Say () // My name is Xiaoming. I am 18 years old.Copy the code

However, one problem is that schools are unified, so there is no need to save them in each instance, which causes memory waste and is not conducive to maintenance. At this point we can rewrite the code as follows:

class Student { constructor(name, Age) {this.name = name this.age = age} static school = 'JavaScript elementary 'say() {console.log(this) console.log(' My name Is ${this.name}, I am ${this.age} years old,my school is ${this. school}. ')}} const xiaoming = new Student(' xiaoming ', 8) Xiaoming. Say () // My name is Xiaoming. I am 18 years old.Copy the code

Static is useful because if static is not added, properties are stored on the instance and methods are stored on the class’s prototype object. When static is added, all defined properties and methods are bound to the class, so we can get and change the school value via Student. School.

inheritance

Let’s say some of our students are sprinters, and they have the skills. At this time, we define the athlete class, and the athlete is a student at the same time, at this time, we can let the athlete class inherit the student class, get the corresponding attributes and methods of students, at the same time, add the attributes and methods of athletes in the athlete class. At this point we can rewrite the code as follows:

class Student { constructor(name, Age) {this.name = name this.age = age} static school = 'JavaScript elementary 'say() {console.log(' My name is ${this.name}, I ${this.age} years old,my school is ${student. school}. ')}} Constructor (name, age) {// Call constructor super(name, age) } run() { console.log(`I am ${this.name},i am running fast! }} const xiaoming = new Athlete(' xiaoming ', 8) xiaoming. Say () // My name is Xiaoming, I am 18 years old, My school is JavaScript  fast!Copy the code

Note here that super cannot be used without extends, but it is possible to subclass without calling super(). Also note that you cannot use this before super(), which means that if a subclass wants to use this, it must call super().

If you have any questions or suggestions, please leave a comment! 👏 🏻 👏 🏻 👏 🏻