1 Class in ES6
ES6 proposed the concept of class (Class), so that the wording is more like an object prototype object-oriented language writing. ES6 defined by the object class, having the default constructor method and custom methods, the methods contained in the class can not be enumerated.
class Point{
constructor(){
this.x=x;
this.y=y;
}
toString(){
return this.x+this.y;
}
}Note: constructor corresponding to the constructor method ES5; creating a class method does not require the use of function key, the method does not require separated by commas.
ES5 combination mode and using the constructor prototype model, model constructor is used to define an object instance attributes defined, the prototype model is used to define a method of sharing a shared attributes, to save memory, and support pass parameters to the constructor.
function Point (x,y){
this.x=x;
this.y=y;
}
Point.prototype.toString= function(){
return this.x+this.y;
}
2 ES5 and ES6 create an instance of an object and compare
. 1) constructor Person Person ES5 and the prototype object instance and Person1, Person2 the relationship: constructor prototype attributes and attribute instance __proto__ point prototype object, constructor properties of the prototype object points to the constructor.
Prototype constructor (prototype) property still exist in ES6 in this and ES5 as: class methods are defined on the prototype class (prototype), call the method in the instance of the class above, it is actually a method on a prototype called.
//实例的constructor方法就是类的原型(prototype)的constructor方法
class B{
constructor(){}
}
let b = new B();
console.log(b.constructor === B.prototype.constructor);//true
Class 2) ES6 can be seen as another way constructor (the constructor and ES5 are not equivalent constructor method): class is the function type, the properties prototype object constructor class itself and directed class, which ES5 same.
class Point{
// ...
}
console.log(typeof Point) // "function"
console.log(Point === Point.prototype.constructor) // true
3) using the class creates an instance of an object is the use of new commands directly to the class, consistent with the usage ES5 in the constructor.
4) within a class methods are not enumerated, this and ES5 different.
. 5) constructor method of
a class must have a constructor method, if not added default constructor () {}. Although the class is a function, but ES5 and different, not directly by calling the class will lead to new types of error, that this function only makes sense if new and used together.
Example 6) class
and ES5 same 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') // trueCode 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
__Proto__ property can be reduced by adding instances of Class method, after all of the prototypes have increased this method, as it and ES5.
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' };
p1.printName() // "Oops"
p2.printName() // "Oops"
7) Class variable lift (hoist) does not exist, it is completely different and ES5.
new Foo(); // ReferenceError
class Foo {}In the above code, using the first class Foo, after definition, this being given, because the class declaration ES6 not raised to the head of the code. The reason for such a provision relating to succession, must ensure that the subclass definition after the parent class.
8) strict mode
inner classes and modules, the default mode is strict, so you do not need to specify use strict mode of operation. As long as you write code in class or module in, only strict mode is available. Taking into account all of the code in the future, it is actually running in the module and so ES6 actually upgrade the whole language to the strict mode.
3 ES6 Class inheritance
Class achieved by the extends keyword to inherit, and ES5 achieved this by modifying the different prototype inheritance chain (Coincidentally, style inheritance SASS also be achieved by @extend):
class ColorPoint extends Point{}The subclass must call the super method in the constructor method, otherwise it will error when creating a new instance. This is because the subclass does not own this object, but this object inherits the parent class, then its processing. If you do not call the super method, the subclass will not get this object.
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // super代表父类原型，调用父类的toString()
}
}In the above code, and among the constructor method toString methods have emerged super keyword , where it shows the structure of the parent class, this object is used to create a new parent class.
super keyword, either as a function of use, you can also use as a target. The first case, as a super time function call, on behalf of the parent class constructor, can only be used in the constructor subclass. ES6 claim subclass constructor must perform a super functions. The second case, when a super object refers to the object on behalf of the prototype parent class.
ES5 inheritance, in essence, is to create an object instance of this subclass, then add to this parent class above (Parent.apply (this)). (ES5 through inheritance prototype mode: create a sub-class, and then assign instance of the parent class to child class prototype, which is a subclass rewrite the prototype and replaced by a new type of instance.) ES6 inheritance mechanism is entirely different, the essence of this is the first instance of an object to create the parent class (you must first call the super method), then use the constructor subclass modify this.
If the child does not define the class constructor method, which will be added by default. In the constructor subclass, only after calling super, you can use this keyword, otherwise it will error . This is because the construction of a subclass instance, is based on the parent process instance, only the super method to 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; // 正确
}
}And ES5 as instances created by a subclass is an instance of the parent class and subclass:
let cp = new ColorPoint(25, 8, 'green');
cp instanceof ColorPoint // true
cp instanceof Point // true
4 supplement
1) prototype class attributes and __proto__ property (not understand this, too around.)
ES5 __proto__ each object has attributes, point prototype property corresponding constructor. ES6 no constructor, Class constructor as syntactic sugar, while the prototype property __proto__ property and, at the same time there is two inheritance chain.
(1) __proto__ attribute subclasses, inheritance represents a constructor, always points to the parent class.
(2) __proto__ properties subclass prototype property, expressed inherited methods, the prototype property always points to the parent class.
This results because the class inheritance is implemented according to the following mode.
class A {
}
class B {
}
// B的实例继承A的实例
Object.setPrototypeOf(B.prototype, A.prototype);
const b = new B();
// B的实例继承A的静态属性
Object.setPrototypeOf(B, A);
const b = new B();
This inheritance two chains can be understood: as an object, prototype (the __proto__ properties) subclass (B) is the parent class (A); as a constructor, prototype (prototype attributes) subclass (B) is examples of the parent class.
2）Object.getPrototypeOf
Object.getPrototypeOf method can be used to obtain from the parent class subclass.
Object.getPrototypeOf(ColorPoint) === Point
// trueThus, this method can be used is determined, whether a class inherits another class.
__proto__ property 3) of Example
__proto__ property __proto__ property subclass instance, point __proto__ properties of the parent class instance. That is, the prototype of the prototype of the sub-class instance is the instance of the parent class prototype.
var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');
p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true
Overall, ES6 is to change the form of ES5, the true content remains unchanged, in essence, is still a prototype by inheritance chain.