This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

What is the class

The new classes in Es6 are essentially syntactic sugar based on the prototype mechanism. The syntax of classes allows developers to define backward compatible classes that inherit not only from built-in types but also from custom types.

How to define a class

There are two main ways to define classes: class declarations and class expressions, both of which use the class keyword and curly braces. As with constructors, the programming style recommends capitalizing the first letter of the class name. Programmers do it by convention.

     / / the class declaration
    class Person {};
    // Expression class
    const Animal = class {};
Copy the code

Note: Function declarations (Var) within classes do not promote scope, and classes are limited by block scope.

Classes are different from constructors

Class constructors must be called with the new operator, whereas normal constructors, if not called with new, take the global this (window) as the internal object. Calling a class constructor without new throws an error.

    class Person {};
    function Person1(){};
    let p = Person();//Uncaught TypeError: Class constructor Person cannot be invoked without 'new'at
    let p1 = Person1();
Copy the code

Iterator and generator methods

The class definition language supports defining generator methods on the prototype and on the class itself.

    class Person {
        // Define the generator on the prototype
        *nameIterator (){
            yield 'jackson';
            yield 'bear';
        }

        // Define the generator on the class
        static *colorIterator(){
            yield 'blue';
            yield 'green'; }};/ / class
    let p = new Person();
    let names = p.nameIterator();
    console.log(names.next().value);//jackson
    console.log(names.next().value);//bear
    / / prototype
    let colors = Person.colorIterator();
    console.log(colors.next().value);//blue
    console.log(colors.next().value);//green
Copy the code

Class inheritance

One of the great new features of Es6 is its native support for class inheritance, which is a new syntax but still based on the prototype chain

1. Inherit the foundation

Es6 supports single inheritance. Using the extends keyword, you can inherit any object that has a construct and prototype. This can inherit not only from a class, but also from a normal constructor.

     class Exten {};
    / / a derived class
    class Bus extends Exten {};
    let a = new Bus();
    console.log(a instanceof Bus); //true
    console.log(a instanceof Exten); //true
    

    function Person(){};
    // Inherit from the normal constructor
    class Eng extends Person {};
    let b = new Eng();
    console.log(b instanceof Eng); //true
    console.log(b instanceof Person); //true
Copy the code

Constructor, HomeObject, Super

Methods of derived classes can refer to their prototypes using the super keyword (super can only be used in derived classes). Using super in a class constructor can call the superclass constructor.

    class Vehicle {
        constructor() {
            this.hasEngine = true; }}class Bus extends Vehicle {
        constructor() {
            // Do not refer to this before calling super(), otherwise a ReferenceError will be raised
            super(a);// equivalent to super.constructor()
            console.log(this instanceof Vehicle); // true
            console.log(this); // Bus { hasEngine: true }}}new Bus();
Copy the code

Note that ES6 adds an internal property HomeObject to class constructors and static methods. This property is a pointer to the object that defines the method. This pointer is automatically assigned and can only be accessed from within the JavaScript engine. Super is always defined as the prototype of the HomeObject.

Questions to pay attention to when using super

  1. Super can only be used in derived class constructors and static methods.
  2. The super keyword cannot be referred to in isolation, either as a constructor call or as a static method reference.
  3. Calling super() calls the superclass constructor and assigns the returned instance to this.
  4. Super () acts like a constructor call. If you need to pass arguments to the superclass constructor, you need to pass them manually.
  5. If no class constructor is defined, super() is called when a derived class is instantiated and all arguments passed to the derived class are passed.
  6. In class constructors, you cannot refer to this before calling super().
  7. If a constructor is explicitly defined in a derived class, it must either call super() or return an object in it.

3. Inherit the built-in types

Es6 improves the comparison process for classes to inherit from built-in reference types, making it easier to extend built-in types. Let’s write a minus the even numbers.

     class SuperArray extends Array {}
    let a1 = new SuperArray(1.2.3.4.5);
    let a2 = a1.filter(x= >!!!!! (x %2))
    console.log(a1); // [1, 2, 3, 4, 5]
    console.log(a2); / / [1, 3, 5]
    console.log(a1 instanceof SuperArray); // true
    console.log(a2 instanceof SuperArray); // true
Copy the code

ES5 can do most of the things that Es6 classes do, but the new Class writing just makes the syntax cleaner and more like object-oriented programming syntax.