首页 > 其他分享 >歌谣学前端之继承

歌谣学前端之继承

时间:2023-07-29 21:05:34浏览次数:29  
标签:console 歌谣 继承 age snake 父类 前端 name

前言

我是歌谣 我有个兄弟 巅峰的时候排名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>

标签:console,歌谣,继承,age,snake,父类,前端,name
From: https://blog.51cto.com/u_14476028/6895130

相关文章

  • 前端性能优化策略:加速网页加载时间的关键技巧
    引言:在当今互联网时代,网页加载速度是提供出色用户体验的关键因素之一。快速加载的网页不仅可以吸引更多用户,还可以提高转化率和搜索引擎排名。因此,前端性能优化成为每个开发人员和网站所有者都应该关注的重要议题。本文将介绍一些关键的前端性能优化策略,帮助您加速网页加载时间并......
  • ASP.NET Core WebAPI如何获得远程文件返回文件流给前端?
     一、根据网络路径把文件保存成byte[]返回给前端项目采用的是前后端分离的模式,后端使用ASP.NETCoreWebAPI方式,将文件流返回给前端。///<summary>///根据网络路径把文件保存成byte[]///</summary>///<paramname="filePath"></param>publicbyte[]UrlToByte(string......
  • 前端token是什么意思?怎么设置保存?应用场景?实现思路?
    token的意思:服务端生成的一串字符串,作为客户端进行请求的一个标识。当用户第一次登录后,服务器生成一个token并将此token返回给客户端以后客户端只需带上这个token前来请求数据即可,无需再次带上用户名和密码。简单token的组成:uid(用户唯一的身份标识)time(当前时间的时间戳)sig......
  • Django 之前端动态数据展示
    一、结合前端页面实现ORM对数据的增删改查1、修改和删除功能的逻辑'''修改功能的逻辑'''1、确定修改哪条记录,怎么确定?通过主键id确定唯一一条记录2、点击修改的按钮,应该跳转到一个修改的页面3、应该通过id查询到原来的数据,并且把这个记录的数据展示到修改的页面4、开始......
  • 前端跨平台调试代理神器Whistle
    概述抓包一直是平时开发中经常要做的,有一款好用的抓包工具可以让开发体验更棒,以前一直用fiddler,fiddler虽然强悍,但是入手有一定难度,而且较笨重,今天介绍另一款抓包工具:Whistle。Whistle是一款前端调试神器,通过拦截、修改和模拟网络请求,帮助开发人员调试接口、排查网络问题。它提......
  • 歌谣学前端之类笔记1
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣类笔记类*-类是对象的......
  • 歌谣学前端之类笔记2
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷微信公众号前端小歌谣类笔记2类中的所有代码都会......
  • 前端一些小case
    1,不规则图形加阴影或光圈 不用box-shadow:0010px#000 用 filter:dorp-shadow(0010px#000) 像素点做阴影 该dom对象不能为透明,透明不起作用2,书写方式writing-mode:horizontal-tb vertical-rl vertical-lr , 文字朝向 text-orientation:sidewaysupright3......
  • 2023-07-28 后端接口返回的数据与postman返回的数据不一致 ==》前端不兼容数据库字段
    前言:在传参一致,接口一致的情况下,微信开发者工具调的接口和postman返回的数据的id不一致。具体为:微信开发者工具端调接口拿到的id为22位的数据:1884661033952220199看起来平平无奇对吧,而postman返回的id则为:1884661033952220200是的,接口一样,传参一样,返回的其它数据也一样,唯独这......
  • 阿里 - 前端开发规范
    前端JS项目开发规范编程规约(一)命名规范1.1.1项目命名全部采用小写方式,以中划线分隔正例:mall-management-system反例:mall_management-system/mallManagementSystem1.1.2目录命名全部采用小写方式,以中划线分隔,有复数结构时,要采用复数命名法,缩写不用复数正例:scr......