美文网首页js
组合继承,寄生组合继承,class继承

组合继承,寄生组合继承,class继承

作者: 马甲要掉了 | 来源:发表于2020-05-20 16:57 被阅读0次

    组合继承

    function Parent(name){
        this.name = name
    }
    Parent.prototype.fn=function(){
        console.log(this.name);
    }
    function Child(name,age){
        Parent.call(this,name);
        this.age = age;
    }
    Child.prototype = new Parent();
    let child = new Child('zhangsan','12');
    child.fn() //zhangsan
    

    说明:核心是在子类的构造函数中通过 Parent.call(this) 继承父类的属性,然后改变子类的原型为 new Parent() 来继承父类的函数。

    这种继承方式优点在于构造函数可以传参,不会与父类引用属性共享,可以复用父类的函数,但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数,导致子类的原型上多了不需要的父类属性,存在内存上的浪费。

    寄生组合继承

    function Parent(name){
        this.name = name
    }
    Parent.prototype.fn=function(){
        console.log(this.name);
    }
    function Child(name,age){
        Parent.call(this,name);
        this.age = age;
    }
    function object(o){
        function F(){};
        F.prototype = o;
        return new F();
    }
    function prototype(child,parent){
        let prototype = object(parent.prototype);
        prototype.constructor = child;
        child.prototype = prototype;
    }
    prototype(Child,Parent);
    let child = new Child('zhangsan','12')
    child.fn();  //zhangsan
    

    说明:核心是将父类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的父类属性问题,还能正确的找到子类的构造函数。

    class继承

    class Parent{
        constructor(name){
            this.name = name;
        }
        getName(){
            console.log(this.name);
        }
    }
    class Child extends Parent{
        constructor(val){
            super(val);
        }
    }
    let child = new Child('zhangsan');
    child.getName();  //zhangsan
    child instanceof Parent // true
    

    说明:核心在于使用 extends 表明继承自哪个父类,并且在子类构造函数中必须调用 super。
    class 的本质还是函数,这种表达不过是一种语法糖。

    相关文章

      网友评论

        本文标题:组合继承,寄生组合继承,class继承

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