Encapsulation : The pattern of creating objects in JavaScript, which is considered by the individual to be a true encapsulation in the case of a closure, so let's start with a brief introduction to the closure and look at the following example:
Copy Code code 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>
Do you look familiar? Yes, this is actually a simple closure application. To explain briefly: the variable defined in the function MyInfo above is accessible in its inline function showinfo (this is well understood), but when we assign the return reference of this inline function to a variable oldfish, This time the function showinfo is called outside the MyInfo function, but it can also access variables defined in the body of the function. Oh yeah!
To sum up the principle of closures: functions are run in the scope that defines them rather than invoke them. In fact, returning an inline function is also the most common way to create closures!
If the explanation above is too abstract, then let's reshape the above function to see if it's a distinct hierarchy:
Copy Code code 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"). Showinfo ();
</script>
In the example of the coding style is the most common in ext Yui, public and private trenchant, at a glance. With closures, we can easily hide things that we don't want to be accessed directly from the outside, you want to access the variables defined within the function can only be accessed through a specific method, directly from the external access is not accessible, write very tired, spared a lap finally turned back, encapsulation well, is not to want to be seen by others hidden things! Ha ha......
The example above, if converted to JQ style, should be written in the following example, which is a large open mode in the portal, where the variables defined are externally accessible (the following example if you instantiate an object first, then access the object's name outside the function) or The age attribute is readable) of course, in this mode we can set some "unspoken rules", let the team development members understand which variables are private, usually we artificially in the private variables and methods before the underscore "_" to identify the warning signal! So as to achieve "encapsulation"!
Copy Code code 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 are" + this.name + "I am" +this.age+ "years old";
alert (info);
}
};
IoldFish.func.init.prototype = Ioldfish.func;
Ioldfish ("Old Fish"). Showinfo ();
var oldfish = new Ioldfish ("Old Fish", 27);
alert (oldfish.name);
</script>
Some people may ask, which model is good? What does this say? Both methods have advantages and disadvantages, combined with the use of Bai! In short, a principle, must not be directly accessed by external objects, the closure of the package. "Must certainly" four words very abstruse, unceasingly practice can realize the true meaning!
Inheritance : When we mention this, I would like to add another sentence: The closure package is a disadvantage, not conducive to the derivation of subclasses, so closures are risky, encapsulation needs to be cautious! Visually, in the following example, the way to create an object is to use a "portal big open" pattern.
In JavaScript, inheritance is generally divided into three ways: "Class inheritance", "Prototype Inheritance", "mixed-element class". The following is a brief introduction to the principles of three types of inheritance.
A. Class inheritance: this is a common way of inheriting in the current mainstream framework, see the following example:
Copy Code code 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 GetName method is not defined in the subgroup fish, but the instance object ioldfish of the subclass fish still calls the method because the subclass fish inherits the GetName method defined in superclass name. To explain this, the prototype of the subclass fish refers to an instance of the superclass, which, while not affirming the GetName method, is based on the prototype chain principle to find out if there is a method in the upper-level object that the prototype points to, if the method is not found, will continue to search for the original prototype object. This is actually the principle of inheritance. In particular, Fish.prototype.constructor = Fish, because the prototype of the default subclass should point to itself, but before the prototype is pointed to an instance object of the superclass, it is set back here. Of course, the code can be organized by a function to play the role of camouflage extend.
B. prototype inheritance, which is superior to class inheritance in terms of memory performance.
Copy Code code 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 kernel of prototype inheritance is the Clone function, which is also the principle of the prototype chain, and the difference is that it directly clones the superclass, In this case, the subclass inherits all the properties and methods of the superclass. Specifically, this kind of inheritance does not need to create constructors, just create an object word variable, define the corresponding properties and methods, and then only need to pass the dot in the subclass. Symbols to refer to properties and methods.
Current 1/2 page
12 Next read the full text
