js继承问题

Posted 2021-01-10 lakemonster

javascript 继承问题

继承的发展史

1. 传统形式 ----> 原型链

   1. 继承了父級的所有的属性（原型链上的也会继承）过多的继承了没有用的属性，代码冗余，执行效率低下
   2. 子級无法向父級进行传参
   3. 如果要给之級通过原型来添加属性和方法，那么必须在之級继承父級之后 Detail.prototype = new Star() ，才能进行新增。

   4. 无法实现多继承，js本身没有多继承机制，但是可以进行代码模拟多继承。

      function Star () {
      this.person = function(){
      console.log("金城武");
      }
      this.country = function(){
      console.log("台湾")
      }
      this.msg = "this is Star"
      }

      function Detail(){
           this.msg = "this is Detail"
      }
      
      Detail.prototype = new Star();
      var detail = new Detail();
      detail.person();    
      console.log(detail.msg); //this i Detail 
      console.log(detail.constructor); //f Star(){······}
      console.log( detail instanceof Detail);//true
      console.log( detail instanceof Star);//true

2. 借用构造函数(call/apply)

   1. 不能继承借用构造函数的原型链上的属性和方法
   2. 每次构造函数都要多走一次函数(执行效率低下)
   3. 可以实现多继承
   4. 问题：如果单独写Basic.call(this);那么子級是继承到父級中的属性，但是可以继承其中的方法，不知道，测试一下会输出，（undefined undefined "female"）; 但是per.dispaly();per.dispaly2();都能被输出，不知道为什么!!! 难道是this这个指针指向的是父級中所有的方法，如果之級要使用父級的属性，还要单独，使用call吗？可以在子級构造的时候选择要从父級继承的方法吗？

   function Basic(name,age){
   this.name = name;
   this.age = age;
   this.dispaly = function(){
   console.log(" this is dispaly from Basic");
   }
   this.dispaly2 = function(){
   console.log(" hello world");
   }
   }
   function Gender(gender){
   this.gender = gender;
   }
   // Basic.prototype.dispaly2 = function(){
   // console.log(" 我的原型链上的东西");
   // }
   function Person(name, age, gender){
   Basic.call(this,name,age);
   Gender.call(this,gender);
   this.show = function(){
   console.log(this.name,this.age,this.gender);
   }
   }

        var per = new Person("jack", 99, "female");
        per.show();
        per.dispaly();
        per.dispaly2();

3. 共享原型

   不能随便改变自己的原型,一但修改全部改，之級改变原型那么父級也将随之改变。

    function Father(){
    }
    Father.prototype.lastName = "Sun";
    function Son(){ 
    }
   
    var father= new Father();
    Son.prototype = Father.prototype;
   
    var son = new Son();
   
    console.log(son.lastName); //Sun
   
    Son.prototype.lastName = " Wang";
   
    console.log(son.lastName); //Wang
   
    console.log(father.lastName);//Wang

4. 圣杯模式

   可以防止原型链上的修改影响到父級。因为有了一个中间对象F出现，所以Target在原型上所作的修改，只会影响F上的属性，真正的父級不会产生影响，但是查找的话是沿着原型链_proto_查找的，可以找到父級，实现继承。

   //第一种
   var inherit = (function(){
   var F = function(){};
   return function(Target, Origin){
   F.prototype = Origin.prototype;
   Target.prototype = new F();
   Target.prototype.constructor = Target;
   Target.prototype.uber = Origin.prototype;
   }
   }())

   //第二种
   function inherit (Target, Orgin){
   var F = function(){}; //生成一个中间对象，
   F.prototype = Origin.prototype;
   Target.prototype = new F();
   Target.prototype.constructor = Target;
   Target.prototype.uber = Origin.prototype;
   }