美文网首页
JS继承相关

JS继承相关

作者: 小米和豆豆 | 来源:发表于2021-07-18 20:19 被阅读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)
    

    相关文章

      网友评论

          本文标题:JS继承相关

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