写给自己看的JavaScript继承

JavaScript继承

1. 原型继承

   主要通过父构造函数的实例,作为子构造函数的原型,进行复用式（不重新创建）继承父构造函数的方法

   1. 创建父构造函数SuperType
   2. 创建子构造函数SubType
   3. 使用父构造函数new 一个实例superType
   4. 将子构造函数的prototype指向superType
   5. 将superType的constructor指向SubType
   6. 给SuperType的原型添加方法A
   7. SubType创建的实例，便可以复用式继承方法A

   

   function Botany() {
       this.name = "植物构造器函数";
   }
   
   Botany.prototype.photosynthesis = function() {
       console.log("我能光合作用");
   }
   
   function Tree() {
       this.name = "树构造器函数";
   }
   
   Tree.prototype = new Botany();
   //指回构造函数
   Tree.prototype.constructor = Tree;
   let pine = new Tree();
   console.log(pine);
   pine.photosynthesis();
   

2. 借用构造函数继承

   概述：在子构造函数中，调用父构造函数，达到继承父构造函数的属性(私有)

   核心方法： 父构造函数.call(this,参数1....)

   function Botany(name) {
       this.name = name;
   }
   function Tree(name,leafColor) {
       //通过调用父构造函数,创建新的私有属性 继承父类属性
       Botany.call(this,name);
       this.leafColor = leafColor;
   }
   
   let pine = new Tree("松树","green");
   let camphorTree = new Tree("樟树","淡绿色");
   pine.name = "songShu";
   console.log(camphorTree.name);//樟树
   

3. 原型式继承

   概念： 创建一个把obj作为原型的实例对象

   

   代码实现

   function object(obj) {
       function F() {};
       F.prototype = obj;
       return new F();
   }
   

4. 寄生式继承

   概念: 创建大量私有方法

   function enhanceObj() {
       //1.创建新的对象
       //2.对该对象进行增强
       //3.返回该对象
   }
   

5. 组合继承

   概念：组合的是原型链继承和借用构造函数继承，通过借用函数继承父构造函数的私有属性，通过原型链继承父构造函数的公共方法

    //借用构造函数和原型继承
   function Botany(name) {
       this.name = name;
   }
   //公共函数/公共变量
   Botany.prototype.photosynthesis = function() {
       console.log("我能光合作用");
   }
   function Tree(name, leafColor) {
       //通过借用构造函数添加私有变量
       Botany.call(this, name);
       this.leafColor = leafColor;
   }
   
   Tree.prototype = new Botany();
   Tree.prototype.construtor = Tree;
   
   let pine = new Tree("松树", "green");
   let camphorTree = new Tree("樟树", "淡绿色");
   console.log(pine);
   console.log(camphorTree);
   console.log(pine.name);
   console.log(camphorTree.name);
   pine.photosynthesis();
   camphorTree.photosynthesis();
   

   组合继承会调用两次父构造函数

   

   JavaScript高级程序设计书本，概述这样会降低效率

6. 寄生组合式继承

   比较推荐

   为了减少一次调用父构造函数。创建一个新对象代替上面的第一次调用产生的superType实例

   //1.创建一个新对象 该对象的原型指向obj
   function prototypeToObj(obj) {
       function F() {};
       F.prototype = obj;
       return new F();
   }
   //superType和subType之间创建一个新对象，该对象作为subType的原型，并且该对象的原型执行superType
   function inheritPrototype(subType, superType) {
       let inheritSuperTypeInstance = prototypeToObj(superType);
       inheritSuperTypeInstance.constructor = subType;
       subType.prototype = inheritSuperTypeInstance;
   }
   
   function SuperType(name) {
       this.name = name;
       this.colors = ["blue","red","oringe"];
   }
   
   SuperType.prototype.sayName = function() {
       console.log(this.name);
   }
   
   function SubType(name,age) {
       //继承父构造函数的属性
       SuperType.call(this,name);
       this.age = age;
   }
   
   //继承父构造函数的方法
   inheritPrototype(SubType, SuperType);
   
   SubType.prototype.sayAge = function() {
       console.log(this.age);
   }
   
   let sub1 = new SubType("小米",21);
   let sub2 = new SubType("小东",22);
   console.log(sub1);
   console.log(sub2);
   sub1.colors.push("green");
   console.log(sub1.colors);
   console.log(sub2.colors);
   console.log(sub1.sayName == sub2.sayName);