ES6 Class Introduction

Defining Classes

The ES6 class is not a brand new thing: They mainly provide more convenient syntax for creating old-fashioned constructors, and JavaScript classes are not like classes in other object-oriented language C++,java, where the class is just a syntactic candy, and is actually based on a prototype chain. class declaration

One way to define a class is to use the declaration of a class, in order to declare a class, you can use the class keyword space followed by a name.

Class Rectangle {
    constructor (width, height) {
        this.width = width;
        this.height = height;
    }
}

One of the biggest differences between a function declaration and a class assertion is that you have to declare the class to work, or you throw a referenceerror error, and the function does not have that restriction. That is, the function declaration is raised and the class is not, and the following code complains:

Const P = new Rectangle (m);
Class Rectangle {
    constructor (width, height) {
        this.width = width;
        this.height = height;
    }
}

-Class Expressions

Class expressions are another way to define a class, which can be either named or Anonymous. If it is a named class expression, the name can only be accessed within the class body. JavaScript classes are also inherited on a prototype basis.

Const RT1 = Class Rectangle {
    constructor (width, height) {
        this.width = width;
        this.height = height;
    }

    Sayname () {
        console.log (rectangle.name);
    }
}

Const R1 = new Rt1 (m);
R1.sayname ();

Const RT2 = class {
    constructor (width, height) {
        this.width = width;
        this.height = height;
    }
}

the body and method definitions of a class

Inside the braces is the body part of the class, where you can define a member of a class, such as a method or constructor. Strict Mode

Class declarations and the bodies of class expressions are executed in strict mode, i.e. constructors, static and prototyping methods, getter and setter functions in strict mode. Constructors

A constructor is a special function, and there is only one such method in a class that is invoked when an object of a class is created. You can also not write constructors, but the system defaults to adding.
The base class defaults to the following constructs:

Constructor () {}

The derived class is added by default with the following constructs:

Constructor (... args) {
    super (... args);
}

Prototype Method

Class Rectangle {
    constructor (width, height) {
        this.width = width;
        this.height = height;
    }

  Getter get Area
  () {return
    this.calcarea ();
  }
  Method
  CalcArea () {return
    this.height * this.width;
  }
}

Const P = new Rectangle (
console.log) (P.area);

static Method

Using the static keyword to define a static method, you cannot invoke a static method with the object of the class, which should be called by the class name. A static method is a common method of this class.

Class Point {
    constructor (x, y) {
      this.x = x;
      This.y = y;
    }

    Static distance (A, b) {
      const DX = a.x-b.x;
      Const DY = a.y-b.y;

      return math.hypot (dx, dy);
    }

  Const P1 = new Point (5, 5);
  const P2 = new Point (a);

  Console.log (Point.distance (P1, p2)); 7.0710678118654755

getter and Setter methods

There are a lot of pits, you need to know before use, can not be used as far as possible.

Class Widget {get
  prop () {return
    ' getter '
  }

  set Prop (value) {
    console.log (' setter, ' + value)
  }

Const P = new Widget ();
P.prop = 123;
Console.log (P.prop)

constructors, static methods, prototyping methods

Here's a more general usage.

Class Foo {
    Constructor (prop) {
        this.prop = prop;
    }
    Static Staticmethod () {return
        ' classy ';
    }
    Prototypemethod () {return
        ' prototypical ';
    }
}
const FOO = new Foo (123);

Look at the relationship between them through the object graph:
inherited

Class Point {
  constructor (x, y) {
    this.x = x;
    This.y = y;
  }

  ToString () {return
    ' (${this.x}, ${this.y}) ';
  }

Class ColorPoint extends Point {
  constructor (x, y, color) {
    super (x, y);
    This.color = color;
  }
  ToString () {return
    super.tostring () + ' in ' + This.color;
  }
}

Const P1 = new Point (3, 4);
CONST P2 = new ColorPoint (5, 6, ' red ');
Console.log (P1.tostring ());
Console.log (P2.tostring ());

The class in ES6 is not a new thing, it simply provides a more convenient syntax for creating old-fashioned constructors, and using typeof point you can see that it's actually a function.

The super () must be called in the constructor of a subclass, and the call to super must be changed to the previous constructor before using this:

  Constructor (x, y, color) {
    This.color = color;
    Super (x, y);
  }

Running code will complain:
Referenceerror:must call Super constructor in derived class before accessing "This" or returning from derived constructor

Then look at the inherited prototype chain diagram with the following code

Class Person {
    Constructor (name) {
        this.name = name;
    }
    ToString () {return
        ' person named ${this.name} ';
    }
    Static lognames (persons) {for
        (const Person of persons) {
            console.log (person.name);

}}} Class Employee extends Person {
    constructor (name, title) {
        super (name);
        this.title = title;
    }
    ToString () {return
        ' ${super.tostring ()} (${this.title}) ';
    }
}

Const JANE = new Employee (' Jane ', ' CTO ');
Console.log (Jane.tostring ()); Person named Jane (CTO)