Detailed explanation of code examples of inheritance mechanism in Javascript

JavaScriptInheritanceIn many books, many types and implementation methods are carefully divided into many types and implementation methods. There are generally two types: Object Impersonation and prototype methods . These two methods have their own advantages and disadvantages. I will list them here first, and then analyze the differences from the bottom level

After learning the creation of Javascript classes and objects, now I will summarize the implementation of the Javascript inheritance mechanism. Javascript does not have a strict and clear definition of the inheritance mechanism like Java. Its implementation is very loose just like the use of its variables. You can design your own method to "imitate" the inheritance mechanism. accomplish. There are several methods:

1. Object impersonation

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
     //下面这两句代码相当于将classA代码体中的内容搬到这里
     this.newMethod1=classA;
     this.newMethod1(str);
     //注意，这里的写法
     delete this.newMethod1;
     //新的方法和属性的定义须在删除了newMethod之后定义，因为可能覆盖超类的属性和方法。
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

The code block defined by function is equivalent to a class, you can use it and it has this keyword, you can use this for it Add attributes and methods. There are the following two sentences in the above code:

this.newMethod1=classA;
 this.newMethod1(str);

The newMethod1 variable is defined in classB, which is a reference, pointing to classA, and also calling classA. These two The function of the sentence code is equivalent to directly copying the content in the classA code block here. The classB object created in this way will of course have the attributes 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 will override the properties and methods of the same name in classX. If there is no problem with the design, classz should not inherit different classes with the same properties and methods.

2. Use the call() method

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
   //利用call方法实现继承
     classA.call(this,str);
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

to pass an object as the first parameter in the call() method. This here refers to the current object, and the following Parameters (there may be multiple) refer to the parameters required to be passed to the class (function) that calls the call() method. classA.call() is also equivalent to directly copying the content in the classA code block. At this point, objects of classB can also directly use variables and methods in classB.

3. Prototype chain

 <script type="text/javascript">
   function cA(){};
   cA.prototype.name="John";
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(){};
   cB.prototype=new cA();
   cB.prototype.age=23;
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB();
   objB.sayAge();
   objB.sayName();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

The prototype keyword is used to define the class here. There are no parameters when defining the function. The variables or methods after prototype are equivalent to the ones in java. staticThe modified properties and methods belong to all objects. There is a special feature here: cB.prototype=new cA(); This sentence is equivalent to copying the content of the cA object to cB, and cB can also be appended own properties and methods.

4. Mixed method

 <script type="text/javascript">
   function cA(name){
     this.name=name;
   };
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(name,age){
     cA.call(this,name);
     this.age=age;
   };
   cB.prototype=new cA();
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB("Alan",27);
   objB.sayName();
   objB.sayAge();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

Here you can encapsulate the attributes in the class body, and use the prototype method to define the method. Personally, this is a good design method, using functions defined by prototype. It can be reused for multiple objects. Two points need to be noted here: there is cA.call(this,name) in the cB class body; at the same time, the cB prototype must be assigned to the cB object, that is: cB.prototype=new cA();cA. call(this,name) is also equivalent to copying the code in the cA class block here. The following sentence adds the methods of cA to cB. At the same time, cB can also add its own properties and methods.

The above is the detailed content of Detailed explanation of code examples of inheritance mechanism in Javascript. For more information, please follow other related articles on the PHP Chinese website!