ES6学习笔记(二):教你玩转类的继承和类的对象
继承
程序中的继承: 子类可以继承父类的一些属性和方法
class Father { //父类
constructor () {
}
money () {
console.log(100)
}
}
class Son extends Father { //子类继承父类
}
let son = new Son()
son.money() // 100
son.
super关键字
super关键字用于访问和调用对象父类上的函数,可以通过调用父类的构造函数,也可以调用父类的普通函数
class Father { //父类
constructor (x, y) {
this.x = x
this.y = y
}
money () {
console.log(100)
}
sum () {
console.log(this.x + this.y)
}
}
class Son extends Father { //子类继承父类
constructor (x, y) {
super(x, y) //调用了父类中的构造函数
}
}
let son = new Son(1,2)
son.sum() // 3
son.
继承的特点:
- 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类,(就近原则)
- 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法
- 在子类中,可以用super调用父类元素的方法
class Father {
say() {
return '我是父元素'
}
sing() {
return '父元素唱一首歌'
}
}
class Son extends Father {
say() {
console.log('我是子元素')
}
sing() {
console.log(super.sing())
}
}
var son = new Son()
son.say() //我是子元素
son.sing() //
子元素可以继承父元素的方法的同时,子元素也可以扩展自己的其他方法,子类在构造函数中用super调用父类的构造方法时候,必须放在子类的this之前调用
class Father {
constructor(x, y) {
this.x = x
this.y = y
}
sum() {
console.log(this.x + this.y)
}
}
class Son extends Father {
constructor(x,y) {
//利用super 调用父类的构造函数
super(x,y)
this.x = x
this.y = y
}
subtract() {
console.log(this.x - this.y)
}
}
let son = new Son(5,3)
son.subtract() // 2
son.sum() //8
ES6中的类和对象的4个注意点:
- 在ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象
- 类里面的共有属性和方法一定要加this使用
- 类里面的this指向问题
- constructor里面的this指向实例对象,方法里面的this向这个方法的调用者
总结
这篇文章主要分享了,关于类的继承、继承需要的用到的extends,super、ES6中的类和对象的注意点等。
如果想了解更多,请扫描二维码

ES6学习笔记(二):教你玩转类的继承和类的对象的更多相关文章
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记(二)——字符串扩展
相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...
- ES6学习笔记二
字符串遍历 var str = 'hello'; for(let s of str){console.log(s += ' ')} //h e l l o 字符串查找:添加了include(str,i ...
- ES6学习笔记二:各种扩展
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html 一:字符串扩展 1:字符串遍历器 for (let char of str) { // ...
- ES6学习笔记(二)
Set 和 Map 数据结构 1.set 基本用法 ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值 Set本身是一个构造函数,用来生成Set数据结构 const s ...
- es6学习笔记二:生成器 Generators
今天这篇文章让我感到非常的兴奋,接下来我们将一起领略ES6中最具魔力的特性. 为什么说是“最具魔力的”?对于初学者来说,此特性与JS之前已有的特性截然不同,可能会觉得有点晦涩难懂.但是,从某种意义上来 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
随机推荐
- Treap基本用法总结
Treap=Tree+Heap 起名的人非常有才 Treap是啥? 一棵二叉搜索树可能退化成链,那样各种操作的效率都比较低 于是可爱的Treap在每个节点原先值v的基础上加了一个随机数rnd,树的形 ...
- 「 从0到1学习微服务SpringCloud 」12 Zuul的综合使用
上次讲了Zuul的基本使用,这篇讲的是综合使用,比如过滤器,限流,鉴权等应用 这里继续使用api-getway这个项目 过滤器 实现token验证(前置过滤器) 1.新建一个类,继承ZuulFilte ...
- 2015年3月26日 - Javascript MVC 框架DerbyJS DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用。
2015年3月26日 - Javascript MVC 框架DerbyJS DerbyJS 是一个 MVC 框架,帮助编写实时,交互的应用.
- UVA 最大面积最小三角形剖分
点击打开题目 题目大意: 以顺时针或逆时针给出一个简单多边形的n个点的坐标,用n-2条互不相交的,且与边不相交的对角线,分成n-2个三角形,要求其中最大三角形的面积最小 开始还汪星人咬乌龟,无从下口, ...
- Dynamics 365 CRM 在 Connected Field Service 中部署 IoT Central (二)- 匹配设备
上个blog中介绍了我们怎么去部署IoT central和 connected field service做连接. 我们这次介绍怎么把IoT设备在CRM中怎么去注册. 首先我们打开devices,再选 ...
- view 视图函数
一 Django的视图函数view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错 ...
- Docker底层架构之基础架构
Docker 采用了 C/S架构,包括客户端和服务端. Docker daemon 作为服务端接受来自客户 的请求,并处理这些请求(创建.运行.分发容器). 客户端和服务端既可以运行在一个机器上,也可 ...
- Informatica9.5.1配置域名错误(ICMD_10033,INFASETUP_10002,RSVCSHARED_00021)
错误信息: OutPut : [ICMD_10033] Command [defineDomain] failed with error [[INFASETUP_10002] Cannot creat ...
- 10个很多人不知道的Redis使用技巧
前言 Redis 在当前的技术社区里是非常热门的.从来自 Antirez 一个小小的个人项目到成为内存数据存储行业的标准,Redis已经走过了很长的一段路.随之而来的一系列最佳实践,使得大多数人可以正 ...
- 分享数百个 HT 工业互联网 2D 3D 可视化应用案例之 2019 篇
继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...