Object-oriented languages have a hallmark that they all have the concept of classes, through which any number of objects with the same attributes and methods can be created.

There is no class concept in ECMAScript5, so its objects are different from those in class-based languages.

The traditional method of generating objects in Javascript is through constructors.

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        return "Hello "+ this.name;
    }
}

var person = new Person("dahan",18);
person.sayHello();
//Hello dahan

Because this approach is the same as declaring methods in Javascript, the distinction between objects and methods is not obvious and can easily lead to confusion.

ES6 introduces the concept of Class. When we create objects through ES6 grammar, we can use keyword class to define classes just like Java grammar. Of course, the function of this grammar can also be achieved through ES5. It just makes the definition of classes clearer and easier to understand.

//Class Definition
class Person {
    //New Constructor in ES6
    constructor(name) {
        this.name = name;
    }
    //Example method
    sayName() {
        console.log("My name is"+ this.name);
    }
}
//Class Inheritance
class Programmer extends Person {
    constructor(name) {
        //Initialization by calling the parent constructor directly
        super(name);
    }
    program() {
        cosnole.log("This is my house");
    }
}
//Running test
var person = new Person('lingxiao');
var coder = new Programmer('coder');

person.sayName();
//My name is lingxiao.
coder.sayName();
//My name is coder
coder.program();
//This is my house

Now let's pay attention to the grammar that appears in the above code.

constructor

constructorIs the default method of a class, like Java Medium main Like methods, each class must haveconstructorMethod.

In passingnewWhen an object is instantiated, it is automatically calledconstructorThe method, what we get isconstructorThe value returned.constructorReturns the instance object of the current class by default(this)，But we can also specify another object, which, of course, leads to instantiated objects, not instances of the current class.

class Person {
    constructor(){
        var ob = new Object();
        return Ob;
    }
    sayHello(){
        return "Hello World"
    }
}
var person = new Person();
person.sayHello();
//Uncaught TypeError: person.sayHello is not a function

When we instantiate an object, ES6 stipulates that I use the new keyword, and if called directly, it will be called as a function.

class Person {
    constructor(name){
        this.name = name;
    }
};
var person = Person("dahan");
//Uncaught TypeError: Class constructor Person4 cannot be invoked without 'new'

this

In the initial code, we see that this, this, points to the instance itself in the class, but if we use this in the method of the class, when we call this method alone, there will be an error.

class Person{
    constructor(name){
        this.name = name;
    }
    sayHello() {
        return "Hello "+this.name
    }
}
var person  =  new Person("dahan");
var sayHello = person.sayHello;
sayHello();
//Uncaught TypeError: Cannot read property 'name' of undefined

For this we can easily bind this in the constructor

class Person{
    constructor(name){
        this.name = name;
        this.sayHello = this.sayHello.call(this);
    }
    sayHello() {
        return "Hello "+this.name
    }
}

Inheritance extend ed

We want to extend some properties on a class, but we don't want to modify the original class, so we use inheritance.

//Class Inheritance
class Programmer extends Person {
    constructor(name,age) {
        this.age = age;//Report errors
        //Initialization by calling the parent constructor directly
        super(name);
    }
    program() {
        cosnole.log("This is my house");
    }
}

When using inheritance, we need to use super keyword to call the parent class, and super(name) just calls the constructor method of the parent class.

In addition, when we use inheritance, the super keyword also helps us change the direction of this, so we have to call the super method before we can use this. ES6 requires that the constructor of a subclass must execute a super function once, otherwise an error will be reported.

Last

The emergence of class keywords also makes Javascript look more like an object-oriented language. I hope Javascript will become better and easier to use.