Classes in native JS

Create a Person class
class Person {
    constructor(name,age) {
        this.name = name; This in the constructor is the instantiation object of the class
        this.age = age;
    }
    // Add a method to the class. This method is placed on the instance object of the class and can be called by the instance object of the class.
    speak() {
        console.log('My name is &{this.name} and my age is &{this.age}')}}// Create a Student class that inherits Person
class Student extends Person {
    constructor(name,age,grad){
        super(name,age)
        this.grad = grad
    }
}
const S1 = new Student('Ming'.18.'three')
Copy the code

Second, the js classes

2.1 class explain

When we print an instance object on the console, we see something like this, Person{}, which represents an instance object of Person, because printing a {} doesn’t tell us what it is. When adding attributes and methods to a class, use the constructor constructor to receive parameters and add attributes to the object, as shown in the figure above. Note that this in the constructor is the instance object created. When adding methods to objects, write methods after Constructor and, when called, use instance objects. Method (), where this refers to the instance object.

2.2 Class inheritance

As shown above, the class subclass extends its parent class. Since it has an inheritance, the subclass inherits the properties and methods of its parent class constructor, and can still use the methods of its parent class when no methods are added to the subclass, because the access form of object properties and methods, known as the stereotype chain, cannot be found on its own. It’s going to look up. Undefined is returned if not in the prototype chain of Object.

2.3. Do not write constructor in subclasses

Constructor is used when adding new attributes to a subclass. Constructor is used when adding custom attributes to a subclass. When a subclass inherits from the parent class and the subclass writes constructor, the super() keyword must be used in the subclass. When a subclass writes a method of the same name in its parent class, it uses its own method first, following the prototype chain.

React class components

3.1 How is the Render () method called in a class component?

When a class component is used as a component, React finds that it is a class component, so inside React a new instance is created that calls the Render () method, which is applied to the child component’s prototype object.

3.2 Why do we change the this direction of a method, or why do we write methods as arrow functions?

In class components, we can often see constructor code like this: this.change = this.change.bind(this). Why should we change the this pointer? Because the change method is defined on the prototype object of the subclass. Locally strict mode is turned on by default in the class, so this in the change method is undefined. We can find the change method on the prototype object by parsing the assignment statement code. When you use bind to change the pointer to this, you return a new function that has already been changed to this. The externally defined change method is received and mounted on the instance object of the subclass. So when we call the change method, following the stereotype chain, we should find the Chang method of the instance itself, not change on the instance stereotype object.

3.3 Optimize the writing method of class components in actual development

Constructor is called only once while render is called 1+ N times, so the state update will invoke the Render method. Add the attribute a=1 to the instance object of the subclass by writing code outside constructor like a=1. State ={} state={} state={} To optimize functions, use the form of the arrow function and a=1, i.e. the variable name = () => {}, instead of using bind to change the this reference. Because this in the arrow function points to the context of the function.

3.4 The static keyword in the class (static methods and properties cannot be inherited)

PropTypes = {} to make the code structure clearer, you can use the static keyword to add the propTypes method to the subclass instead of the instance object.