preface

What comes to mind when you think of class in ES6? Maybe some friends just know it, maybe used it once or twice, it doesn’t matter, this time we start from the beginning, take you to experience the tenderness of class (strong and elegant);

As usual, we need to approach this article with three questions: What? how? The where?

What is the Class

React is a framework that uses classes to write components. Learn how to write components with react. Let’s look at the class standard:

Class Point {constructor (x, y) {this.x = x this.y = y} MyName () {return (${this.x}${this.y}! `) } } let getName = new Point('f', 'zh'); Getname.myname () // MyName is FZHCopy the code

As you can see from the above code, this class is similar to the constructor in ES5. Yes, the class is the syntactic sugar of the constructor. When you use it, you also use the new command on the class(class). Exactly the same way constructors are used; In case some students don’t quite understand what it says, here is an explanation:

  1. We first declare a class named Point, or ES5function Point ( ) { };
  2. classAll the methods that are written in there are defined in the endclassES5 is written as:Point.prototype.MyName = function ( ) { };
  3. constructorMethods are constructors, insidethisRepresents the instance object,constructorAttributes that refer directly to the class itself;
  4. constructorIs the default method of classnewAutomatically called when the command generates an object instanceconstructorEven if there is no definitionconstructor, will also default to an emptyconstructor;

ES5 does most of what it does, but the new class method just makes writing object prototypes much cleaner and more like object-oriented programming syntax. Let’s prove it:

Console. log(typeof Point); // "function" console.log(Point === Point.prototype.constructor); // trueCopy the code

This code shows that the data type of a class is a function, and that the class itself points to a constructor;

The following points should be noted in this paragraph:

  • Methods defined inside a class are not enumerable;
  • The generated class is written usingnewCommand, otherwise an error will be reported;
  • constructorMethod returns the instance object by default (that isthis);
  • Inside classes and modules, the default is strict mode, so you don’t need to use ituse strictSpecify the operating mode;
  • Class does not have variable promotion;
  • Class methods with this inside point to instances of the class by default;

That’s the basics of class. If you understand the above, you can now use classes in your code.

Class Advanced knowledge

We said at the beginning that class is powerful and elegant, so how powerful is it? Where is the grace? How can I not see it by now? Good, let us take these two questions to the following article to find the answer!

Class static method

Class is equal to the instance of the prototype, all methods defined in the class are examples of inheritance, if don’t want you to define the method by instance inheritance, is also very simple, need only in front of the method combined with the static keyword, said this method will not be instance inheritance, and directly through the class can call, this is also known as a static method, see the following code:

class MyStatic { static classMsg () { return ("My name is feng zhihao"); Mystatic.classmsg ();} // This method is static because "classMsg" defines the method name. // "My name is feng zhihao" let foo = new Mystaic(); foo.classMsg(); // TypeError: foo.classMsg is not a functionCopy the code

Static methods can be called directly on a class, rather than on an instance of the class. If a static method is called on an instance, an error will be thrown indicating that the method does not exist. By extension, static methods of a parent class can be inherited by subclasses:

Class Fzh {static classMsg () {return (' happy New Year, you are the best '); } } class Ibas extends Fzh {} Ibas.classMsg(); // "Happy New Year, you are the best" 'Copy the code

The new target attribute

New is a command that generates instances from constructors. ES6 introduced the new.target attribute for new commands. If the constructor is not called by new, new.target returns undefined. If a subclass inherits its parent class, new.target returns the current class:

Constructor (x) {console.log(new.target === Register); this.x = x; Let RegClass = new Register("hello") // trueCopy the code
Constructor () {console.log(new.target === Register); // "constructor () {console.log(new.target === Register); } } class Square extends Register { constructor (x) { super(x, x); } } let sole = new Square(1); // false (new.target returns a subclass)Copy the code

The super keyword

When you first learn React, you learn class, especially extends and super. We often see them. Super can be used as both a function and an object.

In the first case, when used as a function, super can only be used in the constructor of a subclass. When super is called, it represents the constructor of the parent class (this is the rule), and ES6 also specifies that the constructor of a subclass must execute super once;

Super represents the parent class, but it returns an instance of a subclass. This in super refers to a subclass.

class Supe {
    constructor () {
        console.log(new.target.name);
    }
}

class SonSupe extends Supe {
    constructor () {
        super();
    }
}

new Supe();   // Supe
new SonSupe();  // SonSupe
Copy the code

As you can see from the above code, new.target refers to the currently executing function, and when super executes, it points to the constructor of subclass SonSuper, not the constructor of superclass Supe, that is, the this inside super() refers to the subclass.

In the second case, when super is used as an object, it refers to the prototype object of the parent class in ordinary methods and to the parent class in static methods. Since super refers to the prototype object of the parent class, methods or properties defined on the instance of the parent class cannot be called by super:

Class A {gain () {return (" welcome, I don't want to change ~"); } } class B extends A { constructor () { super(); console.log(super.gain()); // "welcome to point out the shortcomings, I will not change ~"}}Copy the code

Super refers to the prototype of the parent class, so super.gain() is the same as a.prototype.gain ().

At the end

Class in this article is mainly about the ES6 syntax and small details, we need to do is remember these knowledge, really to understand them, practice and try, can be flexible to use to the development in the future, in addition, recommend you to have a look at the nguyen other published the book “introduction to ES6 standard, finally I wish friends happy New Year, Never Bug! Oh, break up the meeting!

My wechat account: