es6 Class基本语法和继承

es6 Class基本语法

class的基本语法:
ES6 的class只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

传统用构造函数生成实例

function Point(x, y) {this.x = x;this.y = y;
}
Point.prototype.toString = function () {return '(' + this.x + ', ' + this.y + ')';
}var p = new Point(1, 2);

es6 class写法
constructor()方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法

class Point {constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';}
}

Class的继承

通过extends关键字实现继承,ES6 规定,子类必须在constructor()方法中调用super(),否则就会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象
为什么子类的构造函数,一定要调用super()?原因就在于 ES6 的继承机制,与 ES5 完全不同。ES5 的继承机制,是先创造一个独立的子类的实例对象,然后再将父类的方法添加到这个对象上面,即“实例在前,继承在后”。ES6 的继承机制,则是先将父类的属性和方法,加到一个空的对象上面,然后再将该对象作为子类的实例,即“继承在前,实例在后”。这就是为什么 ES6 的继承必须先调用super()方法,因为这一步会生成一个继承父类的this对象,没有这一步就无法继承父类。

class Point { constructor(x, y) {this.x = x;this.y = y;}toString() {return '(' + this.x + ', ' + this.y + ')';}}class ColorPoint extends Point {constructor(x, y, color) {super(x, y); // 调用父类的constructor(x, y)this.color = color;}toString() {return this.color + ' ' + super.toString(); // 调用父类的toString()}
}

es5原型链实现继承

function SuperType() {this.property = true
}
SuperType.prototype.getSuperValue = function() {return this.property
}
function SubType() {this.subproperty = false
}
// 继承了SuperType
SubType.prototype = new SuperType()
SubType.prototype.getSubValue = function() {return this.subproperty
}const instance = new SubType()
alert(instance.getSuperValue()) // true

在这里插入图片描述

构造函数、原型和实例的关系
在这里插入图片描述

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

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

相关文章

Golang基础-5

Go语言基础 介绍 基础 切片 切片声明 切片初始化 切片基础操作 多维切片 介绍 本文介绍Go语言中切片(slice)(切片声明、切片初始化、切片基础操作、多维切片)等相关知识。基础 切片 切片(slice)是对数组的一个连续片段的引用,切片是一个引用类型。切片是长度可变的数组,…

基于单片机锂电池电量检测数码管显示系统设计

**单片机设计介绍,基于单片机锂电池电量检测数码管显示系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机锂电池电量检测数码管显示系统设计的主要目标是实时、准确地检测锂电池的电量,并…

Java中变量a = 3中的3是存储在栈还是堆?

1、栈区(stack) 由编译器自动分配释放,存放函数的参数值,局部变量的值等。 2、堆区(heap) 是一个可动态申请的内存空间(其记录空闲内存空间的链表由操作系统维护),在j…

状态模式实战运用

目录 前言 UML plantuml 类图 实战代码 Form State Client 前言 通常一个完整的业务流程中,会经历多个阶段,每个阶段即一个业务状态,不同状态下对应这不同的业务处理逻辑。 无脑堆砌 if else 做判断然后选择对应的业务处理其实也能…

JavaScript es6之前实现继承的方法

1.原型链继承 function Parent() {this.parentProperty true; }function Child() {this.childProperty false; }Child.prototype new Parent();var child new Child(); console.log(child.parentProperty ); // true 优点: 简单直观可以继承原型上的属性和方…

STM32使用USART发送数据包指令点亮板载LED灯

电路连接: 连接显示屏模块,显示屏的SCL在B10,SDA在B11。 程序目的: 发送LED_ON指令打开板载LED灯,发送LED_OFF关闭板载LED灯,与上一个博客不同,这个实际上是实现串口收发文本数据包。 …

FFMPEG C++封装(二)

4 详细设计 这章是FFMPEG C封装库的详细设计。 4.1 Init 该模块初始化FFMPEG库。 4.1.1 Init定义 namespace media { namespace sdk { void MEDIASDK_EXPORT Init(); } }函数说明: Init 初始化FFMPEG库,该函数可调用多次。 4.1.2 Init实现 name…

enscan自动化主域名信息收集

enscan下载 Releases wgpsec/ENScan_GO (github.com) 能查的分类 实操: 首先打开linux 的虚拟机、 然后把下面这个粘贴到虚拟机中 解压后打开命令行 初始化 ./enscan-0.0.16-linux-amd64 -v 命令参数如下 oppo信息收集 运行下面代码时 先去配置文件把coo…

极狐GitLab 14.4 重点功能解读,和禅道集成啦【二】

GitLab 是一个全球知名的一体化 DevOps 平台,很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab :https://gitlab.cn 是 GitLab 在中国的发行版,专门为中国程序员服务。可以一键式部署极狐GitLab。 更多关于极狐GitLab &#xff1…

如何购买阿里云服务器?2024年阿里云服务器购买流程分享

很多新手用户不知道阿里云服务器购买的流程,不清楚该如何选购云服务器配置才能既满足需求又不会掉“坑”里,为此笔者整理了2024年购买阿里云服务器的完整流程,分为通过云服务器ECS产品页下单购买和通过阿里云活动购买云服务器两种最常见的购买…

速锐得解码广汽智能数字技术车型埃安Y纯电动CAN数据DBC控制策略

随着电动化、智能化、信息化、数字化、网联化、共享化技术的不断应用与汽车行业出行趋势加深,为进一步巩固关键技术优势以及稳供控本、提升盈利能力,整车厂加速推进新能源产业链垂直整合。广汽埃安就是最为杰出的代表,他们不仅布局了芯片&…

大话设计模式之迪米特法则

迪米特法则,也称为最少知识原则(Law of Demeter),是面向对象设计中的一个重要原则,其核心思想是降低耦合度、减少对象之间的依赖关系,从而使系统更加灵活、易于维护和扩展。 根据迪米特法则,一…

DataX-Oracle新增writeMode支持update

目录 前言 第一步下载源码 第二步修改源码 1、Oraclewriter 2、WriterUtil 2.1、修改getWriteTemplate方法 2.2、新增onMergeIntoDoString与getStrings方法 3、CommonRdbmsWriter 3.1、修改startWriteWithConnection 3.2、修改doBatchInsert 3.3、修改fillPreparedStatem…

Web Components使用(一)

在使用Web Components之前,我们先看看上一篇文章Web Components简介,其中提到了相关的接口、属性和方法。 正是这些接口、属性和方法才实现了Web Components的主要技术:Custom elements(自定义元素)、Shadow DOM&#…

轻松解决Composer常见错误

引言: Composer作为PHP的一个重要组成部分,为PHP开发者提供了非常方便的依赖管理工具。但是,难免会在使用中遇到一些常见的错误,如连接错误、内存限制错误、版本冲突错误、锁定文件错误和类未找到错误等。这些错误可能会影响我们…

vue3 项目中引入tailwindcss

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类(class)名,然后生成相应的样式代码并写入 到一个静态 CSS 文件中。 官网:https://www.tailwindcss.cn/docs/installation 在项目中使用过…

C#手术麻醉信息系统全套商业源码,自主版权,支持二次开发 医院手麻系统源码

手术麻醉信息系统是HIS产品的中的一个组成部分,主要应用于医院的麻醉科,属于电子病历类产品。医院麻醉监护的功能覆盖整个手术与麻醉的全过程,包括手术申请与排班、审批、安排、术前、术中和术后的信息管理提供支持。 手术麻醉信息系统可与EM…

MySQL 数据库的日志管理、备份与恢复

一. 数据库备份 1.数据备份的重要性 备份的主要目的是灾难恢复。 在生产环境中,数据的安全性至关重要。 任何数据的丢失都可能产生严重的后果。 造成数据丢失的原因: 程序错误人为,操作错误,运算错误,磁盘故障灾难(如火灾、地震&#xff0…

LeetCode 20.有效的括号

给定一个只包括 ‘(’,‘)’,‘{’,‘}’,‘[’,‘]’ 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 每个右括号都…

ModuleNotFoundError: No module named ‘langchain.schema‘

自定义langchain文档分割器时报错找不到 langchain.schema 模块 langchain0.0.20 from langchain.schema import messages_to_dict ----> 1 from langchain.schema import DocumentModuleNotFoundError: No module named langchain.schema解决办法 pip install -U langcha…