Before doing something, you must first be clear about the benefits of doing it. I believe that no one is willing to do things for no reason. Generally speaking, when we design classes, we actually hope to reduce duplication of code. Using inheritance can do this perfectly. With the help of the inheritance mechanism, you can design again based on existing classes and make full use of the various methods they already have, and modify the design more easily. I won't say much nonsense, give an example:
The code copy 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("zhen","//www.VeVB.COM");
alert(bloger.name=="zhenn"); /*Return to ture*/
alert(bloger.blog) /*tip//www.VeVB.COM*/
alert(bloger.getname()=="zhenn"); /*Tip "bloger.getname is not a function"*/
From the above example, we can see that the Bloger dynamically calls the native properties and methods of its parent class Person through a call inside it (for the explanation of call, please refer to //www.VeVB.COM/article/62086.htm), which can be understood as Bloger inherits Person and becomes a subclass of it. However, careful students will find that the methods in the Person prototype object cannot be inherited by relying solely on call, which is why it prompts "bloger.getname is not a function". But don’t worry, just deal with the above code to solve this problem!
The code copy 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 note the following two lines of code*/
Bloger.prototype = new Person();
Bloger.prototype.constructor = Bloger;
var bloger = new Bloger("zhen","//www.VeVB.COM");
alert(bloger.name=="zhenn"); /*Return to ture*/
alert(bloger.blog) /*tip//www.VeVB.COM*/
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 the attributes and methods defined in the prototype object can be provided to all instance objects to share. From this, we can see that the intention 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 will inherit all the prototype attribute methods of the parent class, which achieves our goal. The prototype of the subclass inherits the properties and methods of all the parent class instance objects.
However, you should also note that Bloger.prototype.constructor = Bloger; This line of code, because when the subclass prototype is set to the instance of the parent class, its constructor attribute will point to the parent class, so the constructor of the subclass prototype needs to be set to point to the subclass again. At this point, the class inheritance of javascript has been perfectly implemented!
In order to simplify the declaration of subclasses, the entire process of extending subclasses can be written in a function called extend, which is to create a new class based on a given class structure:
The code copy 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. Just call this function. The two lines of code added above can be changed to extend(Bloger, Person), which can also achieve complete inheritance!