当前位置:网站首页>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
边栏推荐
- Tool class under JUC package, its name is locksupport! Did you make it?
- Just now, I popularized two unique skills of login to Xuemei
- 华为云“四个可靠”的方法论
- 业内首发车道级导航背后——详解高精定位技术演进与场景应用
- Filecoin主网上线以来Filecoin矿机扇区密封到底是什么意思
- Elasticsearch database | elasticsearch-7.5.0 application construction
- Analysis of react high order components
- Process analysis of Python authentication mechanism based on JWT
- CCR炒币机器人:“比特币”数字货币的大佬,你不得不了解的知识
- axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios
猜你喜欢

Elasticsearch database | elasticsearch-7.5.0 application construction

hadoop 命令总结

git rebase的時候捅婁子了,怎麼辦?線上等……

容联完成1.25亿美元F轮融资

带你学习ES5中新增的方法

(1) ASP.NET Introduction to core3.1 Ocelot

How to encapsulate distributed locks more elegantly

DevOps是什么

多机器人行情共享解决方案

Just now, I popularized two unique skills of login to Xuemei
随机推荐
Python crawler actual combat details: crawling home of pictures
Basic principle and application of iptables
The choice of enterprise database is usually decided by the system architect - the newstack
Process analysis of Python authentication mechanism based on JWT
Leetcode's ransom letter
中小微企业选择共享办公室怎么样?
Vue 3 responsive Foundation
Natural language processing - wrong word recognition (based on Python) kenlm, pycorrector
(1) ASP.NET Introduction to core3.1 Ocelot
比特币一度突破14000美元,即将面临美国大选考验
DevOps是什么
数字城市响应相关国家政策大力发展数字孪生平台的建设
6.4 viewresolver view parser (in-depth analysis of SSM and project practice)
[JMeter] two ways to realize interface Association: regular representation extractor and JSON extractor
100元扫货阿里云是怎样的体验?
Did you blog today?
Real time data synchronization scheme based on Flink SQL CDC
The difference between Es5 class and ES6 class
Calculation script for time series data
Elasticsearch database | elasticsearch-7.5.0 application construction