Javascript is a weak language, and it has the same flexibility that has quickly made it a must-know language for almost everyone. But are you using the right posture?

In the previous development process, the boss: give me a verified user email, verified user SMS… Features!

function checkMessage() {... }function checkEmail() {... }function. // There are a lot of functionsCopy the code

If function is a global variable, it will inevitably cause pollution to the javascript environment of the project, which may affect other colleagues. First, we should consider whether it will affect others. If someone else has the same name and overwrites your checkMessage, Then such bugs are hard to find. In order not to cause too much global pollution, we can write:

var checkObject = {
    checkMessage:function(){},
    checkEmail:function(){},
    ...
}
Copy the code

First of all, it’s not that this is not polluting, checkObject is still a global variable, so what’s the benefit? Imagine if Jquery’s $is overwritten

$.each | $.extends | $(#id) | $... 
Copy the code

It’s easy to locate the problem: Jquery has a problem! The same is true for the checkObject. When something goes wrong with the checkObject, it’s easy to locate the error.

Just call checkObject.checkMessage()

So here’s the problem: what if someone at work does something with my checkObject? Student: Can it just use my method? Sure. The question is, if you buy a book do you want people to write about it? We can remake it:

var checkObject = function() {return {
        checkMessage:function(){},
        checkEmail:function() {},... }}Copy the code

We return the method via a call to function, so that others can use it like this:

var check = checkObject();
check.checkEmail();
Copy the code

We can refine this by treating checkObject as a Java class, and checkMessage and checkEmail as Java public methods. Now that we have a class, we can write checkObject as uppercase checkObject

var CheckObject = function(){
    this.checkMessage = function(){},
    this.checkEmail = function(){},
    ...
}
Copy the code

Others call:

var check = new CheckObject(); // Since it is a class, we need new to instantiate check.checkemail ();Copy the code

Every time you create a new object with new, the new object will copy the property on this class, so you defined two so you copy it twice, and then more? We can use the javascript prototype to create it:

 var CheckObject = function(){
   
 }
 CheckObject.prototype.checkMessage = function(){},
 CheckObject.prototype.checkEmail = function(){},
 ...
Copy the code

You don’t mind the trouble?

 var CheckObject = function(){
   
 }
 CheckObject.prototype{
 checkMessage : function(){},
 checkEmail : function(){},
 ...
 }
 
Copy the code

So we copy our methods to the CheckObject prototype, and create objects that are bound to __proto__

Jquery

Have you ever wondered how Jquery methods are chained? That’s easy. Let me simulate it

 var CheckObject = function(){
   
 }
 CheckObject.prototype = {
 checkMessage : function(){ ... return this },
 checkEmail : function(){ ... return this },
 ...
 
 var check = new CheckObject();
 check.checkMessage().checkEmail();
Copy the code

As simple as that, we just need to return all the current objects referred to by this.

Anyway, back to the subject of object-oriented programming

Java has private variables declared as private, public getter and setter methods that communicate with each other, static variables that are static, static methods, and constructors. Can javascript use this design pattern? Yes, follow me and read:

We went to the store to buy cigarettes

var Smoke = function(id,name){var num = 0; This.id = id; // The public property of the object (requires new) this.id = id; // Private methodfunction checkID() {return true}; // The public setter and getter constructor this.setname =function(name){
        this.name = name;
    }
    this.getName = function() {returnthis.name; } // The public property of the object (requires new) this.information =function(){// Call checkID() only inside Smokeif(checkID()) return this.name+'cigarettes'+'Order number :'+this.id

    } 
}
Smoke.prototype = {
    money:'10 yuan', // public properties (no need for new) directly Smoke. Money  other:function(){}
}

var smoke = new Smoke(994857,'Xuan Door');
smoke.information(); //"Undefined Cigarettes Order no. 994857"> > < p style = "padding-top: 0px; padding-top: 0px;'Xuan Door'); // We assign the value smoke.information(); //Xuan Door Cigarettes Order No. 994857smoke.num; //undefined ps: this attribute is private smoke.checkid (); //error is notfunctionPs: Private methods, obviouslyCopy the code

If we don’t have new

var smoke = Smoke(994857,'Xuan Door');
smoke.information(); //Uncaught TypeError: Cannot read property 'information' of undefined
Copy the code

Nani made a mistake?

smoke.money; //undefind 
smoke //undefind 
Copy the code

(Seems to understand what……) Don’t worry. Let’s take a look at Window

window.information(); // "Undefined Cigarettes Order no. 994857"
Copy the code

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = How do you avoid this no-action? We do type checks inside Smoke:

var Smoke = function(id,name){
    var num = 0;
    function checkID() {return true}; // Select * from 'Smoke' where 'Smoke' = 'Smoke'if(this instanceof Smoke){ 
        this.id = id;
        this.setName = function(name){
            this.name = name;
        }
        this.getName = function() {returnthis.name; } // The public property of the object (requires new) this.information =function(){// Call checkID() only inside Smokeif(checkID()) return this.name+'cigarettes'+'Order number :'+this.id
    
        }
    }else{
        returnnew Smoke(id,name); // create 0.0}}Copy the code

In fact, javascript is flexible here. This is just a common Object-Oriented design pattern of javascript. In the future, I will introduce more design patterns.

Thank you for proofreading this article