ES6学习笔记（二）：教你玩转类的继承和类的对象

文章目录

继承
super关键字
ES6中的类和对象的4个注意点：
总结

继承

程序中的继承：子类可以继承父类的一些属性和方法

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 = xthis.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 = xthis.y = y}sum() {console.log(this.x + this.y)}
}class Son extends Father {constructor(x,y) {//利用super 调用父类的构造函数super(x,y)this.x = xthis.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学习笔记二新的声明方式和变量的解构赋值！
新的声明方式在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式: var:它是variable的简写,可以理解成变量 ...
学习笔记(02):教你玩转HTML(html5)h5网页设计，网站开发-八卦图
立即学习:https://edu.csdn.net/course/play/1221/19369?utm_source=blogtoedu html中英文空格如何输出字符如何旋转如何自定义位 ...
学习笔记(01):教你玩转HTML(html5)h5网页设计，网站开发-浏览
立即学习:https://edu.csdn.net/course/play/1221/19363?utm_source=blogtoedu htm=html
学习笔记(01):教你玩转HTML(html5)h5网页设计，网站开发-strong
立即学习:https://edu.csdn.net/course/play/1221/19366?utm_source=blogtoedu <strong></strong>加 ...
ES6学习笔记(二)
变量解构赋值 ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值,这被称为解构,模式匹配,只要等号两边的模式相同左边的变量就会被赋予对应的值,如果解构不成功,变量值就为undefined,如果 ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
ES6学习笔记04：Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...

ES6学习笔记（二）：教你玩转类的继承和类的对象

文章目录

继承

super关键字

ES6中的类和对象的4个注意点：

总结

ES6学习笔记（二）：教你玩转类的继承和类的对象相关推荐

最新文章

热门文章