js继承问题

Posted lakemonster

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js继承问题相关的知识,希望对你有一定的参考价值。

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;
    }















































以上是关于js继承问题的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

Node.js JavaScript 片段中的跳过代码

js代码片段: utils/lcoalStorage/cookie

JS代码片段:一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段