html 及 js 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Js Class extends</title>
  7. <style>
  8. * {
  9. margin-top: 20px;
  10. }
  11.  
  12. h5 {
  13. color: red;
  14. }
  15.  
  16. span {
  17. color: blue;
  18. }
  19. </style>
  20. </head>
  21.  
  22. <body>
  23. <h5>Js 类继承 extends</h5>
  24. <div>继承类声明 使用关键字 extends</div>
  25. <div>如果子类中存在构造函数 constructor(),则需要在使用“this”之前调用 super() 代替父类构造函数</div>
  26. <div>
  27. <span>js 输出: </span>
  28. <span id="idconsole"></span>
  29. <!-- 显示时间 -->
  30. <div></div>
  31. </div>
  32.  
  33. </body>
  34. <script>
  35. // 父类
  36. class Animal {
  37. constructor(name) {
  38. this.name = name;// 类属性声明不须要var声明 , var parrent = '';是声明普通变量
  39. }
  40. // 成员方法
  41. speak() {
  42. console.log(this.name + ' makes a noise.'); //仿问类属性要使用 this.
  43. }
  44. }
  45. // 子类 继承自 Animal
  46. class Dog extends Animal {
  47. master = ''; // Dog 比父类Animal 多了新属性master
  48. constructor(name, master) {
  49. super(name); // 调用 super() 代替父类构造函数,初始化与父类共同的属性name
  50. this.master = master; // 初始化子类新属性master
  51. }
  52. // 重载父类成员方法 speak
  53. speak() {
  54. let logstr = this.name + ' is a Dog, ' + 'has master from ' + this.master + ' .';
  55. let logelement = document.getElementById('idconsole');
  56. logelement.innerHTML = logstr;
  57. logelement.nextElementSibling.innerHTML = 'time: ' + new Date().toLocaleString();
  58. }
  59. }
  60. var d = new Dog('Wangwang', 'People'); // 构造新实例 Dog
  61. d.speak(); // 调用Dog成员方法
  62. </script>
  63.  
  64. </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. 使用QtCreator运行Gstreamer程序

    1.创建一个简单的Plain C Application 2.Build System选择qmake 3.Kit Selection默认Desktop Qt x.xx.x GCC 64bit 4..p ...

  2. 解决Macbook Pro蓝牙不可用问题

    谷歌搜索了下,在威锋网看到一个帖子,需要关机重置电源管理单元和系统NVRAM恢复出厂设置,具体操作如下:1.关机2.同时按下shift+control+option+power,保持5秒左右3.先按下 ...

  3. input file弹出框选择文件后缀限制

    在页面选择文件时的弹出框默认显示的是所有类型的文件,有时候文件太多不好选择,我们就要过滤掉不想展示的文件,这是需要用到input的accept属性,只有在type="file"才有 ...

  4. 【转载】Hadoop自定义RecordReader

    转自:http://www.linuxidc.com/Linux/2012-04/57831.htm 系统默认的LineRecordReader是按照每行的偏移量做为map输出时的key值,每行的内容 ...

  5. php一些实用的自制方法

    时间戳转多久之前 function mdate($time = NULL) { $text = ''; $time = $time === NULL || $time > time() ? ti ...

  6. 【做题笔记】[NOIOJ,非NOIp原题]装箱问题

    题意:给定一些矩形,面积分别是 \(1\times 1,2\times 2,3\times 3,4\times 4,5\times 5,6\times 6\).您现在知道了这些矩形的个数 \(a,b, ...

  7. 计算几何-UVa10652

    This article is made by Jason-Cow.Welcome to reprint.But please post the article's address. 题意见白书,P2 ...

  8. Java - Test - TestNG: testng.xml 简介

    1. 概述 简介 testng.xml 中的格式, 元素 2. 背景 testng.xml 概述 测试套件 的配置文件 问题 一下生成了那么多内容 我有点看不懂 一上来就看不懂, 其实很正常, 慢慢说 ...

  9. PHPStorm设置Ctrl+滚轮调整字体大小

    1.点击左上角的File,再点击setting: 2.Editor->General,选择Change font size (Zoom) with Ctrl+Mouse Wheel: 3.点击O ...

  10. 原生js按回车键实现登录

    这篇文章主要介绍了原生JS按回车键实现登录的方法,众所周知,这是在web程序设计中的一个非常实用的小技巧,主要用于表单提交,包括注册.登录等等功能,具有很好的用户体验,有着非常广泛的实用价值,需要的朋 ...