Summary of inheritance usage in javascript and summary in javascript

Summary of inheritance usage in javascript and summary in javascript

This example summarizes the usage of javascript on inheritance. Share it with you for your reference. The details are as follows:

Example:
Copy codeThe Code is as follows :/**
* Subclass inherits the parent class, but no additional attributes and methods are generated.
* @ Returns {Function}
*/
Define (function (){
Return function (subType, superType ){
Var proto = new Object (superType. prototype );
Proto. constructor = subType;
SubType. prototype = proto;
};
});
//--------------------------
Define (function (){
Function ostring (s)
{
This. str = s;
This. length = this. str. length;
}
Ostring. prototype. show = function (){
Alert (this. str );
};
Return ostring;
});
//--------------------------
Define (['input', 'string'], function (inherit, ostring ){
Function wstring (s ){
// Call the parent class constructor using call
Ostring. call (this, s );
This. chlength = 2 * s. length;
}
// Inherit other attributes
Inherit (wstring, ostring );
Wstring. prototype. add = function (w)
{
Alert (this. str + w );
};
Return wstring;
});

Let's look at the example.
1. Implement with function:
Copy codeThe Code is as follows: function Person (name ){
This. name = name;
}
Person. prototype. getName = function (){
Return this. name;
}
Function Author (name, books ){
This. inherit = person;
This. inherit (name );
This. books = books;

}
Var au = new Author ("dororo", "Learn much ");
Au. name
Or equivalent effect:
Copy codeThe Code is as follows: function Person (name ){
This. name = name;
}
Person. prototype. getName = function (){
Return this. name;
}
Function Author (name, books ){
Person. call (this, name );
This. books = books;

}
Var au = new Author ("dororo", "Learn much ");
Au. getName
Because this is only used as a parameter, the constructor of the parent class Person is called to assign all fields of the parent class to the Author subclass, therefore, any domain defined outside the Person constructor of the parent class (prototype) will not inherit from the subclass. In the preceding example, au. getName is not defined (undefined) Because getName is defined in the Person's prototype object.

In addition, the subclass constructor must call the parent class constructor before defining its own domain, so that the definition of the subclass is overwritten by the parent class. That is to say, the Author defined attribute book must be after Person. call, otherwise it will be overwritten by the Property book in Person. At the same time, it is better not to use prototype to define the function field of the subclass in the subclass. Because a subclass is new, prototype is executed after instantiation, and then the constructor of the parent class is called, in this way, attributes of the parent class are easily overwritten.

Ii. Implement with prototype:
Copy codeThe Code is as follows: function Person (name ){
This. name = name;
}
Person. prototype. getName = function (){
Return this. name;
}
Function Author (name, books ){
This. books = books;
}
Author. prototype = new Person (name );
Author. prototype. constructor = Author;
Author. prototype. getBooks = function (){
Return this. books;
}
Var au1 = new Author ("dororo1", "Learn much ");
Var au2 = new Author ("dororo2", "Learn less ");
Alert (au1.getName ());
Alert (au2.getName ());
This method avoids the problem that the prototype cannot be inherited during function implementation. Because the Author. prototype = new Person (name); new Person () instance calls all attributes of the Person construction and prototype. However, the disadvantage is that Author. prototype has been instantiated. So when the subclass is instantiated, all non-basic data types are reference copy. In the preceding example, no matter whether the instance au1 or au2 returns dororo1.

3. Implement with "hybrid"
Copy codeThe Code is as follows: function Person (name ){
This. name = name;
}
Person. prototype. getName = function (){
Return this. name;
}
Function Author (name, books ){
This. base = new Person (name );
For (var key in this. base ){
If (! This [key]) {
This [key] = this. base [key];
}
}
This. book = books;
}
Var au1 = new Author ("doro1", "work ");
Var au2 = new Author ("dororo2", "play ");
Alert (au1.getName ());
Alert (au2.getName ());
Au1.book;
Au2.book;
 
It is an extension that copies all the fields of the parent class to the subclass. There is no such issue.
Parasitic Combination Mode)

JS inheritance includes property inheritance and method inheritance, which are implemented through different methods.
1. Inheritance of attributes

Property inheritance is implemented by changing the execution environment of the function. The call () and apply () methods can be used to change the execution environment of the function.

First, create an Animal "class" (because JS does not have the class concept, it is just a simulation, it is actually a Function object ).
Copy codeThe Code is as follows: function Animal (typeName ){
// Add an attribute typeName for the execution environment (this) of the current method
// However, the execution environment (this) can be determined only when the function is executed.
This. typeName = typeName;
This. colors = ["red", "while"];
}
// Add two (Object sharing) Methods to the prototype of the Function
Animal. prototype. Shout = function () {alert ("I am: --" + this. typeName );};
Animal. prototype. Eat = function () {alert ("I am: --" + this. typeName )};
// -- Define a lion -- "class" (actually a function)
Function Lion (tn ){
// -- Execute the Animal method and modify the execution environment of Animal to this of Lion using the first parameter of apply.
// Similarly, the Lion's this must be determined during execution.
Animal. apply (this, [""]); // -- inherits the variable attribute of the parent class. this is because it is new Lion and this is Lion.
}
Lion. prototype = Animal. prototype; // The method used to inherit the parent class. This method is not well written. This method is also available to the parent class when the child class is added. This is a pointer reference.
Lion. prototype. Hunt = function (){
Alert ("I'm a lion, I'm going to hunt ~~ ·~ ");
}
Var aminm = new Animal ();
Aminm. Hunt (); // --- you can access the subclass method.
// ---- How can we solve this problem? ???
// --- Solution: When inheriting a method, you can write as follows:
Lion. prototype = new Animal (); // inherits the method of the parent class and assigns the Animal object to the prototype. In fact, it also has attributes.
Var lion = new Lion (); // in addition to the new keyword, the runtime environment of the Lion object is modified to the Lion object itself.
// --- In other words, after the new function is complete, this in the Lion function is the Lion function itself, and then calls the Lion function.

Analyze the new Keyword:

The new keyword is great. In the previous code, the new Keyword completes the following tasks:
1) Open up heap space to prepare to store Lion objects
2) modify the execution environment of the Lion object so that this of the Lion function points to the Lion function object.
3) call the "Constructor" of the Lion "class" to create a Lion object.
4) Assign the heap address of the Lion function object to variable l. At this time, l points to the Lion function object.
Lion. Shout ();
Lion. Eat ();
However, this inheritance has a disadvantage: the constructor of the parent class is called twice, called once, and then new again.

I hope this article will help you design javascript programs.