JavaScript 类的继承

news2024/12/26 0:26:59

通过原型链的方式继承

通过实例化一个构造函数,使字类的原型指向父类的实例,字类就可以调用到父类的属性和方法

function Parent() {
  this.parentName = '父亲';
  this.getParentName = function () {
    console.log("parent name is: %s", this.parentName);
    return this.parentName;
  }
}
function Child() {
  this.childName = '子类';
  this.getChildName = function () {
    console.log("child name is: %s", this.childName);
    return this.childName;
  }
}
Child.prototype = new Parent();
function yxExtend() {
  let childOne = new Child();
  childOne.getParentName();
  childOne.getChildName();
} 

借用构造函数继承 call/apply函数

call/apply函数 能够改变函数的this指针

function Book(name, color) {
  this.pages = 50;
  this.name = name
  this.color = color;
  this.showBook = function () {
    console.log("name of book: %s", this.name);
    console.log("color of book: %s", this.color);
  }
}
function RedBook(name, color) {
  Book.call(this, name, color);
  this.value = 60;
}
function gzExtend() {
  var redBook = new RedBook("小红书", "红色");
  redBook.showBook();
  console.log("借用构造函数继承 call/apply函数, 打印结果:");
  console.log(redBook);
}

class方式的继承 ES6以后的写法

class+extends+super

继承父实例属性:写在父的constructor中,子使用super访问

继承父实例方法:写在父类体中,子实例对象.方法名

继承静态方法、静态属性:使用static声明,子构造函数.静态方法名/静态属性名

        注:只有在ES6中是这样创建类,给类做继承的

class Car{
  constructor(name, color){
    this.name = name;
    this.color = color;
    this.powertype = "汽油";
    console.log("父类构造器");
  }
  sayCarName(){
    console.log("this car name is: %s", this.name);
  }
  static manufacturer = "默认厂商";
  static carDistinguish(carOne){
    console.log("识别%s是否为 Car", carOne.name);
    console.log(carOne instanceof Car);
    return carOne instanceof Car;
  }
}
class Benz extends Car{
  constructor(name, color, length){
    super(name, color);
    console.log("子类构造器");
    this.length = length;
    this.capacity = 4;  //默认载客量
  }
  static maxSpeed = 200;
  static benzDistinguish(carOne){
    console.log("识别%s是否为 Benz", carOne.name);
    console.log(carOne instanceof Benz);
    return carOne instanceof Benz;
  }
}
function clExtend() {
  
  var one = new Car("比亚迪", "white");
  console.log(one);

  var two = new Benz("奔驰e330", "black");
  two.sayCarName();
  console.log(two);

  console.log("Car.carDistinguish(one) is:");
  Car.carDistinguish(one);

  console.log("Car.carDistinguish(two) is:");
  Car.carDistinguish(two);

  console.log("Benz.carDistinguish(one) is:");
  Benz.benzDistinguish(one);

  console.log("Benz.carDistinguish(two) is:");
  Benz.benzDistinguish(two);
}

控制台的打印结果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/187241.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

剑指 Offer 第13天 第14天

目录 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 剑指 Offer 57. 和为s的两个数字 剑指 Offer 58 - I. 翻转单词顺序 剑指 Offer 12. 矩阵中的路径 面试题13. 机器人的运动范围 剑指 Offer 21. 调整数组顺序使奇数位于偶数前面 输入一个整数数组,实现一个函…

maven基础-关于什么是maven、如何安装以及在Eclipse中的使用等等

本文是向大家介绍项目管理工具maven的基础使用,它能够实现项目构建打包共享,能够实现自动清理、编译、测试、报告等提高开发效率。一、为什么使用Maven这样的构建工具【why?】二、maven是什么【what?】三、安装maven四、第一个mav…

SpringCloud_02

注意: spring:application:name: userserviceprofiles:active: devcloud:nacos:server-addr: localhost:8848config:file-extension: yaml这里的name如果对应的nacos只有默认的命名空间,就直接写入服务名, 如果有其他的命名空间,…

windows 10使用Pycharm从0到1搭建一个QQ聊天机器人

文章目录选择Python环境安装nb-cli配置Go-cqhttp大工告成!选择Python环境 Nonebot2官方说,python版本要大于3.8,推荐大家使用虚拟环境,在Poetry、venv、Conda选择一个自己熟悉的即可。 安装nb-cli pip install -i https://pypi…

2-3-1-1、MySQL相关变种及体系结构

目录与MySQL有关的数据库DrizzleMariaDBPercona ServerPostgre SQLSQLiteMySQL体系结构简介连接池管理工具和服务SQL 接口解析器存储引擎、文件系统连接层Server层(SQL处理层)缓存缓存弃用的原因存储引擎层MySQL 官方引擎概要InnoDB 存储引擎MylSAM 存储…

