js继承

作者: 月半女那 | 来源:发表于2019-03-06 01:24 被阅读0次
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.sayhi = function() {
            console.log('hellow',this.name,this.age)
        }
    }
    Person.prototype.sayNo = function() {
        console.log('no',this.name,this.age)
    }
    

    1.通过构造函数(call)

    优点:

    1. 可以实现多继承(call多个父类对象)
      缺点:
    2. 只能继承父类的实例属性和方法,不能继承原型链上的属性/方法
    3. 实例不是父类的实例,而是子类的实例,
    4. 无法实现函数的复用,每个子类都有父类实例函数的副本,影响性能
    function Student(name, age) {
        Person.call(this, name, age)
    }
    
    var p = new Student('hhah', 21)
    p.sayhi();
    
    p instanceof Person // false
    p instanceof Student  // true
    

    2. prototype(原型链继承)

    优点:

    1. 简单易于实现
    2. 父类新增原型方法/属性,子类都能访问到
      缺点:
    3. 创建子类实例的时候无法向父类构造函数传参
    4. 来自原型对象的所有属性被实例共享
    function Student1() {}
    Student1.prototype = new Person('haha', 22)
    var p1 = new Student1();
    p1.sayhi();
    p1.sayNo()
    

    3.组合继承

    优点:

    1. 不存在引用属性共享问题
    2. 既可以继承实例方法/属性 ,也可以继承原型属性/方法
      缺点:
    3. 调用了两次父类构造函数,生成两份实例 // 会多消耗一点内存
    function Student2(name, age) {
        Person.call(name, age)
    }
    Student2.prototype = new Person()
    var p2 = new Student2('heie', 22)
    p2.sayhi();
    p2.sayNo();
    

    4. 拷贝继承

    优点:

    1. 可以实现多继承
      缺点:
    2. 无法获取父类的不可枚举属性
    3. 效率低,内存占用高
    function Student3(name, age) {
        var person = new Person(name, age);
        for (const key in person) {
            Student3.prototype[key] = person[key]
        }
    }
    
    var p3 = new Student3('hehhe', 22)
    p3.sayhi()
    p3.sayNo()
    

    5. 寄生式继承

    优点:

    1. 原型式继承的一种扩展
      缺点:
    2. 较为复杂
    3. 没有类的概念
    function objectCreat(obj) {
      function F() {}
      F.prototype = obj;
      return new F()
    }
    
    var person = new Person()
    
    function createSubObj(obj) {
      var sub = objectCreat(obj)
      sub.name = 'heheh';
      sub.age = 22;
      return sub;
    }
    
    var p4 = createSubObj(person)
    p4.sayhi()
    p4.sayNo()
    

    5.寄生组合继承

    优点:

    1. 修复了组合继承的问题
    var con = createSubObj(Person.prototype);
    
    function Sub(name, age) {
        Person.call(this, name, age)
    }
    Sub.prototype = con;
    con.constructor = Sub;
    var sub1 = new Sub('hhhh', 22);
    sub1.sayhi()
    sub1.sayNo()
    
    
    // 一种简单的写法
    function F() {}
    F.prototype = Person.prototype;
    
    function Student5(name, age) {
        Person.call(this, name, age)
    }
    Student5.prototype = new F();
    var p5 = new Student5('he', 33)
    p5.sayhi();
    p5.sayNo()
    

    相关文章

      网友评论

          本文标题:js继承

          本文链接:https://www.haomeiwen.com/subject/fhtzuqtx.html