html 及 js 代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Js Class extends</title>

    <style>

        * {

            margin-top: 20px;

        }

        h5 {

            color: red;

        }

        span {

            color: blue;

        }

    </style>

</head>

<body>

    <h5>Js 类继承 extends</h5>

    <div>继承类声明 使用关键字 extends</div>

    <div>如果子类中存在构造函数 constructor()，则需要在使用“this”之前调用 super() 代替父类构造函数</div>

    <div>

        <span>js 输出: </span>

        <span id="idconsole"></span>

        <!-- 显示时间 -->

        <div></div>

    </div>

</body>

<script>

    // 父类

    class Animal {

        constructor(name) {

            this.name = name;// 类属性声明不须要var声明 , var parrent = '';是声明普通变量

        }

        // 成员方法

        speak() {

            console.log(this.name + ' makes a noise.'); //仿问类属性要使用 this.

        }

    }

    // 子类 继承自 Animal

    class Dog extends Animal {

        master = ''; // Dog 比父类Animal 多了新属性master

        constructor(name, master) {

            super(name); // 调用 super() 代替父类构造函数,初始化与父类共同的属性name

            this.master = master; // 初始化子类新属性master

        }

        // 重载父类成员方法 speak

        speak() {

            let logstr = this.name + ' is a Dog, ' + 'has master from ' + this.master + ' .';

            let logelement = document.getElementById('idconsole');

            logelement.innerHTML = logstr;

            logelement.nextElementSibling.innerHTML = 'time: ' + new Date().toLocaleString();

        }

    }

    var d = new Dog('Wangwang', 'People'); // 构造新实例 Dog

    d.speak(); // 调用Dog成员方法

</script>

</html>

Js 类继承 extends的更多相关文章

  1. js 类继承extends

    先看例子: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <titl ...

  2. JS类继承常用方式发展史

    JS类继承常用方式发展史 涉及知识点 构造函数方式继承 1-继承单个对象 1.1 多步走初始版 1.2 多步走优化版 1.3 Object.create()方式 2-继承多个对象 2.1 遍历 Obj ...

  3. 128-PHP类继承extends

    <?php class father{ //定义father类 //定义public描述的成员属性和方法 public $eyes=2; public $ears=2; public funct ...

  4. js类继承扩展super

    相应的资料https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/super 例子: class Pol ...

  5. JS原型继承和类式继承

    前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...

  6. js类（继承）（二）

    1. 定义js类 js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Sh ...

  7. 《JS权威指南学习总结--9.3 JS中JAVA式的类继承》

    内容要点: 一.JS中的类 1.JAVA或其他类似强类型 面向对象语言的 类成员的模样 实例字段:它们是基于实例的属性或变量,用以保存独立对象的状态. 实例方法: 它们是类的所有实例所共享的方法,由每 ...

  8. js原生继承之——类式继承实例(推荐使用)

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. 测试理论 - Test Double

    概述 简述 test double mock, fake 之类的东西 背景 最近在看 google 软件测试之道 妈的 13 年的老书了 书里有提到 mock, fake, stub 刚好, 我又不太 ...

  2. 使用VS2017开发安卓app（2）新建项目

    安装完成后,在c#下找到Android,选择Android应用(Xamarin),修改项目名称和路径,新建第一个安卓项目! 点击确定后会出现 这里我们选择空白应用和Android 7.1. 创建新项目 ...

  3. 动态设置微信小程序 navigationBarTitle 的值

    wx.setNavigationBarTitle({ title:' 动态值 ' })

  4. Docker on startup: “No activity detected on VM, aborting”

    windows下安装的docker,切换到linux,一直处于重启中,最后报No activity detected on VM, aborting错误 上网百度一下这个错误,基本上没人遇到过,最后在 ...

  5. Python 字符串格式化操作 - format方法

    建议使用format()方法 字符串操作 对于 %, 官方以及给出这种格式化操作已经过时,在 Python 的未来版本中可能会消失. 在新代码中使用新的字符串格式.因此推荐大家使用format()来替 ...

  6. MyBatis（2）——增删改查

    增删改查: 1.在实体类的映射文件中增加insert.update.delete标签与数据库语句,例如 <!-- 会去获取到对应的实体类的getter方法 --> <insert i ...

  7. Permission denied 解决办法

    Permission denied 解决的办法: $ sudo chmod -R 777 某一目录 其中-R 是指级联应用到目录里的所有子目录和文件777 是所有用户都拥有最高权限

  8. 路飞-pip源

    pip安装源 介绍 """ 1.采用国内源,加速下载模块的速度 2.常用pip源: -- 豆瓣:https://pypi.douban.com/simple -- 阿里: ...

  9. 线段树+扫描线 NAIPC 2019 Intersecting Rectangles

    你看看你有多菜,一点线段树的小小的运用,就不会写了: 题意:如果矩阵有交集,输出1,否则输出0(不包含内嵌): 思路:本题求交集,还得不包括内嵌的情况: 做过一道是求面积的题.跟这道类似,但在这里定义 ...

  10. Python - Git for windows 下使用 交互式命令行

    1. 概述 尝试在 windows 环境的 git 命令行使用 python3 的交互模式 2. 环境 OS win10 1905 git 2.20.1 mintty 2.9.4 python 3.7 ...