Understanding of class in ES6

Posted by sweetmaster on Wed, 16 Oct 2019 20:12:38 +0200

If you have any mistakes in your understanding, please point out:

When learning JavaScript, we know that there is no class writing method, so when we need a class, we usually use a constructor to simulate the class writing method. Class writing is provided in ES6, which is not available in ES5. Sometimes when we write a constructor, we use function to write a constructor, but this functional programming method is hard to find the constructor intuitively. As follows:

In ES5, when we write a constructor (simulation class), we will write this. We can see that this is also a function, but I will capitalize the first digit of the name, which can be distinguished from ordinary functions. And this.x is used to bind the property or method to the constructor.

ES5 writing class

function Cus(a,b){
    this.a = a;
    this.b = b;
    this.add = function (){
        return this.a +this.b
    }
}
var c = new Cus()
console.log(c.add())

Suppose we use ES6 to write a class. Although it provides a class writing method, the following writing method is wrong, as follows:

class CUS{
    this.a = 12;
    this.b = 13;
    this.add = function (){
        return this.a +this.b
    }
}

Why can't we use this? That's because none of the classes here are instantiated. That is to say, we haven't created an instance of a class yet. This is bound to an object. Here we'll talk about ES6's constructor ()

ES6 writing class

class Person {
    constructor() {
        this.firstname = "Ymw";
        this.lastname = "ming";
        this.add = function(){
            return this.firstname+' '+this.lastname
        }
    }
}

var person1 = new Person();

console.log(person1.firstname+' '+person1.lastname); //Ymw ming
console.log(person1.add()); //Ymw ming

Here I also put the add method in the constructor. Although this can be done, it is suggested that only attributes should be put in the constructor(), and the method should be written under the parallel position of the constructor(), such as:

class Person {
    constructor() {
        this.firstname = "Ymw";
        this.lastname = "ming";
        this.add = function(){
            return this.firstname+' '+this.lastname
        }
    }
    say() {
        return "hi,"+this.firstname+' '+this.lastname
    }
}

var person1 = new Person();

console.log(person1.firstname+' '+person1.lastname);//Ymw ming
console.log(person1.add());  //Ymw ming
console.log(person1.say());  //hi,Ymw ming

class parameters

Do not write a bracket parameter next to class. This is wrong. Generally, the editor will prompt an error. The correct writing method is to write it in the bracket of constructor(), as follows:

class Person {
    constructor(first,last) {
        this.firstname = first;
        this.lastname = last;
        this.add = function(){
            return this.firstname+' '+this.lastname
        }
    }
    say() {
        return "hi,"+this.firstname+' '+this.lastname
    }
}

var person1 = new Person('Ymw',"ming");

console.log(person1.firstname+' '+person1.lastname);//Ymw ming
console.log(person1.add());  //Ymw ming
console.log(person1.say());  //hi,Ymw ming

 

 

 

Topics: Javascript Programming