JavaScript Design Patterns: First, object-oriented programming

JavaScript Object-Oriented programming

As we all know, JS as a scripting language, because its designers in the design of JS, but also only a little time to complete the creation of JS this language, JS although the advantages of scripting language, but JS also has a natural flaw. One of them is: "There is no complete object-oriented and custom type support," because JS itself is not very well modular. But in fact, many JS learners or users in common is: they contact the first programming language is mostly C + + or Java, the old OOP language, writing code is to uphold the object-oriented thinking, which in learning JS or using JS will inevitably feel some discomfort.

Then JS can achieve object-oriented programming, or to a certain extent, to achieve object-oriented programming? The answer is yes.

I. Using object incorporation function and variable

Let's take a look at three functions first:

1 functionfn1 () {2   // ...3 }4 5 functionfn2 () {6   // ...7 }8 9 functionFn3 () {Ten   // ... One}

One of the problems with this code is that it defines three global functions, which are not actually allowed in a project, and the creation of global functions or variables means that in later code, these functions or variables have the potential to conflict with others ' code. So how to solve this kind of problem?

We know that objects can have their own properties and methods, and that we use them through point syntax when we need to use these properties and methods.  Can you use objects to incorporate these functions or variables? Look at the following code:

1 varobj = {2FN1:function () {3     // ...4   }5FN2:function () {6     // ...7   }8FN3:function () {9     // ...Ten   } One}

By creating such an object, we can invoke the corresponding method by Obj.fn1, and these methods are present on the Obj object.

Let's take a look at the following notation (which is actually a meaning to the above):

1 varOBJ =function () {}2OBJ.FN1 =function () {3   // ...4 }5OBJ.FN2 =function () {6   // ...7 }8Obj.fn3 =function () {9   // ...Ten}

There is another problem with the method above, and when someone else needs to use our object method, there is some trouble because the object cannot be copied or we pass the New keyword

var test = new OBJ (), the newly created object test, does not have fn1,fn2,fn3 these methods.

To solve this problem, we can write:

1 varOBJ =function () {2   return {3FN1:function () {4       // ...5     }6FN2:function () {7       // ...8     }9FN3:function () {Ten       // ... One     } A   } -}

What is the effect of this writing? As you can see, each time the function is called, a new object is returned, and the new object has the three methods of Fn1,fn2,fn3. In this way, everyone does not affect each other when they use it.

1 var test = Obj ()2 test.fn1 ()

Although we have solved the problem of others by returning a new object to some extent, this is not really the way the class was created (I believe in Java or C + + users), and the object we created above has no relation to obj, so let's change it again:

1 varOBJ =function () {2    This. fn1 =function () {3     // ...4   }5    This. fn1 =function () {6     // ...7   }8    This. fn1 =function () {9     // ...Ten   } One}

In this function, we use the This keyword, an object like above, obj, we can think of it as a class, with three member functions: FN1,FN2,FN3, since it's a class, it's time to use the New keyword to create the object:

1 var New OBJ () 2 test.fn1 ()

Another problem arises, and each new object created using the keyword has its own set of methods, but in fact, this is not necessary, which can cause unnecessary memory consumption.

How to solve this problem? Do not know whether the reader still remember every function in JS, there is a prototype object, we call it "prototype", the prototype properties and methods are shared by new objects, can we transfer the public functions to prototype?

1 varOBJ =function () {}2OBJ.PROTOTYPE.FN1 =function () {3   // ...4 }5OBJ.PROTOTYPE.FN2 =function () {6   // ...7 }8Obj.prototype.fn3 =function () {9   // ...Ten}

The object instances that we create later through the New keyword are all common methods, because they all rely on the prototype prototype to find the same method.

There is another way to do this:

1 varOBJ =function () {}2Obj.prototype = {3FN1:function () {4     // ...5   }6FN2:function () {7     // ...8   }9FN3:function () {Ten     // ... One   } A}

It is important to note that these two methods are not mixed, because if you later assign a value to the object's prototype object to a new object, it overwrites the previous assignment of the prototype object.

JavaScript Design Patterns: First, object-oriented programming