Easy JavaScript learning-Part 2: JavaScript classes and javascript

Easy JavaScript learning-Part 2: JavaScript classes and javascript

ECMAScript 6 introduces the class keyword to create a class in JavaScript. Now, you can use the class attribute to create a class in JavaScript. Before ECMA 6, a new object is returned whenever the new operator is used to call a function. Therefore, this function is used as a class and is called a constructor. This method of calling a function to return objects is also called the constructor call mode.

However, in ECMAScript 6, you can use the class keyword to create a class. See the following code:

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }}

In the code snippet above, you have used the ECMAScript 6 class keyword to create a class named Car. You can also create a Car class object as follows:

var car1 = new Car("BMW", 100);car1.getInfo();var car2 = new Car("Audi", 150);car2.getInfo();

JavaScript classes are the simplified syntax for prototype-based inheritance. It does not provide any new object creation or prototype inheritance methods, and does not introduce any new object-oriented or inherited models in JavaScript. You can also say that the class is a special function for creating objects.

Class description and Expression

Because the class attribute in JavaScript is also a function, you can also create it using class declaration and class expression. You can use the class Declaration to create a class, as shown below:

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }}

Class can also be created using a class expression. You can create a named or unnamed class expression. You can create a named class expression as follows:

var Car = class {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }    toString() {        return `${this.maker} costs : ${this.price}`;    }}

Untitled class expressions can be created as follows. The class expression name is the local name of the class body.

var Car = class c {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }    toString() {        return `${this.maker} costs : ${this.price}`;    }}

Class upgrade

As mentioned above, a class can be created as both a declaration and an expression, but unlike a function declaration, the class declaration will not be promoted to the top of the execution context. See the following code:

var car1 = new Car("BMW", 10); // Reference Error  console.log(car1.toString());class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }    toString() {        return `${this.maker} costs : ${this.price}`;    }}

The above code throws a Reference Error because you try to access a class before declaring it. Therefore, we can get the conclusion that the function declaration is promoted, but the class declaration is not promoted.

Class Method

There are three types of JavaScript methods:

• Constructor.
• Static method.
• Prototype Method.

Class constructor method to create the initialization object. A class can have only one constructor. If you try to create multiple constructor methods, JavaScript will throw an exception. You can use the keyword constructor to create a constructor, as shown in the following code:

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }}

Static Methods of JavaScript classes are called using classes, rather than using specific objects of classes. If you try to call them using class instances, JavaScript will throw an exception. You can use the keyword static to create a static method, as shown below:

class Car {    static count() {        console.log("I am static method");    }}Car.count();Car.count();

If you try to use an instance to call a static method, JavaScript throws an exception, indicating that the function does not exist. In addition, remember that the JavaScript class does not have static attributes or members. Currently, only static methods are supported.

Any common method that uses class instance access is called the prototype method. These methods can inherit and use class objects.

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }}var car1 = new Car("BMW", 10);car1.getInfo();

In the code snippet above, getInfo () is the Car class prototype method. As you can see, we are using an instance of the Car class. Because it is a prototype method, it can also be inherited. Let's discuss why these methods are called prototype methods. First, consider the following code:

class Car {    constructor(maker, price) {        this.maker = maker;        this.price = price;    }    getInfo() {        console.log(this.maker + " costs : " + this.price);    }}console.log(typeof (Car)); // function

In this code snippet, we enter the type of a Car class and get the output of a function. As you can see, this class is only a function type, so like other functions, it also has a prototype attribute. These general methods are the methods of prototype objects of the class, so they are called prototype methods. They can be inherited by adhering to prototype-based inheritance.

In addition to the three types of methods, JavaScript also has some things called getter and setter. You can click here to learn more.

Conclusion

In this article, we briefly introduce the JavaScript class attributes introduced in ECMAScript 2015. Using the class keyword, we can create a class, but remember that this is not a new method to introduce object creation or inheritance. On the contrary, for the same object and prototype-based inheritance, this is just a simpler syntax.

Join the study exchange group 569772982 to learn and exchange.