ES6 in Class usage and inheritance

1. Examples of the class

Examples of classes written generated with exactly the same ES5, is the use of the new command. As mentioned above, if you forget to add new, like a function call that Class, will be thrown.

    class Point {
      // ...
    }
    
    // 报错
    var point = Point(2, 3);
    
    // 正确
    var point = new Point(2, 3);

And ES5 as attribute instance unless explicitly defined in and of itself (i.e., this object is defined in a), or are defined (i.e. defined in the class) on the prototype.

    //定义类
    class Point {
    
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    
    }
    
    var point = new Point(2, 3);
    
    point.toString() // (2, 3)
    
    point.hasOwnProperty('x') // true
    point.hasOwnProperty('y') // true
    point.hasOwnProperty('toString') // false
    point.__proto__.hasOwnProperty('toString') // true

Code above, X and y are instances of an object point own properties (as defined in this variable), the flow returns to true hasOwnProperty method, the properties of the prototype object is toString (as defined in Point), the method returns hasOwnProperty false . These are consistent with the behavior of ES5.

ES5 and as a share of all instances of the class prototype object.

    var p1 = new Point(2,3);
    var p2 = new Point(3,2);
    
    p1.__proto__ === p2.__proto__
    //true

The above code, p1 and p2 are the Point instance, their prototypes are Point.prototype, so __proto__ property are equal.

2. Inheritance

    class Point {
    }
    
    class ColorPoint extends Point {
    }

ES5 inheritance, in essence, is to create an object instance of this subclass, then add to this parent class above (Parent.apply (this)). ES6 inheritance mechanism is completely different, in essence, properties and methods of the parent class instance object first, this was added to the above (it is necessary to call super methods), then with constructor this subclass modification.

If the child class does not define constructor method, which will be included by default, as follows. In other words, whether or not explicitly defined, any sub-class has a constructor method.

super keyword, either as a function of use, you can also use as a target . In both cases, its use is completely different.

The first case, as a super time function call, on behalf of the parent class constructor. ES6 claim subclass constructor must perform a super functions. As a function, super () constructor can only be used in the subclass, the error will be used in other places. And super () is inside this point B.

    class A {}
    
    class B extends A {
      constructor() {
        super();
      }
    }

In the above code, among Super subclass constructor of B (), representing the call the constructor of the superclass. This is necessary, otherwise the JavaScript engine error.

The second case, when the object as a super, in the conventional method, the parent class prototype object point; in a static method, points to the parent class.

    class A {
      p() {
        return 2;
      }
    }
    
    class B extends A {
      constructor() {
        super();
        console.log(super.p()); // 2
      }
    }
    
    let b = new B();

The above code, which subclass B super.p (), as an object is to use super. In this case, in the conventional method Super, point A.prototype, so super.p () equivalent A.prototype.p ().

The function of this internal arrows point to where the objects are always defined.

ES6 in Class usage and inheritance

Guess you like