JavaScript之继承

小鱼儿 2021-05-03 05:49 444阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>继承</title>
        <script type="text/javascript">
        let prop="jump";
        //类是一个对象 实例也是一个对象 原型也是一个对象 但是类是一个函数对象
            class Animal{ 
                 constructor(name){ 
                    this.name=name;
                }
                kill(){ 
                    window.alert(this.name+"在攻击");
                }
                static toValue(){ 
                    window.alert("我是静态方法");
                }
            }
            class Bird extends Animal{ 
                constructor(name,type,color){ 
                     super(name);//必须使用super() 调用父类的构造函数
                     this.type=type ||"鸟";//加默认值
                     this.color=color;
                }
                fly(){ 
                   window.alert(this.name+"在飞");
                }
                 [prop](){ 
                     window.alert(this.type+"在跳");
                 }
                 eat(){ 
                     super.kill();//父类的原型对象
                     this.kill();
                 }
                 static toPrint(){ 
                     super.toValue();//在静态方法中--super代表父类构造函数
                     //super.kill();//这个时候的super代表父类 父类构造函数对象上没有kill()方法
                 }
            }
            var b=new Bird("小鸟","飞禽","黄色");
            var b1=new Bird("小鸟");
            console.log(b);
            console.log(b1);
            b.jump();
            b.eat();
            Bird.toPrint();
            console.log("-----------------------");
            //父类的构造函数
            function AnimalL(name){ 
                this.name=name;
            }
    
            //子类构造函数
            function Birdl(name,type,color){ 
                //属性继承
                AnimalL.call(this,name);//借用构造函数，本质上是把父类中定义的属性加入到子类中
                this.type=type ||"鸟";//加默认值
                this.color=color;
            }
    
            AnimalL.prototype.kill=function(){ 
    
            };
            //extends的本质
            Birdl.prototype=new AnimalL();
            Birdl.prototype.constructor=Birdl;
            //构造函数都有一个属性prototype指向原型对象==实例._proto_
            Birdl.prototype.fly=function(){ 
                window.alert(this.name+"在飞");
            }
            var b3=new Birdl("大鸟","黑色");
            console.log(b3);
       </script>
    </head>
    <body>
        
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]: /images/20210502/0827ffc4d294455e88f89d9259570d08.png