JS继承相关

2021-07-18  本文已影响0人  小米和豆豆

//仅供学习参考

1. 原型继承

   /**
    * @description: 原型继承
    */
    console.log('原型继承----继承所有----::不能传参-----引用类型实例共享--------------------')
    function Parent(){
        this.name='父级属性'
        this.say=()=>{
            console.log('我是父级的say方法')
        }
        this.arr=[1,2]
    }
    Parent.prototype.run=()=>{
        console.log('父级:我会跑')
    }

    function Child(){
        this.name="子集属性"
    }
    Child.prototype=new Parent();
    let ch1=new Child()
    let ch1_1=new Child()
    ch1.arr.push(11)
    console.log(ch1)
    console.log(ch1_1)

2. 利用构造函数继承

    /**
     * @description: 利用构造函数继承;
     */    
    console.log('利用构造函数继承--可传参---避免引用类型实例共享------::实例是子集的实例,没有父级原型的方法---------------------')
    function Parent2(op){
        //改变了this
        this.name=op.name
        this.say=()=>{
            console.log('我是父级的say方法')
        }
    }
    Parent2.prototype.run=()=>{
        console.log('父级:我会跑')
    }
    function Child2(name){
        this.name=name
        Parent2.call(this,{name:this.name})
    }
    let ch2=new Child2('子集2')
    console.log(ch2)

3. 组合继承

    /**
     * @description: 组合继承;
     */
    console.log('组合继承--------集合1,2优点--------::调用了两次父类构造函数---------------------')
     function Parent3(op){
        //改变了this
        this.name=op
        this.say=()=>{
            console.log('我是父级的say方法')
        }
     }
     Parent3.prototype.run=()=>{
        console.log('父级:我会跑')
     }
     function Child3(name){
        this.name=name
        Parent3.call(this,name)
     }
     Child3.prototype= new Parent3()
     let ch3= new Child3('子集3')
     console.log(ch3)

4. 原型式继承

    /**
     * @description: 原型式继承
     */  
    console.log('原型式继承---------和1类似-----------引用类型实例共享----------------------')
    let  Parent4={
        name:'父级属性',
        age:12,
        arr:[1,2],
        say:()=>{
            console.log('我是父级的say方法')
        }
    }
    function create(o){
        function fn(){}
        fn.prototype=o
        return new fn()
    }
    let ch4=create(Parent4);
    let ch4_1=create(Parent4);
    ch4.arr.push(15);
    console.log(ch4)
    console.log(ch4_1)

5. 寄生继承

    /**
     * @description: 寄生继承
     */ 
    console.log('寄生继承------原型式继承基础加个外壳-----------------------------')
    let Parent5={
        name:'父级属性',
        age:12,
        arr:[1,2],
        say:()=>{
            console.log('我是父级的say方法')
        }
    }
    function create5(o){
        function fn(){}
        fn.prototype=o
        return new fn()
    }
    function create_5 (o){
        let obj=create5(o);
        obj.run=function(){
            console.log('扩展实例方法')
        }
        return obj
    }
    let ch5=create_5(Parent5);
    let ch5_1=create_5(Parent5);
    ch5.arr.push(15);
    console.log(ch5);
    console.log(ch5_1);

6. 寄生组合式继承

    /**
     * @description: 寄生组合式继承
     */
    console.log('寄生组合式继承--------修复了组合继承的问题-------------------------------------------------------')
    function Parent6(name){
        this.name=name
        this.say=()=>{
            console.log('我是父级的say方法')
        }
    }
    Parent6.prototype.run=()=>{
        console.log('父级:我会跑')
    }
    function Child6(name){
        Parent6.call(this,name)
    }
    function create6(o){
        let fu=function(){}
        fu.prototype=o
        return new fu()
    }
    function create_6 (child,parent){
        let obj=create6(parent.prototype);
        obj.cunstructor=child;
        child.prototype=obj;
    }
    create_6(Child6,Parent6);
    let ch6=new Child6('ddd')
    console.log(ch6)
上一篇下一篇

猜你喜欢

热点阅读