Having learned how to create Javascript classes and objects, let's summarize the implementation of Javascript inheritance mechanism. Javascript does not have a strict and clear definition of inheritance mechanism like Java. Its implementation is as loose as its variable usage. You can design your own method to "imitate" the implementation of inheritance mechanism. There are several ways:
1. Object impersonation
1 <script type="text/javascript"> 2 function classA(str){ 3 this.str=str; 4 this.printstr=function(){ 5 document.write(this.str); 6 document.write("<br>"); 7 } 8 this.getstr=function(){ 9 return this.str; 10 } 11 } 12 function classB(name,str){ 13 //The following two sentences correspond to the following classA Move the content in the body of the code here 14 this.newMethod1=classA; 15 this.newMethod1(str); 16 //Notice how it's written here. 17 delete this.newMethod1; 18 //Definitions of new methods and attributes need to be deleted newMethod It is defined later because it may override the attributes and methods of the superclass. 19 this.name=name; 20 this.sayName=function(){ 21 document.write(this.name); 22 document.write("<br>"); 23 } 24 25 } 26 var a=new classB("Amy","helloworld"); 27 a.printstr(); 28 alert(a.getstr()); 29 a.sayName(); 30 </script>
The code block defined by function is equivalent to a class. You can use and it has this keyword. You can use this to add attributes and methods to it. There are two sentences in the above code:
this.newMethod1=classA;
this.newMethod1(str);
ClassB defines the new Method 1 variable, which is a reference, points to classA, and calls classA. These two codes are equivalent to copying the contents of the classA code block directly to it, so the created classB object has the properties and methods of classA. Object impersonation can also achieve multiple inheritance, as follows:
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
However, classY overrides attributes and methods of the same name in classX, and classz should not inherit different classes with the same attributes and methods if the design is not a problem.
2. Using call() method
1 <script type="text/javascript"> 2 function classA(str){ 3 this.str=str; 4 this.printstr=function(){ 5 document.write(this.str); 6 document.write("<br>"); 7 } 8 this.getstr=function(){ 9 return this.str; 10 } 11 } 12 function classB(name,str){ 13 //utilize call Method to achieve inheritance 14 classA.call(this,str); 15 this.name=name; 16 this.sayName=function(){ 17 document.write(this.name); 18 document.write("<br>"); 19 } 20 21 } 22 var a=new classB("Amy","helloworld"); 23 a.printstr(); 24 alert(a.getstr()); 25 a.sayName(); 26 </script>
The first parameter in the call() method passes an object, where this refers to the current object, while the latter (there may be multiple) refers to the parameters required to pass to the class (function) calling the call() method. classA.call() is also equivalent to copying directly the contents of the class A code block here. The object of class B can also directly use the variables and square in class B. Law.
3. Prototype Chain
1 <script type="text/javascript"> 2 function cA(){}; 3 cA.prototype.name="John"; 4 cA.prototype.sayName=function(){ 5 document.write(this.name); 6 document.write("<br>"); 7 } 8 function cB(){}; 9 cB.prototype=new cA(); 10 cB.prototype.age=23; 11 cB.prototype.sayAge=function(){ 12 document.write(this.age); 13 document.write("<br>"); 14 } 15 var objB=new cB(); 16 objB.sayAge(); 17 objB.sayName(); 18 document.write("is objB the instance of cA "+(objB instanceof cA)); 19 document.write("<br>"); 20 document.write("is objB the instance of cB "+(objB instanceof cB)); 21 document.write("<br>"); 22 </script>
In this paper, we use prototype keyword to define the function without parameters. Variables or methods behind prototype are equivalent to attributes and methods modified by static in java. They belong to all objects. There is a special point: cB.prototype=new cA(); this sentence is equivalent to copying the content of cA objects to cB, and cB can add its own attributes and methods.
4. Mixed Method
1 <script type="text/javascript"> 2 function cA(name){ 3 this.name=name; 4 }; 5 cA.prototype.sayName=function(){ 6 document.write(this.name); 7 document.write("<br>"); 8 } 9 function cB(name,age){ 10 cA.call(this,name); 11 this.age=age; 12 }; 13 cB.prototype=new cA(); 14 cB.prototype.sayAge=function(){ 15 document.write(this.age); 16 document.write("<br>"); 17 } 18 var objB=new cB("Alan",27); 19 objB.sayName(); 20 objB.sayAge(); 21 document.write("is objB the instance of cA "+(objB instanceof cA)); 22 document.write("<br>"); 23 document.write("is objB the instance of cB "+(objB instanceof cB)); 24 document.write("<br>"); 25 </script>
Attributes can be encapsulated in the class body, and methods can be defined by prototype, which is a good design method. Functions defined by prototype can be reused for multiple objects. Two points need to be noted here: there is cA.call(this,name) in the class cB; at the same time, we should assign cB prototype to cB objects, that is, cB.prototype=new cA();cA.call(this,name) is the same. In the following sentence, the method of cA is added to cB. At the same time, cB can also add its own attributes and methods.
This is a summary of the inheritance mechanism of Javascript. The shortcomings are expected to be corrected and criticized.