react笔记之继承-天翼云

react笔记之继承

2023-03-14 09:34:35 阅读次数：470

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>继承</title>
    <script>

        // 将多个类中的重复代码提取出来
        class Animal{
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            sayHello = () => {
                console.log('动物在叫');
            };
        }

        // 通过继承可以使得类中拥有其他类中的属性和方法
        // 使用extends来继承一个类，继承后就相当于将该类的代码复制到了当前类中
        // 当我们使用继承后，被继承的类就称为父类，继承父类的类 称为子类
        class Dog extends Animal{
            /*
            *   子类继承父类后，将获得父类中所有的属性和方法，
            *       也可以创建同名的属性或方法来对父类进行重写
            * */
            sayHello = () => {
                console.log('汪汪汪！');
            };

        }

        class Snake extends Animal{

            // 当在子类中重写父类构造函数时，必须在子类构造函数中第一时间调用父类构造函数，否则会报错
            constructor(name, age, len) {
                super(name, age); // 调用父类构造函数
                this.len = len;
            }

            sayHello = () => {
                console.log('嘶嘶嘶~~');
            };
        }

        const dog = new Dog('旺财', 5);
        const snake = new Snake('长虫', 4, 10);
        // console.log(dog.name, dog.age);
        console.log(snake.name, snake.age, snake.len);

        // dog.sayHello();
        // snake.sayHello();


    </script>
</head>
<body>

</body>
</html>

活动

智算服务

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

react笔记之继承

react笔记之继承

相关文章

Maven学习（Maven项目模块化。模块间“继承“机制。父(工程)，子项目(模块)间聚合）

【30天玩转python】高级面向对象编程

Java面向对象(下)关于继承

初学Java,匿名内部类(二十)

【C++】继承（下）

4 个 JavaScript 最基础的问题 —— Eric Elliott

[快学Python3]类基础

Typescript 中的 interface 和 type 有什么区别？

antDesign在react项目中样式失效

react-jsPDF下载文件到本地

作者介绍

最新文章

Maven学习（Maven项目模块化。模块间“继承“机制。父(工程)，子项目(模块)间聚合）

antDesign在react项目中样式失效

react-jsPDF下载文件到本地

react - router

详解js继承的那些事儿

深入理解CSS三大特性——继承、优先级与层叠

热门文章

React工作53:传参payload

使用构造方法实现继承效果 es5

react项目实战学习笔记-学习41-日期和按钮

react笔记之箭头函数2

react笔记之展开笔记

Android继承AppCompatActivity时requestWindowFeature(Window.FEATURE_NO_TITLE)无效

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

前端项目实战200-react中写入for循环

【django】模板继承

react18-学习笔记42-button组件分析

好客租房56-props深入（3props校验-约束规则）

好客租房157-封装顶部导航栏组件(4添加props校验)

react笔记之展开笔记