ES6 Class Detailed Explanation

1. Class Introduction

ES6 class can be regarded as just a syntactic sugar. Most of its functions can be achieved by ES5. The new class writing method just makes the writing method of object prototype clearer and more like the grammar of object-oriented programming.
The data type of a class is a function, and the class itself points to a constructor.
When using it, it is also to use the new command directly on the class, which is exactly the same as the usage of the constructor.

2. Basic syntax of Class

class Point {
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  toString(){
     return `${this.x},${this.y}`
  }
}

1. The ES6 writing method defines a class. You can see that there is a constructor method (constructor method) in the Point class. The constructor Point of ES5 corresponds to the constructor of the Point class of ES6.

2. We also saw the toString method in the Point class. Note that when defining a method of a class, do not add the function keyword before the method, but directly put the function definition in it. It should also be noted that methods cannot be separated by commas, otherwise an error will be reported.

The ES6 class can be seen as another way of writing the constructor (calling a method on an instance of a class is actually calling a method on the prototype)

The prototype property of the constructor continues to exist on the ES6 "class". In fact, all methods of a class are defined on the prototype property of the class.

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// Equivalent to

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

Since the methods of the class are defined on the prototype object, new methods of the class can be added on the prototype object:

class Point {
  constructor(){
    // ...
  }
Object.assign(Point.protype,{
  toValue(){},
  toString(){}
  })
}

3. Static methods

The class is equivalent to the prototype of the instance, and all the methods defined in the class will be inherited by the instance. If the static keyword is added before a method, it means that the method will not be inherited by the instance, but will be called directly through the class, which is called a "static method".

class Say {
  static sayHello() {
    return 'Hello World!';
  }
}

Say.sayHello() 

var say = new Say();
say.sayHello()
// TypeError: say.sayHello is not a function

Note that if the static method contains the this keyword, this this refers to the class, not the instance

class Say {
  static fa() {
    this.fa_s();
  }
  static fa_s() {
    console.log('hello');
  }
  fa_s() {
    console.log('world');
  }
}

Say.bar() // hello

Although static methods of a class cannot be inherited by instances, they can be inherited by subclasses.

4. New way of writing instance properties

In addition to being defined on this in the constructor() method, instance attributes can also be defined at the top level of the class. Writing comparison:
//The instance attribute this._count is defined in the constructor() method

class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}
//Attributes are defined at the top level of the class, others remain unchanged
class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

The advantage of this new way of writing is that all the attributes of the instance object itself are defined in the head of the class, which looks neat, and you can see what instance attributes this class has at a glance.

5. Static properties

Static properties refer to the properties of the Class itself, namely Class.propName, rather than properties defined on the instance object (this).
ES6 clearly stipulates that there are only static methods inside Class, and no static properties. There is now a proposal to provide static properties of classes, which is written by adding the static keyword in front of the instance property method.

// old spelling
class Foo {
  // ...
}
Foo.prop = 1;

// new spelling
class Foo {
  static prop = 1;
}

6. Class inheritance

Class can implement inheritance through the extends keyword, which is much clearer and more convenient than ES5's implementation of inheritance by modifying the prototype chain.
1. The subclass must call the super method in the constructor method
This is because the this object of the subclass must be shaped through the constructor of the parent class to obtain the same instance properties and methods as the parent class, and then process it, plus the subclass's own instance properties and methods, if you do not call super method, subclasses will not get this object.

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // Call the constructor(x, y) of the parent class
    this.color = color;
  }
  toString() {
    return this.color + ' ' + super.toString(); // Call toString() of the parent class
  }
}

2. The static method of the parent class will also be inherited by the child class

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

3.Object.propotypeOf()
The Object.propotypeOf method can be used to get the parent class from the child class.
Use this method to determine whether a class inherits from another class,

Object.propotypeOf(colorPoint) === Point
//true

4.super keyword
The super keyword can be used both as a function and as an object. It is used quite differently in both cases.

In the first case, when super is called as a function, it represents the constructor of the parent class. ES6 requires that the constructor of the subclass must execute the super function once.

In the second case, when super is used as an object, in ordinary methods, it points to the prototype object of the parent class; in static methods, it points to the parent class.

5. The prototype attribute and _proto_ attribute of the class

The _prop_ property of the subclass, which represents the inheritance of the constructor, always points to the parent class.

The _prop_ property of the prototype property of the subclass, indicating the inheritance of the method, always points to the prototype property of the parent class.

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

Tags: ECMAScript Class prototype

Posted by BIOSTALL on Mon, 23 May 2022 03:29:07 +0300