#yyds干货盘点# 歌谣学前端之继承

简介: #yyds干货盘点# 歌谣学前端之继承

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

继承代码案例

<!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>
相关文章
|
前端开发
前端学习笔记202306学习笔记第四十二天-Es6-class的使用和继承3
前端学习笔记202306学习笔记第四十二天-Es6-class的使用和继承3
38 0
|
前端开发
前端学习笔记202306学习笔记第三十七天-js-原型链继承4
前端学习笔记202306学习笔记第三十七天-js-原型链继承4
135 0
|
前端开发
前端学习笔记202306学习笔记第三十七天-js-原型链继承3
前端学习笔记202306学习笔记第三十七天-js-原型链继承3
167 0
|
前端开发
前端学习笔记202306学习笔记第四十二天-Es6-class的使用和继承2
前端学习笔记202306学习笔记第四十二天-Es6-class的使用和继承2
52 1
前端学习笔记202306学习笔记第四十二天-Es6-class的使用和继承2
|
设计模式 前端开发 JavaScript
14分布式电商项目 - 前端分层以及控制器继承
14分布式电商项目 - 前端分层以及控制器继承
88 0
|
设计模式 JSON 前端开发
前端面试必看(手写Promise+js设计模式+继承+函数柯里化等)JavaScript面试全通关(1/3)
前端面试必看(手写Promise+js设计模式+继承+函数柯里化等)JavaScript面试全通关(1/3)
79 0
|
机器学习/深度学习 存储 前端开发
手撕前端面试题【javascript~ 总成绩排名、子字符串频次统计、继承、判断斐波那契数组等】
在刷题之前先介绍一下牛客。Leetcode有的刷题牛客都有,除此之外牛客里面还有招聘(社招和校招)、一些上岸大厂的大佬的面试经验。 牛客是可以伴随一生的编程软件(完全免费),从学校到社会工作,时时刻刻你都可以用到,感兴趣的可以去注册试试可以伴随一生的刷题app
66 0
|
存储 前端开发 JavaScript
手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】
html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。
76 0
|
前端开发
前端学习笔记202306学习笔记第三十七天-js-原型链继承1
前端学习笔记202306学习笔记第三十七天-js-原型链继承1
178 0
前端学习笔记202306学习笔记第三十七天-js-原型链继承1
下一篇
DataWorks