The _javascript technique of "class inheritance" in JavaScript design pattern learning

Before you do something, be clear about the benefits of doing it, and believe that no one is willing to do things for no reason at all. Generally speaking, when we are designing a class, in fact, you want to reduce the repetition of the code, the use of inheritance can be perfect to do this, with the inheritance mechanism, you can on the basis of existing classes again to design and make full use of the various methods they already have, and the design is easier to modify. No more nonsense to say, examples:

Copy Code code 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.jb51.net");
Alert (bloger.name== "Zhenn"); /* Return to ture*/
Alert (bloger.blog)/* Prompt http://www.jb51.net*/
Alert (bloger.getname () = = "Zhenn"); /* Prompt "bloger.getname is not a function" * *

As you can see in the example above, Bloger dynamically invokes the native properties and methods of its parent person by call (refer to http://www.jb51.net/article/62086.htm for a brief explanation of calls). That is, it can be understood that Bloger inherits the person and becomes a subclass of it, but careful students will find that the method in the person's prototype object, relying only on call, cannot be inherited, which is to prompt "Bloger.getname is not a Function "is the reason. But do not worry, the above code to deal with, you can solve this problem!

Copy Code code 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;
}
/* Please note the following two lines of code * *
Bloger.prototype = new Person ();
Bloger.prototype.constructor = Bloger;

var bloger = new Bloger ("Zhenn", "http://www.jb51.net");
Alert (bloger.name== "Zhenn"); /* Return to ture*/
Alert (bloger.blog)/* Prompt http://www.jb51.net*/
Alert (bloger.getname () = = "Zhenn"); /* Prompt true*/

In this case, we know that each constructor has a prototype attribute that points to the prototype object of the constructor, but the prototype object is also an instance object, except that the properties and methods defined in the prototype object can be shared with all instance objects. As a result, the intention of adding two lines of code is to set the stereotype object of the subclass to an instantiated object of the parent class. The instantiation object of the parent class inherits all of the prototype attribute methods of the parent class, and thus achieves our purpose, and the subclass's prototype inherits the properties 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 handle class is set to an instance of the parent class, its constructor property points to the parent class, So to set the subclass of the prototype constructor to point to the subclass, so far, has been a perfect implementation of JavaScript-class inheritance!

To simplify the declaration of subclasses, you can write the entire process of an extended subclass in a function called extend, which is to create a new class based on a given class structure:

Copy Code code 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 expand the subclass, just call this function, the two lines of code added above can be changed to extend (Bloger,person), the same can be achieved full inheritance!