Unlike other object-oriented languages, there is no concept of class class class in JavaScript before ES6. It mainly implements inheritance through prototype. In JavaScript, prototype chain is introduced and used to realize inheritance. The core of prototype is to make one object inherit the methods and attributes of another object. The key of prototype inheritance in JavaScript is to use an instance. The prototype object points to another instance, so the previous instance can obtain the attributes and methods of the prototype object of the latter instance, for example:

function Father(){
  this.age=30;
}
Father.prototype.work=function(){
  return "hard work";
}
function Child(){
  this.age=10;
}
//An example of pointing the prototype of child to the Father constructor
Child.prototype=new Father();

Child.prototype.play=function(){
  return "play";                
}

var child=new Child();

console.log(child.play()) // play
console.log(child.work()) // work

After looking at the typical prototype inheritance of JavaScript above, I want to go back to ES6. ES6 introduces the concept of class, which is actually a grammatical sugar. Many of them are related to constructors. Let's take an example.

// var Man =class {This is also possible
class Man{
  constructor(age) {
    this.age=age;
  }
  grow(){
    return this.age+1;
  }
}
var cala=new Man(22);
console.log(cala.grow()); // 23 

The above is a simple example of ES6 writing classes. You can see that class keywords are used to define classes. The constructor in the class keywords refers to constructors. Private attributes are defined in constructors. Then a group method is defined. Finally, an object is instantiated by new keywords.

Defining classes and defining functions in JavaScript are very similar, but they are somewhat different. Function declarations can be improved, but class declarations are not.

var cala=new Man();
class Man{} // Man is not defined

Classes in ES6 use extends to create subclasses. Each class will have a constructor constructor. When instantiating, the constructor of the class must be called with the new keyword. One constructor can call another constructor through super.

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

class Cala extends Man{
  constructor(age){
    super(age);
  }
  grow(){
    return this.age+1;
  }
}

var cala=new Cala(22);
console.log(cala.grow()) // 23

The class support class in ES6 supports the prototype definition of accessor get, set attributes

class Man{
  constructor(age) {
    this.age=age;
  }
  get getAge(){
    return this.age;
  }
  set setAge(age){
    this.age=age;
  }
}
var cala=new Man(22);
console.log(cala.getAge) // 22

cala.setAge=33;
console.log(cala.getAge) // 33

ES6 classes support static methods, which are defined by keyword static. Most children who are familiar with class and object-oriented shoes know that static methods belong to the class itself and can not be invoked through instances.

class Man{
  constructor(age) {
    this.age=age;
  }
  static work(){
    return "hard work"
  }
}

console.log(Man.work()); // hard work

var cala=new Man(22);
console.log(cala.work()); // cala.work is not a function 

Combining the typical prototype inheritance of JavaScript above with the class of ES6 below, we can see that when we use new keywords to instantiate objects, we actually call the constructor on prototype. The class of ES6 is essentially a grammatical sugar. For traditional writing, it is also applicable in ES6. The method on class is equivalent to the method defined on prototype.