JavaScript Design Pattern Learning 'Class Inheritance'_javascript skills

Before doing something, you must first understand the benefits of doing it. I believe no one is willing to do something for no reason. Generally speaking, when we design a class, we actually hope to reduce repetitive code. Using inheritance can do this perfectly. With the inheritance mechanism, you can design again based on the existing class and fully Modifications to the design are made easier by taking advantage of the methods they already have. Without further ado, here are some examples:

Copy code The 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 blogger = new Bloger("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*return true*/
alert(bloger.blog) /*Alert http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*Prompt "bloger.getname is not a function"*/

As you can see from the above example, Blogger dynamically calls the native properties and methods of its parent class Person through call internally (for an explanation of call, please refer to http://www.jb51.net/article/62086.htm ), which can be understood as Bloger inherits Person and becomes a subclass of it, but careful students will find that the methods in the Person prototype object cannot be inherited simply by relying on call, which means "bloger. getname is not a function" is the reason. But don’t worry, you can solve this problem with a little processing of the above code!

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

var blogger = new Bloger("zhenn","http://www.jb51.net");
alert(bloger.name=="zhenn"); /*return true*/
alert(bloger.blog) /*Alert http://www.jb51.net*/
alert(bloger.getname()=="zhenn"); /*Prompt true*/

Here we need to explain these two lines of code. We know that each constructor has a prototype attribute, which points to the prototype object of the constructor. In fact, the prototype object is also an instance object, but in the prototype object The defined properties and methods can be shared by all instance objects. It can be concluded that the purpose of adding two 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 All the prototype attribute methods of the parent class will be inherited, thus achieving our goal. The prototype of the subclass inherits all the properties and methods of the parent class instance object.

But you should also pay attention to the line of code Bloger.prototype.constructor = Bloger; because when you set the prototype of the subclass to an 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 again. Point to the subclass. At this point, JavaScript class inheritance has been perfectly implemented!

In order to simplify the declaration of subclasses, the entire process of extending a subclass can be written in a function called extend. The function is to create a new class based on a given class structure:

Copy code The 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 subclasses. Just call this function. The two lines of code added above can be changed to extend(Bloger,Person), and full inheritance can also be achieved!