Javascript inheritance mechanism (detailed answers, graphic tutorial)

JavaScript inheritance is carefully divided into many types and implementation methods in many books. There are generally two types: object impersonation and prototype method. 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 way its variables are used. You can design your own method to "imitate" the implementation of the inheritance mechanism. 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 has the this keyword. You can use this to add properties and methods to it. There are the following two sentences in the above code:

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

The newMethod1 variable is defined in classB. It is a reference, points to classA, and also calls classA. The function of these two lines of code is equivalent to directly copying the contents of the classA code block here. The classB created in this way Of course the 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 will overwrite the properties and methods of the same name in classX. If the design is OK, classz will also Different classes with the same properties and methods should not be inherited.

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>

The first parameter in the call() method passes an object, where this refers to is 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, followed by prototype. The variables or methods are equivalent to the properties and methods modified by static in Java, which 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, cB can also add its 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 the method is defined using the prototype method. Personally, this is A good design method is to use functions defined by prototype to reuse 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 method of cA to cB, and cB can also append itself. properties and methods.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed example of interaction between Servlet3.0 and JS through Ajax

##Native JS encapsulation fade effect function Detailed explanation of steps

p5.jsSummary of keyboard interaction functions

The above is the detailed content of Javascript inheritance mechanism (detailed answers, graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!