JavaScript Es6 Class of understanding.

Source: Internet
Author: User
Tags class manager es6 class

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.