Linux常用命令——rexec命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) rexec 运程执行Linux系统下命令 补充说明 rexec命令用于在指定的远程Linux系统主机上执行命令,向远程rexec服务器发出执行命令的请求。 rexec命令通过检查$HOME/.netrc文件(包含远程主机…

安装NLTK出现11004和11006错误

出现11404的错误 原因是因为访问github的ip地址出现错误 解决方案: 打开C:->Windows->System32->drivers->etc->host, 打开host文件。 在文件最后添加185.199.108.133 raw.githubusercontent.com,即可解决 可以查看raw.githubusercont…

Sublime Text运行C和C++程序

Sublime Text 是一款当下非常流行的文本编辑器,其功能强大(提供有众多的插件)、界面简洁、还支持跨平台使用(包括 Mac OS X、Linux 和 Windows)。 在程序员眼中,Sublime Text 不仅仅是一个文本编辑器&…

文本处理以及求相似度

常规操作。先读取文档 ## 1. 分词 , 清洗关键词, # # 删除 特殊字符 # PATTERN r[?|$|&|*|%||(|)|~] # text re.sub(PATTERN, r, text)# string manipulation libs import re import string import nltk from nltk.corpus impor…

Eureka、Ribbon、Nacos之初识微服务(一)

一.微服务技术栈二.服务架构1.1单体架构1.2分布式架构1.3微服务技术对比1.4服务提供者与消费者(相对)服务提供者:暴露接口给其它微服务调用服务消费者:调用其它微服务提供的接口提供者与消费者角色其实是相对的三.Eureka注册中心1.1Eureka的作用Eureka自…

美团动态线程池实践思路,开源了

背景 「使用线程池 ThreadPoolExecutor 过程中你是否有以下痛点呢?」 ❝ 1.代码中创建了一个 ThreadPoolExecutor,但是不知道那几个核心参数设置多少比较合适 2.凭经验设置参数值,上线后发现需要调整,改代码重启服务,…

java职工工资管理系统(GUI+无数据库)使用java制作

当年大一的课程设计,欢迎大家参考借鉴! 二、系统实现 1.登录界面 创建容器,把相应得组件设置后放入容器。如:密码、文本框、用户、按钮等组件。 设置组件位置使其更加美观(如下图)。账号:root 密码:123 2.系统界面 在查询窗口输入工号,监听模块识别并在文件内查找与工…

部署 KubeEdge 及简单使用

版本说明 k8s版本:1.22.3 kubeedge:1.10.0 kubernetes 集群准备 [roothadoop03 kubeedge]# kubectl get nodes NAME STATUS ROLES AGE VERSION hadoop03 Ready control-plane,master 9d v1.22.3cloudcore k…

电脑c盘空间不足如何清理空间,c盘清理的方法

关于电脑c盘空间不足,相信是很多人所头疼的问题吧,随着电脑使用次数的增加,那c盘的空间越来越少,一直到完全变红,电脑也变得越来越卡,那么我们要怎么去解决呢?电脑c盘空间不足如何清理空间&…

【Go】基于telegraf进行自定义插件开发(一)

基于telegraf进行插件的自定义(一)前言正文环境准备目录结构插件结构示例代码注册插件结语前言 以长期使用Prometheus和各种exporter的经验来说,大量的exporter会占用物理机的端口资源,虽说这不是特别严重的问题,但是…

【生物信息学】基于SparCC, MENA, LSA, CoNet构建微生物相互作用网络

基于SparCC, MENA, LSA, CoNet构建微生物相互作用网络背景介绍网络推断技术用于宏基因组学及其存在的问题实现方法和工具SparCCMENALSACoNetSPIEC-EASI总结参考资料背景介绍 微生物之间的共现(Co-occurrence)可能有以下几种原因,它们可能具有一定的生态关系&#x…

视频转换成gif动图如何操作?教你三步完成视频转gif

现在网络上流行的gif动图最常见的就是从用电影、电视剧等短视频中截取出来的画面做成gif动画。大家看到这些gif动图一定觉得使用视频转gif(https://www.gif.cn/)制作非常的复杂麻烦吧!其实,想要利用视频截取gif动画非常的简单。给…

Linux mysql安装

1、软件下载1.1、下载地址:https://www.mysql.com/2、Linux 查看centos版本(用于mysql版本选择)2.1、先使用 yum 安装 redhat-lsb:yum install -y redhat-lsb2.2、安装完成后,使用 -a 查看:lsb_release -a3…

前端必知:如何判断元素出现在视口内(性能优化涉及)

要检测一个元素是否可见或者两个元素是否相交的需求场景有这些: 图片懒加载——当图片滚动到可见时才进行加载内容无限滚动——也就是用户滚动到接近内容底部时直接加载更多,而无需用户操作翻页,给用户一种网页可以无限滚动的错觉检测广告的…

ABB机器人通过直接输入法设置工具坐标系的具体方法和步骤

ABB机器人通过直接输入法设置工具坐标系的具体方法和步骤 为什么要设置工具坐标系? 对于机器人来说,承受的负荷不同,各轴电机输出的电流和扭矩都会不同,错误地选用工具坐标系会导致机器人各轴机械部位的加速磨损,严重的可能会损坏机器人核心减速机等部件。 对于形状规则或…