Es6 "Class"--class in creating objects and comparing normal usage in ES5

The traditional way of JavaScript language is to define and generate new objects through constructors. Here is an example. (Can be Factory mode, constructor mode, combination of the advantages and disadvantages of the model can be found on the Internet)

function point (x, y) {

This.x=x;

This.y = y;

}

Point.prototype.toString = function () {

Return ' (' +this.x+ ', ' +this.y+ ') ';

}

var p= new Point;

Define the way classes are used in ES6:

Defines a class of type ' point
{
  constructor (x, y) {
    this.x = x;
    This.y = y;
  }

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

hahaha, 1. Class point is not used between the methods, the number is separated, the method is not defined by the function,

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

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

  ToString () {
    //...
  }

  Tovalue () {
    //...
  }
}

Equivalent to

Point.prototype = {
  toString () {},
  Tovalue () {}
};

2. All defined methods within a class are non-enumerable (but methods prototype in ES5 can be enumerated)

3. There is one constructor method in each class The method returns the instance object

4.

The constructor of the class, without using new, cannot be called and will error. This is a major difference from the normal constructor, which can be executed without new.

Second, use the class for example and use ordinary constructors to do the example:

1, the use of the class instance must use new or else will be an error

2. As with ES5, the properties of an instance are defined on the prototype (that is, defined on class) unless explicitly defined in itself (that is, defined on the This object).

3. As with ES5, all instances of the class share a prototype object.

4, class does not exist variable promotion (hoist), which is completely different from ES5

New Foo (); Referenceerror
class Foo {}

In the above code, the Foo class is used before, defined, and this will cause an error because ES6 does not elevate the class declaration to the code header. The reason for this provision is related to the inheritance mentioned below, and it is important to ensure that subclasses are defined after the parent class.

{Let
  Foo = class {};
  Class Bar extends Foo {
  }
}

The above code will not get an error, because Foo is already defined when bar inherits Foo. However, if there is a class promotion, the above code will error, because class will be promoted to the head of the code, and the Let command is not promoted, so when Bar inherits Foo, Foo is not defined. 2. Class inherits §⇧ class inheritance using extend 1, subclasses must call the Super method in the constructor method, or the new instance will get an error. This is because the subclass does not have its own this object, but instead inherits the parent class's this object and then processes it. If you do not call the Super method, the subclass will not get the This object.
2, ES5 inheritance, the essence is to create the subclass of the instance object this, and then add the method of the parent class to the above (parent.apply (this)). The inheritance mechanism of ES6 is completely different, essentially creating an instance object of the parent class (so the super method must be called first), and then modifying this with the constructor of the subclass. 3.

Another thing to be aware of is that in the subclass constructor, only super can be used to use the This keyword, otherwise it will be an error. This is because the subclass instance is built based on the processing of the parent class instance, and only the Super method can return the parent class instance.

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

Class ColorPoint extends Point {
  constructor (x, y, color) {
    This.color = color;//Referenceerror
    super (x, y);
    this.color = color;//Correct
  }
}

In the above code, the subclass's constructor method does not call super before using the This keyword, the result is an error, and the Super method is right after it is placed.

Super.print.call (This)

the prototype property of the class and the __proto__ property §⇧

In the ES5 implementation of most browsers, each object has a __proto__ property that points to the prototype property of the corresponding constructor. Class is the syntactic sugar of the constructor, with both the prototype attribute and the __proto__ attribute, so there are two inheritance chains at the same time.

(1) The __proto__ property of the subclass, which represents the inheritance of the constructor and always points to the parent class.

(2) The __proto__ property of the subclass prototype property, which represents 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//t Rue

In the preceding code, the __proto__ property of subclass B points to the parent class A, and the __proto__ property of the prototype property of subclass B points to the prototype property of the parent Class A.

The result is that the inheritance of the class is implemented in the following pattern.

the __proto__ property of the instance

The __proto__ property of the __proto__ property of the subclass instance, pointing to the __proto__ property of the parent class instance. In other words, the prototype of a subclass is a prototype of the parent class. inheritance of native constructors

A native constructor is a built-in constructor that is commonly used to generate data structures. The native constructors of ECMAScript are roughly the following. Boolean () Number () String () Array () Date () Function () RegExp () Error () Object ()

Previously, these native constructors were not inherited, for example, a subclass of an array could not be defined by itself.

function MyArray () {
  array.apply