当前位置:网站首页>ES6学习笔记(二):教你玩转类的继承和类的对象
ES6学习笔记(二):教你玩转类的继承和类的对象
2020-11-06 20:48:00 【叫我詹躲躲】
文章目录
继承
程序中的继承: 子类可以继承父类的一些属性和方法
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中的类和对象的注意点等。
版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558932
边栏推荐
- Serilog原始碼解析——使用方法
- How do the general bottom buried points do?
- 50 + open source projects are officially assembled, and millions of developers are voting
- Examples of unconventional aggregation
- ES6 essence:
- How to encapsulate distributed locks more elegantly
- Real time data synchronization scheme based on Flink SQL CDC
- 一篇文章带你了解CSS 渐变知识
- 6.5 request to view name translator (in-depth analysis of SSM and project practice)
- 如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
猜你喜欢

前端基础牢记的一些操作-Github仓库管理

使用 Iceberg on Kubernetes 打造新一代云原生数据湖

In order to save money, I learned PHP in one day!

“颜值经济”的野望:华熙生物净利率六连降,收购案遭上交所问询

Tool class under JUC package, its name is locksupport! Did you make it?

Computer TCP / IP interview 10 even asked, how many can you withstand?

axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios

PN8162 20W PD快充芯片,PD快充充电器方案

教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化

vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
随机推荐
深度揭祕垃圾回收底層,這次讓你徹底弄懂她
Tool class under JUC package, its name is locksupport! Did you make it?
ES6学习笔记(五):轻松了解ES6的内置扩展对象
Why do private enterprises do party building? ——Special subject study of geek state holding Party branch
Wiremock: a powerful tool for API testing
High availability cluster deployment of jumpserver: (6) deployment of SSH agent module Koko and implementation of system service management
Serilog原始碼解析——使用方法
人工智能学什么课程?它将替代人类工作?
Using consult to realize service discovery: instance ID customization
业内首发车道级导航背后——详解高精定位技术演进与场景应用
快快使用ModelArts,零基礎小白也能玩轉AI!
加速「全民直播」洪流,如何攻克延时、卡顿、高并发难题?
What is the side effect free method? How to name it? - Mario
Arrangement of basic knowledge points
git rebase的時候捅婁子了,怎麼辦?線上等……
EOS创始人BM: UE,UBI,URI有什么区别?
Classical dynamic programming: complete knapsack problem
Face to face Manual Chapter 16: explanation and implementation of fair lock of code peasant association lock and reentrantlock
Grouping operation aligned with specified datum
Let the front-end siege division develop independently from the back-end: Mock.js