Origin of class
In the JavaScript language, the traditional method of generating instance objects is through constructors. Here is an example.

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

The above writing method is very different from the traditional object-oriented languages (such as C + + and Java), which is easy to confuse the programmers who are new to the language.

ES6 provides a writing method closer to the traditional language, and introduces the concept of class as the template of objects. You can define a class by using the class keyword.

Basically, the class of ES6 can be regarded as just a syntax sugar. ES5 can do most of its functions. The new class writing method only makes the writing method of object prototype clearer and more like the syntax of object-oriented programming. The above code is rewritten with the class of ES6, which is as follows.

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

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

The above code defines a "Class". You can see that there is a constructor() method, which is the construction method, and the this keyword represents the instance object. This new Class writing method is essentially consistent with the constructor Point of ES5 at the beginning of this chapter.

In addition to constructing methods, the Point class also defines a toString() method. Note that when defining the toString() method, you don't need to add the keyword function in front of it. Just put the function definition in it. In addition, methods do not need to be separated by commas, and an error will be reported if it is added.

The class of ES6 can be regarded as another writing method of constructor.

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

The above code shows that the data type of a class is a function, and the class itself points to a constructor.

When using, it also directly uses the new command on the class, which is exactly the same as the usage of the constructor.

class Bar {
  doStuff() {
    console.log('stuff');
  }
}

const b = new Bar();
b.doStuff() // "stuff"

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

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

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// Equivalent to

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

In the above code, constructor(), toString(), toValue() are actually defined on Point.prototype.

Therefore, calling a method on an instance of a class is actually calling a method on the prototype.

class B {}
const b = new B();

b.constructor === B.prototype.constructor // true

In the above code, B is an instance of class B, and its constructor() method is the constructor() method of class B prototype.

Since the methods of the class are defined on the prototype object, new methods of the class can be added on the prototype object. The Object.assign() method makes it easy to add multiple methods to a class at a time.

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

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

The constructor() attribute of the prototype object directly points to the "class" itself, which is consistent with the behavior of ES5.

Point.prototype.constructor === Point // true
In addition, all defined methods inside the class are non enumerable.

class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

In the above code, the toString() method is an internally defined method of the Point class, which cannot be enumerated. This is inconsistent with the behavior of ES5.

var Point = function (x, y) {
  // ...
};

Point.prototype.toString = function () {
  // ...
};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

The above code is written in ES5, and the toString() method is enumerable.