JS Small Guide to OOP

JS Small Guide to OOP

In the guide, I will try to parse the new features of the ES6 that focus on the object-oriented specification.

First of all

What is design mode

A paradigm is an example or model of a transaction in which, in some cases, a computer program is created according to a pattern.

What is object-oriented

Obviously you realize that this is a design pattern, like the existing pattern, we have many other design patterns, such as functional programming and reactive programming.

The characteristics of this model

What we do in this pattern is to program in a much more practical way, using classes, objects, methods, attributes, and so on, and integrating terminology such as abstraction, encapsulation, modularity, privacy, polymorphism, and inheritance.

The problem with JavaScript is that it's not a very prescriptive language, why? Because JavaScript is all about objects, we can use well-known prototype to solve this problem.

In ES5, we use the following example to implement the engineering pattern:

Console.Log(' * * * person ');function  Person(name){  This.name =Name;}//Explicit properties and methods Person.prototype = {   Eyes: 2,   Mouth: 1,   Sleep: function(){    return ' zzz ';   }};//Create a guy named Nick.ConstP1= New  Person(' Nick ');Console.Log(' Name:${P1.name}`,  ' Eyes:${P1.Eyes}`,  ' Mouth:${P1.Mouth}`,   P1.Sleep());Console.Log(' * * * EMPLOYEE ')//If we have a class attribute, we can inherit the property of the personfunction Employee(Name,Salary{   This.name =Name;   This.Salary =Salary;}//Prototype inheritanceEmployee.prototype = Object.Create( Person.prototype);Employee.prototype.Constructor =Employee; //Set his own constructor//Can do the same thing now//Create an employeeConstEm1= New Employee(' John ',  the);Console.Log(' Name:${em1.name}`,  ' Salary:${em1.Salary}USD ',  ' Eyes:${em1.Eyes}`,  ' Mouth:${em1.Mouth}`,   em1.Sleep());

Now use ES6 to implement the above operation in a simple way, but be sure to remember that this is just a syntactic sugar:

classPerson{  Constructor(name){     This.name =Name;     This.Eyes = 2;     This.Mouth = 1;  }  Sleep(){    return ' zzz ';  }}classEmployeeextendsPerson{  Constructor(Name,Salary{    Super(name);     This.Salary =Salary;  }}ConstP1= New  Person(' Nick ');Console.Log(' Name:${P1.name}`,  ' Eyes:${P1.Eyes}`,  ' Mouth:${P1.Mouth}`,   P1.Sleep());ConstEm1= New Employee(' John ',  the);Console.Log(' Name:${em1.name}`,  ' Salary:${em1.Salary}USD ',  ' Eyes:${em1.Eyes}`,  ' Mouth:${em1.Mouth}`,   em1.Sleep());

In this case, by extends keyword We just say: Well, I want to inherit Person the properties of the class. But behind this, this is the same as the prototype we used in the ES5 example.

Static methods

class{  staticwhatIs{   return‘A dog is a beatiful animal‘;  }}// 因此，我们通过静态方法，不用实例化一个新的对象就可以访问方法console.logDog.whatIs() );

Private properties

JavaScript does not have private properties like Java and C #. It is important that in JavaScript we have a convention for "private" values that are preceded by an underscore :

class  person Span class= "OP" >{ constructor  (Name phone) { this . name    =  name this . _phone  =  phone }  }  const  p1 =  span class= "kw" >new  person  (  544342212 )  //actually ' phone ' is not a private property, because we can use this:  console . log  (p1 .) _phone )   

In ES6, however, we have an object called Weakmap, which allows us to create private properties. Let's look at the following:

//Because it is a reserved word, do not use private as the variable nameConstSecret= New Weakmap();classPerson{  Constructor(Name,Phone{     This.name =Name;    Secret.Set( This, {_PhoneNumber:Phone});  }}ConstP1= New  Person(' John ', 544342212);//Now _PhoneNumber is a private propertyConsole.Log(P1._PhoneNumber); //Print ' s undefined

Getters and Setters

When we have a private method, we typically create a public method that returns a private value, so we must return a value and define a new value.

ConstSecret= New Weakmap();classPerson{  Constructor(Name,Phone{     This.name =Name;    Secret.Set( This, {_PhoneNumber:Phone}GetPhoneNumber(){    return Secret.Get( This)._PhoneNumber;  }SetPhoneNumber(Newnumber){    Secret.Get( This)._PhoneNumber =Newnumber;  }}ConstP1= New  Person(' John ', 544342212);ConstP2= New  Person(' Tom ', 111111);//Get the phone number by GetterConsole.Log(P1.PhoneNumber); //Print ' s the number//Set a new phone numberP1.PhoneNumber = 432232323;P1.PhoneNumber = 222222;Console.Log(P1.PhoneNumber, P2.PhoneNumber); //Get a new phone number

Polymorphic

During execution, an object references an event of its class or any subclass of the event. Subclasses may redefine a method.

classPerson{  Constructor(name){     This.name =Name;  }  Me(){    return ' My name is${ This.name}`;  }}ConstAxel= New  Person(' Axel ');Console.Log(Axel.Me());  //-' My name is Axel 'classEmployeeextendsPerson{  Constructor(Name,Salary{    Super(name);     This.Salary =Salary;  }  Me(){    return ' My name is${ This.name}and my salary is${ This.Salary}`;  } }ConstNick= New Employee(' Nick ',  the);Console.Log(Nick.Me());  //-' My name is Nick and my salary are '

Some concepts

• Class : creates a new class or model.
• constructor: Initializes the method of the object when the class is instantiated.
• extends: used to set inheritance
• Super: Sets the method that invokes the parent's inherited property. Supe must be in the first row of the constructor.
• Get: a method that gets a value.
• set: a method for redefining a value.

JS Small Guide to OOP