Daily javascript encapsulation, javascript Encapsulation

Daily javascript encapsulation, javascript Encapsulation

Dear friends, we have already explained the basics of javascript. Starting from today's content, we will begin to talk about the encapsulated content. Here, we have come into contact with OOP (Object-Oriented Programming) 1.1. If programmers who use a language don't even know what it is, or even have heard of it, they don't understand it, I cannot write object-oriented code, so there is no need to learn programs. Next I will introduce in detail what object-oriented programs are and what processes are. To understand object-oriented code, first, we must know the process orientation. After you have understood the process orientation, we cannot blindly develop OOP for the sake of OOP. This will only be a futile task, because most of the time, we write some code to solve a small problem, so we don't need to write OOP. We only need to write some process-oriented code, use words to describe "adapting to local conditions ".

Let's start with the process orientation. Let's first explain what the process means. What we call the "program" is actually a process. Executing a program is a process, for example: going to work is a program. The process goes through, and we will arrive at the company on time at six o'clock P.M. to do what we should do. No matter what we do at, we will finish the work process and leave the company, this is the process. Let's take a more concrete example. We can better understand the process of withdrawal and execution:

1. Attach a bank card to an ATM

2. Bank Card insertion

3. Enter the password

4. Enter the number of withdrawals

5. ATM banknotes

6. Put the money in your pocket

6. If you find that you have not obtained the desired number, return to step 1.

7. If you want to print the return ticket, click Print the return ticket. If not, skip this step.

8. Return the card

9. Program completion

From the above steps, we can see that from the first step to the last step, this is the execution order. Steps 4th to 6th are a circular process, and steps 7th are a branch process. This is the process, that is, the program. The purpose of code writing is to simulate some behavior processes and use the features of high-speed computing by computers to serve our daily lives.

We can encapsulate withdrawals into a function. This is an independent process. When necessary, we can call this function to complete our work, next we will use the simplest example to express a simple program process.

Function KissWife (whoseWife) {console. log (whoseWife + "bring your face together"); console. log ("I printed my lips"); console. log ("a piece of wood"); console. log ("" + whoseWife + "");} KissWife ("My Wife ");

Let's look at the figure. When appropriate, we call the KissWife function and input the appropriate parameters to complete the process.

　　The objective of OOP is to improve the code reuse rate.Using parameters as much as possible with the least code is also a reflection of object-oriented programming. Let's give a back example. If we don't use parameters, when we want to kiss other people's wives, we need to re-write a KissWife function. In this way, we write a lot of repeated code, which is inconvenient for code management, inconvenient, and difficult to use, even when you kiss another person's wife, the probability of being discovered increases greatly, causing unnecessary troubles.

At this time, some people want to ask, I think, I feel that I am not used to parameters, that is, I don't want to pass parameters. Where can it be inconvenient to manage code management? Well, this question is quite correct.

Let me explain it. If we find something unreasonable during the execution process, we need to modify it. For example, if I want to stick my tongue, we need to modify (troublesome) in the function of our wife, and modify (troublesome + 1) in the function of our wife. When we have many similar functions, is it necessary to make all the modifications (trouble + n); the second disadvantage is that the number of modifications is too large. Can you ensure that all modifications at a time will not go wrong (easy to make mistakes ), this can be reflected. If we only write some repetitive code completely, the work efficiency will be greatly reduced.

Through the above explanation, the novice readers still fail to understand what is OOP (object-oriented programming). Now we will start from the introduction of objects, it cannot be simply understood as a friend between men and women who fall in love. The object refers to everything in the world, the sun, the sea, people, pets ......; Every kind of thing we can get, every object has its own attributes and behaviors.

We can understand as follows that a bird is an object that has its own attributes and its own behaviors. Next we will encapsulate a bird class with specific code. (Note: In javascript, the function keyword is only used to define a function or a Class. It cannot use the Class keyword as in advanced languages. When we talk about inheritance later, we also use special methods to implement inheritance)

