JavaScript Es6 Class of understanding.

In this article I will take my understanding of the new feature class of JavaScript es6. In the spirit of sharing the Internet, I will share my own understanding to everyone.

Write a class (constructor) using ES

In ES5, it's common for everyone to write a class (constructor)

It is also important to note that class classes are not promoted.

//Create a user constructorfunctionUser (name, age) { This. Name =name;  This. Age =Age ;}//the static method of the user constructor. User.getclassname =function () {    return' User ';};//dynamic method of user constructorUser.prototype.changeName =function(age) { This. Age =Age};object.defineproperty (User.prototype,' Info ', {get () {return' Name: ' + This. Name + ' | ' + ' age: ' + This. Age}});//Create a manager constructorfunctionManager (name, age, password) {User.call ( This, name, age);//Call the user function inside the manager function     This. Password =Password}//static method of inheriting usermanager.__proto__ =User;//Call the GetClassName method that inherits the user. Console.log (Manager.getclassname ());//inheriting the user dynamic methodManager.prototype =User.prototype;//Create a new dynamic method ChangePasswordManager.prototype.changePassword =function(pwd) { This. Password =pwd};//instantiate the manager constructor. varManager =NewManager (' Zhang ', 22, ' 123 '); Manager.changename (' 23 '); Console.log (manager.info);

Convert the constructor of ES to a class

There's really nothing wrong with this approach, but it's not as elegant as the Es6 class, and I'll use ES6 syntax to make the code a little more elegant.

It's essentially the same, but it's just a syntactic sugar.

/** * Created by Zhang Jiawei on 2017/5/2.*/' Use strict ';//function User (name, age) {//this.name = name;//this.age = age;// }class User {//The constructor is now called the nature of the class is the same, in fact, is a syntactic sugar. Constructor (name, age) { This. Name =name;  This. Age =Age ; }    //user.getclassname = function () {    //return ' User ';    // };    //Static Methodsstatic GetClassName () {return' User '; }//User.prototype.changeName = function (name) {//this.name = name;// };//dynamic method, equivalent to the prototype in ESChangeName (name) { This. Name =name; }//User.prototype.changeAge = function (age) {//this.age = age;// };Changeage (age) { This. Age =Age ; }//Object.defineproperty (user.prototype, ' info ', {//get () {//return ' name: ' + this.name + ' | ' + ' age: ' + this.age//     }//     });Get Info () {return' Name: ' + This. Name + ' |age: ' + This. Age; }};//function Manager (name, age, password) {//User.call (this, name, age);//this.password = password;// }//Inheriting static methods//manager.__proto__ = User;////Inherit prototype prototype method//manager.prototype = User.prototype;//It's easy to inherit here, one step is in placeclass Manager extends User {constructor (name, age, password) {super (name, age);        This I will, here is a temporary understanding of call, but notice that he and call are not the same.  This. Password =password; } changePassword (password) {return  This. Password =password; } Get Info () {varinfo = super.info;//This is the parent's info, and of course you can rewrite the info method. That is to delete this code, in writing the new on the line pull ~        returnInfo}}//Console.log (typeof User, typeof Manager);varManager =NewManager (' Leo ', 22, ' 123 ');//manager.changename (' Zeng Liang ');Console.log (Manager.info); Console.log (Manager.changepassword (456))

Immediately execute the class's wording

' Use strict '; // classes that are immediately executed New class User {    constructor (name) {        this. Name= name;    }} (' pencil ') console.log (User)

JavaScript Es6 Class of understanding.