ES6 Class and Class inheritance

1. The data type of class is a function

 console.log(typeof class A {})

2. The class’s prototype constructor points to the class (analogy: the constructor’s prototype’s constructor points to the constructor)

 class A {}
    console.log(A.prototype.constructor === A)

3. The constructor of the instance created by the new keyword points to the class (analogy: the constructor of the instance created by the new constructor points to the constructor itself)

 class A {}
    var a = new A()
    console.log(a.constructor === A)

4. The methods inside the class are actually defined on the prototype of the class instance; the properties are defined on the instance; the methods and instances in the constructor are defined on the prototype

 class A {
      fn () {}
      toString() {}
    }

    var a = new A()
    console.log(a);

5. The essence of creating an object through a class is to call the constructor of the class. If the class does not define a constructor, it will be added by default when used.

 class A {
      constructor () {
        this.name = 'a';
        this.fn = function() {};
      }
      fn1() {}
    }
    console.log(new A())

6. Class cannot be called directly and needs to use the new keyword (the constructor can be called directly, or new can be used to create an instance)

7. The internal method this of the class points to the instance, and the internal method of the class is strict mode (there is no variable promotion in strict mode)

Note that if the method is used alone, an error will be reported. The class is in strict mode, so this actually points to undefined.

Ordinary functions can be called through instance calls: but if called directly after the structure, an error will be reported if the ordinary function does not find out who is calling it. After changing the ordinary function to an arrow function, the arrow function is defined in class, so this represents the prototype of the current class instance

 class Logger {
      printName(name = 'world') {
        console.log(this, 'this')
        this.print(`Hello ${name}`)
      }
      print(text) {
        console.log(text)
      }
    }

    // let logger = new Logger();
    // // Can be called through instance call
    // logger.printName()
    let {printName} = new Logger();
    printName(); //If no one is found, an error will be reported

 class Logger {
      printName = (name = 'world') => {
        // This of the method in the class points to the instance of the current class
        console.log(this, 'this')
        this.print(`Hello ${name}`)
      }
      print = (text) => {
        console.log(text)
      }
    }
    let { printName } = new Logger();
    printName(); //If no one is found, an error will be reported

analyze:

• 1.this actually points to undefined. If you want to call it normally, you can use the arrow function (the this of the arrow function is determined by the definition position, so you can get this as the current instance)

Note: The ordinary functions defined on the class itself are on the prototype of the instance, but if you use arrow functions, the current attributes and functions are on the instance of the class.

Why can printName in the arrow function still print this? Because the arrow function definition itself does not have this, its this position points to the current instance.

• 2.this actually points to undefined. Bind printName in the constructor and rewrite this.

The this of the arrow function in 8.class points differently to the ordinary function: The ordinary function defined above class is on the prototype of the instance; The this of the arrow function points to the function where it is defined. The domain is the instance itself. This is undefined when calling ordinary functions directly through the deconstructed method, and the arrow function is the current instance

 class Logger {
      printName(name = 'world') {
        console.log(this, 'this')
        this.print(`Hello ${name}`)
      }
      print(text) {
        console.log(text)
      }
    }

    console.log(new Logger());

 class Logger {
      printName = (name = 'world') => {
        // This of the method in the class points to the instance of the current class
        console.log(this, 'this')
        this.print(`Hello ${name}`)
      }
      print = (text) => {
        console.log(text)
      }
    }
    console.log(new Logger());

3. What is the difference between constructor and class? Answer by combining the above features

• class can only be called through the new keyword
• The interior of the class is in strict mode (directly deconstructing the method and executing this will return undefined)
• The methods and properties defined in the class are on the prototype of the instance, and the properties and methods defined in the constructor are on the instance; the constructor method is defined on the prototype of the instance, and the properties are defined on the instance
• Class can define static methods through the static keyword

4.class’s value function (getter) and storage function (setter)

After setting, these two methods can be triggered when setting and getting the value through the instance.

 class A {
      get name() {
        return '1'
      }
      set name(value) {
        console.log('setter:' + value)
      }
    }

    var a = new A()
    console.log(a.name);
    a.name = "lmf"

5. The attribute name of the class can be set dynamically

 let methodName = 'test'
    class A {
      [methodName] () {
        console.log("test-----");
      }
    }

    var a = new A()
    a.test()

6. Static methods/properties

By adding the static keyword before properties and methods, static methods and properties will not be inherited by instances; static methods and ordinary methods can have the same name

 class A {
      static fn () {
    //This of the static method refers to the class, so here this.getValue() === A.getValue()
        this.getValue()
        console.log(this === A);//true
      }
      static getValue () {
        console.log('Zhang San')
      }
      getValue() {
        console.log('李思')
      }
    }

    var a = new A()
    A.getValue()
    a.getValue()
    A.fn();//This of the static method refers to the class, so here this.getValue() === A.getValue()

7. This in the static method points to the class rather than the instance

8. Define instance attributes

class A {
  a = 1
  b = 'SUCCESS'
}

9. Class inheritance

• Class inheritance through the extends keyword
• If the constructor in the subclass is not written, a constructor function will be implicitly generated. If the constructor is explicitly written, super must be called, otherwise an error will be reported.
• When a subclass calls super, it triggers the constructor of the parent class and passes the parameters to it.
• Subclasses do not have this before super is called, and an error will be reported if used.
• When a class inherits, attributes will be added directly to the instance, and methods will remain on the prototype of the class (the same as the location of the attributes and methods of the class itself, the methods of the class itself are on the prototype, the attributes on the instance, the methods and attributes in the constructor on the instance)

 class F {
      constructor (sMoney) {
        this.money = 100 + sMoney
      }
      fn () {}
    }
//Inheritance through extends
    class S extends F{
//The subclass shows that when calling the constructor, the super() method must be called at the same time.
      constructor (money) {
        // The subclass does not have this before super is called, and an error will be reported if used.
        //Calling super(money) by a subclass will trigger the constructor of the parent class and pass the parameters
        super(money)

      }
    }
    console.log(new S(10))
    // When a class inherits, attributes will be added directly to the instance, and methods will remain on the prototype of the class.
    console.log(S.prototype.__proto__ === F.prototype); //true