Learning JavaScript design patterns: class inheritance and javascript Design Patterns

Learning JavaScript design patterns: class inheritance and javascript Design Patterns

Before doing one thing, you must first understand the benefits of doing this thing, and believe that no one is willing to do things for no reason. In general, when designing a class, we actually want to reduce repetitive code and use inheritance to do this perfectly. With the Inheritance Mechanism, you can design the existing classes and make full use of the methods they already have, making it easier to modify the design. The following is an example:
Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
}
Person. prototype. getname = function (){
Return this. name;
}
 
Function Bloger (name, blog ){
Person. call (this, name );
This. blog = blog;
}
Var bloger = new Bloger ("zhenn", "http://www.bkjia.com ");
Alert (bloger. name = "zhenn");/* returns true */
Alert (bloger. blog)/* prompt http://www.bkjia.com */
Alert (bloger. getname () = "zhenn");/* indicates "bloger. getname is not a function "*/

From the above example, we can see that Bloger dynamically calls the native attributes and methods of its parent class Person through call internally (for details about call, refer to the http://www.bkjia.com/article/62086.htm ), it can be understood that Bloger inherits Person and becomes a sub-class of Person. However, it is discovered that the methods in the Person prototype object cannot be inherited only by calling, this will prompt "bloger. getname is not a function. But don't worry, just deal with the above Code to solve this problem!

Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
}
Person. prototype. getname = function (){
Return this. name;
}
 
Function Bloger (name, blog ){
Person. call (this, name );
This. blog = blog;
}
/* Pay attention to the following two lines of code */
Bloger. prototype = new Person ();
Bloger. prototype. constructor = Bloger;
 
Var bloger = new Bloger ("zhenn", "http://www.bkjia.com ");
Alert (bloger. name = "zhenn");/* returns true */
Alert (bloger. blog)/* prompt http://www.bkjia.com */
Alert (bloger. getname () = "zhenn");/* returns true */

Here we need to explain the two lines of code. We know that each constructor has a prototype attribute that points to the prototype object of the constructor. In fact, the prototype object is also an instance object, however, the attributes and methods defined in the prototype object can be shared with all instance objects, the intention of adding two new lines of code is to set the prototype object of the subclass to point to an instantiated object of the parent class, And the instantiated object of the parent class will inherit all the prototype attribute methods of the parent class, this achieves our goal. The prototype of the subclass inherits the attributes and methods of all the parent class instance objects.

But you should also pay attention to Bloger. prototype. constructor = Bloger; this line of code, because when the prototype of the subclass is set as the instance of the parent class, its constructor attribute will point to the parent class, so you need to set the constructor of the subclass prototype to point to the subclass again, javascript class inheritance has been perfectly implemented!

To simplify the declaration of subclass, you can write the whole process of the extension subclass in a function named extend to create a new class based on a given class structure:
Copy codeThe Code is as follows:
Function extend (childClass, parentClass ){
Var F = new Function ();
F. prototype = parentClass. prototype;
ChildClass. prototype = new F ();
ChildClass. prototype. constructor = childClass;
}

With this extend function, you can easily extend the subclass. You only need to call this function. The two lines of code added above can be changed to extend (Bloger, Person ), the same can achieve full inheritance!