Ecmascript 6 Classes

ecmascript-6

// ES6:

ES5 has objects but it has no concept of class.  ES6 introduce classes:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  about() {
    console.log(this.name, this.age);
  }
}

Notice that we do not use the function keyword, and we do not use arrows.  We 
just provide the name, put parentheses, parameters, curly braces and implement 
the function.

To use the above code:

var jack = new Person('jack', 22);
jack.about();

Note that this is not a new inheritance system or class system.  It is all using 
the existing prototypal inheritance system we are used to in JavaScript, and we 
are just adding a nice syntactical sugar on top of it.  This does not mean that 
we should go ahead and replace our object literals with classes all over the 
place.

class Son extends Person {
  constructor(name, age) {
    super(name, age);
    this.son = true;
  }
};
var jack = new Son('jack', 22);
jack.about(); // jack 22
jack.son; // true

The above code demonstrate using the extends keyword, and the super keyword.

The super keyword call the method of the same name on the parent class.  In the 
above code, the super keyword was used inside the constructor function, so it 
invoke the constructor function in the parent class.

class LoginFormController {
  constructor() {
  }

  submit() {
  }
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License