JavaScript object-oriented introduction (simplified) page 1/2

Encapsulation: In the object Creation Mode in javascript, I personally think that the closure is actually true.EncapsulationFirst, let's briefly introduce the closure. Let's look at the example below:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function myInfo (){
Var name = "old fish", age = 27;
Var myInfo = "my name is" + name + "I am" + age + "years old ";
Function showInfo (){
Alert (myInfo );
}
Return showInfo;
}
Var oldFish = myInfo ();
OldFish ();
</Script>

Are you familiar with it? That's right. This is actually a simple closure application. A simple explanation: the variables defined in the above function myInfo are accessible in its embedded function showInfo (this is easy to understand ), however, when we assign a value to the oldFish variable for the returned reference of this nested function, showInfo is called in the external body of myInfo function, but can also access the variables defined in the function body. Oh yeah!

To sum up the principle of the closure, the function runs in defining their scopes rather than calling their scopes. Actually, returning an embedded function is also the most common method to create a closure!

If we think the above explanation is too abstract, let's reinvent the above functions together to see if there are clear layers:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var ioldFish = function (name, age ){
Var name = name, age = age;
Var myInfo = "my name is" + name + "I am" + age + "years old ";
Return {
ShowInfo: function (){
Alert (myInfo );
}
}
}
IoldFish ("old fish", 27). showInfo ();
</Script>

In the preceding example, the encoding style is common in ext yui, Which is distinct between public and private. Through the closure, we can easily hide things that do not want to be directly accessed by external entities. You need to access the variables defined in the function, it can only be accessed through a specific method. direct access from the outside is not accessible, and the writing is quite tiring. After a lap, it finally turns back and encapsulates it, it's not just hiding what you don't want to be seen by others! Haha ......

In the previous example, if it is converted to the JQ style, it should be written in the following example. This encapsulation mode belongs to the portal wide-open mode, the variables defined in them can be accessed externally (in the following example, if you instantiate an object first, and then the name or age attribute of the object accessed externally by the function can be read) of course, in this mode, we can set some "Hidden Rules" so that team developers can understand which variables are private. Generally, we manually underline "_" before private variables and methods "_", identify alert signals! To implement "encapsulation "!
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var ioldFish = function (name, age ){
Return ioldFish. func. init (name, age );
};
IoldFish. func = ioldFish. prototype = {
Init: function (name, age ){
This. name = name;
This. age = age;
Return this;
},
ShowInfo: function (){
Var info = "my name is" + this. name + "I am" + this. age + "years old ";
Alert (info );
}
};
IoldFish. func. init. prototype = ioldFish. func;
IoldFish ("old fish", 27). showInfo ();
// Var oldFish = new ioldFish ("old fish", 27 );
// Alert (oldFish. name );
</Script>

Some may ask, which mode is better? What should I do? Both methods have advantages and disadvantages! In short, there must be something that cannot be directly accessed by external objects. Use closures to encapsulate it ." The four words must be profound and can be understood in practice!

Inheritance: When this is mentioned, we should add another one: a disadvantage in the closure encapsulation is not conducive to subclass derivation, so the closure is risky and the encapsulation should be cautious! For the sake of intuition, the method for creating objects in the following example adopts the "wide-open portal" mode.

In javascriptInheritanceThere are three methods: "class inheritance", "prototype inheritance", and "meta-class ". The following describes the principles of the three types of inheritance methods.

A. class inheritance:This is a common inheritance method in the mainstream frameworks. See the following example:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var Name = function (name ){
This. name = name;
};
Name. prototype. getName = function (){
Alert (this. name );
};
Var Fish = function (name, age ){
Name. call (this, name );
This. age = age;
};
Fish. prototype = new Name ();
Fish. prototype. constructor = Fish;
Fish. prototype. showInfo = function (){
Alert (this. age );
}
Var ioldFish = new Fish ("old Fish", 27 );
IoldFish. getName ();
</Script>

The above subclass Fish does not define the getName method, but the ioldFish Instance Object of the subclass Fish still calls this method, because the subclass Fish inherits the getName method defined in the superclass Name. Here, the prototype of the sub-class Fish refers to an instance of the super class. Although the getName method is not affirmed in the sub-class Fish, according to the prototype chain principle, the method will be directed to the higher-level object indicated by prototype to check whether this method exists. If this method is not found, the original prototype object will be searched all the time. This is actually the principle of inheritance. Fish. prototype. constructor = Fish; because the prototype of the default subclass should point to itself, but the prototype previously points to the superclass instance object, it should be set back here. Of course, the relevant code can be organized here through a function to disguise extend.

B. Prototype inheritance, which is superior to class inheritance in terms of memory performance.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function clone (object ){
Var F = function (){};
F. prototype = object;
Return new F ();
};
Var Name = {
Name: "who's name ",
ShowInfo: function (){
Alert (this. name );
}
};
Var Fish = clone (Name );
// Fish. name = "old Fish ";
Fish. showInfo ();
Lt;/script>

Obviously, the core of prototype inheritance is the clone function, which is also the principle of prototype chain. The difference is that it directly clones the superclass, so that the subclass inherits all attributes and methods of the superclass. in particular, this type of inheritance does not need to create constructor. Instead, you only need to create an object Word variable, define the corresponding attributes and methods, and then use dots in the subclass ". to reference attributes and methods.