// Declare a Bird function Bird () {this. name = "Pigeon"; this. color = "gray"; this. habitat = "cage"; this. weight = "500 grams";} // use the prototype chain to define the row of a bird. It can also be used to define attributes. However, attributes generally use the this keyword to declare // behavior and attributes. in fact, at the same level, we will use for in to verify // tweet Bird. prototype. sing = function () {console. log ("cool");} // eat Bird. prototype. eat = function () {console. log ("eat a grain of Corn");} // flying Bird. prototype. fly = function () {console. log ("flying in the sky");} // hatch Bird. prototype. brood = function () {cossole. log ("hatching pigeon eggs ");}

Now our class has been declared, but how can we use it? Now it is just a class, not an instance, that is, what I call a pigeon. An instance is a specific pigeon. How can I get a specific pigeon? See the following code.

// Use the new keyword to obtain an instance var gezi = new Bird ();

Now we can call its attributes and methods.

In this way, every pigeon we get is actually the same. How can we get a pigeon with its own characteristics? If you have your own unique features, but the attributes are different, let's modify the declaration of the function.

// In fact, we only need to modify function Bird (_ color, _ habitat, _ weight) {this. name = "Pigeon"; this. color = _ color; this. habitat = _ habitat; this. weight = _ weight ;}

Then let's take a look at how to instantiate a pigeon.

// Now we instantiate two pigeons var gezi_A = new Bird ("white", "wild", "300 grams"); var gezi_ B = new Bird ("gray white ", "greenhouse", "550 grams ");

In this way, we can construct a pigeon with its own characteristics. From the above example, we can see that encapsulation actually represents the objects we can describe with classes, we can use the new keyword to create an object. This object has its own attributes and behaviors. Such an object can be conveniently operated by us, encapsulation is a method that embodies OOP. First, we encapsulate a class and then new instances, this is much less code than using code to construct a pigeon class twice. If we still construct 3rd pigeons, we can create a new one. When constructing an object, I feel like a piece of code. To improve the code reuse rate, OOP is shown in this way.

At this time, someone asked, just talking about the benefits of using OOP, but we haven't seen how to write code without OOP, so we will come to a method without OOP, also taking pigeons as an example.

// Declare a pigeon function GeZi_C () {console. log ("Pigeon type"); console. log ("the color is blue"); console. log ("live on the treetops"); console. log ("Weight: 400 grams"); console. log ("flying in the sky");} // execute a GeZi_C ();

If we want to declare another 100 pigeons, do we need to write a lot of code similar to the above? This is process-oriented code. I believe that new friends already have a vague concept of OOP, so I will be able to understand it in less than a day. It cannot be a big fat man, we will continue to talk about the inheritance and Polymorphism of OOP ideas later.

When declaring the Bird class, the attribute and behavior are declared at the same level, and can be declared in two ways. The attribute is declared using the this keyword in the constructor, behavioral functions are declared with the prototype keyword. prototype is the standard extension of the function prototype chain. The reason we write this code is to substitute the use of javascript into the category of advanced languages, it is used to simulate the use of advanced languages. Let's verify if the Bird instance object has the same level of attributes and behavior functions.

// We now use the Bird class var obj = new Bird () without parameters in the front; // print them out one by one for (var pro in obj) {console. log (pro + ":" + obj [pro]);}

See it,... in is used to traverse the attributes of the object and the subscript of the array. The name of the behavior function is actually the attribute of the object. Now I have verified the previous statement, I believe that everyone now has a certain understanding of OOP encapsulation ideas.

To sum up, what we are talking about today is actually to give an abstract anthropomorphic thing, and then encapsulate these attributes and behaviors into a class, and instantiate a specific object using the new keyword, this greatly improves the code usage and work efficiency.

Articles you may be interested in:

• Javascript encapsulation source code for an AJAX Automatic completion function [Chinese supported]
• A js encapsulated good tab effect code
• Class Of Marquee Scroll general non-stop rolling JS encapsulation Class
• JS class encapsulation and implementation code
• Simple encapsulation of js data verification set, js email verification, js url verification, js length verification, and js digital verification
• Javascript paging Based on jquery Encapsulation
• How to encapsulate jQuery classes and plug-ins into seajs modules
• Jquery automatically encapsulates form into json
• Use native js to encapsulate the sliding effect of webapp (Inertial sliding and sliding rebound)
• Encapsulation instance of touch events in Web development of javascript mobile devices