1. Constructor implementation class 2. Prototype method implementation class 3

1. Factory method

function Person(name, age, work){
    let obj=new Object();
    obj.name=name;
    obj.age=age;
    obj.work=work;

    return obj;
}

let a=new Person('ming', 18, 'teacher');
let b=new Person('ming', 18, 'teacher');
Copy the code

Objects that are new in this way are untyped and always point to object, not to classes

2. Constructor mode

function Person(name, age, work){
    this.name=name;
    this.work=work;
    this.age=age;
    this.showName=function(){
        console.log(this.name);
    }
}

let a=new Person('ming', 18, 'teacher');
let b=new Person('ming', 18, 'teacher');
Copy the code

When implementing a class this way, the constructor points correctly compared to the factory method, so why not? Look at the code below

let a=new Person('ming', 18, 'teacher');
let b=new Person('ming', 18, 'teacher');

a.showName===b.showName  //false
Copy the code

The same function method of two objects is not the same, why is it better to have the same? Because for the class, the method is the same set of code, if in the new two objects, two function methods are not equal, then it will increase a piece of memory occupation, will cause the decline of JS performance, so there is a prototype method to achieve the class

3. Prototype approach

Every constructor in JS has a prototype property. Prototype refers to a prototype object, and the methods on that prototype object are inherited by the constructor instance, so we can add the required methods and properties to the prototype

function Person(){ } Person.prototype.name='ming'; Person.prototype.age=18; Person.prototype.showName=function(){ console.log(this.name) }; let a=new Person(); let b=new Person(); a.showName(); //ming b.showName(); //ming a.showName===b.showName //trueCopy the code

As you can see, in the prototype defined above method, the different instances are the same method, rather than as a constructor created two different address but the code method Prototype method implementation class is, of course, there is not suitable for, the first point is difficult to use the way assignment, the second point is the most important thing is that, The attributes defined on the stereotype are shallow assignments, which are fine for basic types, but can change one array or object and change the other

function Person(){ } Person.prototype.name='ming'; Person.prototype.age=18; Person.prototype.arr=[12, 5, 8]; Person.prototype.showName=function(){ console.log(this.name) }; let a=new Person(); let b=new Person(); a.arr[1]=99; The console. The log (a.a rr) / /,99,8 [12] the console log (b.a rr) / /,99,8 [12]Copy the code

As you can see, when A changes some value in the ARR array, B also changes, so the combination of the constructor and the prototype seems to be the best way to write

4. Hybrid method implementation classes

To implement a class in a hybrid way, as I understand it, is to write properties in the method body, just as constructors implement classes, but two instances of the same method are not the same. Write methods on the prototype to achieve a more intact class.

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

Person.prototype.showName=function(){
    alert(this.name)
}

Person.prototype.showAge=function(){
    alert(this.age)
}

let a=new Person('ming', 18)
Copy the code

This is my understanding of THE ES5 implementation class. I strongly recommend that you read the Little Red Book for a more straightforward explanation of the ES5 implementation class to better understand the above content

The above is personal understanding, if there is any wrong, please leave a message