Detailed explanation of JavaScript inheritance

Before formally discussing js inheritance, let me first talk about my work experience. Unlike the backend, for most commercial application scenarios, the requirements for the frontend often make it difficult to trace the code (meaning it is difficult to abstract and write the code once to apply to several scenarios). Let’s talk about an application scenario I’m familiar with: For example, in a credit rating module, one page uses a line chart to display the user’s recent consumption level, and another page uses a line chart to display the user’s credit rating level. Seems like very similar needs, right? If you get it in Java, you will definitely abstract a "line chart interface", but it is difficult to unify it in js. First of all, the two data sources are different, so the ajax request codes are very different. Secondly, if the UI randomly adds graphic effects such as shadows and gradients to a picture, the implementation of the two pictures will be completely different. Not only that, if you forcibly integrate two different front-end implementations in order to show your design level, you will face a maintenance nightmare that ordinary people will not face. Therefore, for most front-end engineers, there is no need to understand JavaScript inheritance, and this function of this language does not have a very popular application scenario. Of course, if you are writing some underlying framework, then you will definitely know these features very well. . The following content is of medium-to-high level difficulty. I have slightly rewritten the inheritance in "Advanced Programming with JavaScript", and then put an optimized version of the inheritance model in jQuery. I will add text explanations when I have time and energy in the future. If you are not interested, you can just go through it. ~

##（1）combination inheritance(combination inheritance):

Add the properties of the parent class through Super.call(this) in the subclass constructor, and let the prototype## of the subclass constructor #Become an instance of the parent class to implement inheritance. The disadvantage is that redundant parent class properties will be stored in the subclass constructor (because it is an instance of the parent class, and the subclass instance will overwrite the same properties), and the parent class constructor will be called twice. , and it will also lead to one more layer in the inheritance chain.

(function combineInherit(){
   function SuperType(){
      this.super="super";
   }
   SuperType.prototype.saySuper=function(){

   }

   function SubType(){
      SuperType.call(this,arguments);
      this.sub="sub";
   }
   SubType.prototype=new SuperType();
   SubType.prototype.constructor=SubType;
   SubType.prototype.saySub=function(){

   }

   var sub1=new SubType();
   sub1.saySub();
})();

Inheritance chain:

2）parasitic combination inheritance(parasitic combination inheritance):

prototype of the subclass constructor does not become an instance of the parent class, but directly references the prototype of the parent class constructor to form the subclass constructor. prototype, the most concise way is that the other two are directly equivalent, which not only reduces the call of the parent class constructor, but also reduces the existence of subclassesprototype# The redundant attributes in ## also reduce one layer of inheritance chain (and in this case, use instanceof to determine that they still belong to the same subclass and parent class).

(function parasiticCombineInherit(){
   function inheritPrototype(subType,superType){
      subType.prototype=superType.prototype;
      subType.prototype.constructor=subType;
   }

   function SuperType(){
      this.super="super";
   }
   SuperType.prototype.saySuper=function(){

   }

   function SubType(){
      SuperType.call(this,arguments);
      this.sub="sub";
   }
   inheritPrototype(SubType,SuperType);
   SubType.prototype.saySub=function(){

   }

   var sub=new SubType();
   console.log(sub instanceof SuperType);
})();

Inheritance chain:

（

）jQUeryClassic inheritance

(function classicInherit(){
   var initializing=false,
      superPattern=/xyz/.test(function() {xyz;}) ? /\b_super\b/ : /.*/;
   Object.subClass=function(properties){
      var _super=this.prototype;
      initializing=true;
      var proto=new this();
      initializing=false;

      for(var name in properties){
         proto[name]=typeof properties[name]=="function"&&
                  typeof _super[name]=="function"&&
                  superPattern.test(properties[name])?
               (function(name,fn){
                  return function(){
                     var tmp=this._super;
                     this._super=_super[name];
                     var ret=fn.apply(this,arguments);
                     this._super=tmp;
                     return ret;
                  };
               })(name,properties[name]):properties[name];
      }

      function Class(){
         //init方法需要通过外部自定义传入
         if(!initializing&&this.init){
            this.init.apply(this,arguments);
         }
      }
      Class.prototype=proto;
      Class.constructor=Class;
      Class.subClass=arguments.callee;

      return Class;
   }
})();

The above is a detailed explanation of JavaScript inheritance. For more related content, please Follow the PHP Chinese website (www.php.cn)!