我们在ES5中经常使用方法或者对象去模拟类的使用,虽然可以实现功能,但是代码并不优雅,ES6为我们提供了类的使用。
需要注意的是我们在写类的时候和ES5中的对象和构造函数要区分开来,不要学混了。
类的声明
先声明一个最简单的coder类,类里只有一个name方法,方法中打印出传递的参数。
class coder{
name(val){
console.log(val);
}
}
类的使用
我们已经声明了一个类,并在类里声明了name方法,现在要实例化类,并使用类中的方法。
class Person {
name = "hello word";
getName() {
return this.name;
}
}
const person = new Person();
console.log(person.getName()); // hello word
类的多方法声明
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('js')+':'+'Skill:'+val);
}
}
let zachary= new Coder();
zachary.name('js');
zachary.skill('web');
这里需要注意的是两个方法中间不要写逗号了,还有这里的this指类本身,还有要注意return 的用法。
类的传参
在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('js')+':'+'Skill:'+val);
}
constructor(a,b){
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}
let zachary=new Coder(1,2);
console.log(zachary.add());
我们用constructor来约定了传递参数,然后用作了一个add方法,把参数相加。这和以前我们的传递方法有些不一样,所以需要小伙伴们多注意下。
class的继承
如果你学过java,一定知道类的一大特点就是继承。ES6中也就继承,在这里我们简单的看看继承的用法。
class Person {
name = "hello word";
getName() {
return this.name;
}
}
class Teacher extends Person {
getTname() {
return "xx老师";
}
}
const teacher = new Teacher();
console.log(teacher.getName(), teacher.getTname()); // hello word xx老师
重写(子类可以重写父类的东西)
class Person {
name = "hello word";
getName() {
return this.name;
}
}
class Teacher extends Person {
getTname() {
return "xx老师";
}
getName() { // 重写父类的getName方法
return "909";
}
}
const teacher = new Teacher();
console.log(teacher.getName(), teacher.getTname()); // 909 xx老师
super 执行extends继承过来的父类方法
如果子类调用constructor,那么子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,
而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
在构造函数中使用时,super关键字单独出现,必须在可以使用this关键字之前使用。此关键字也可用于调用父对象上的函数。
super拥有父类的全部方法
使用场景就是当子类重写了父类的方法 但覆盖后还想调用父类的方法就可以使用super
class Person {
name = "hello word";
getName() {
return this.name;
}
}
class Teacher extends Person {
getTname() {
return "xx老师";
}
getName() {
return super.getName() + " 909";
}
}
const teacher = new Teacher();
console.log(teacher.getName(), teacher.getTname()); // hello word 909 xx老师
使用实例
class BaseModel {
constructor(data,message){
if(typeof data === 'string'){
this.message = data
data = null
message = null
}
if(data){
this.data = data
}
if(message){
this.message = message
}
}
}
class SuccessModel extends BaseModel{
constructor(data,message){
super(data,message)
this.error = 0
}
}
class ErrorModel extends BaseModel{
constructor(data,message){
super(data,message)
this.error = -1
}
}
module.exports = {
SuccessModel,
ErrorModel
}
大致就是 两处不同的error错误状态不一样 一个-1一个0
但是结构是一样的所以 可以共用父级结构
先继承父级结构 之后通过子类DIY
class coders {
constructor(a, b) {
this.a = a;
this.b = b;
}
name() {
return this.a + this.b;
}
}
class childer extends coders {
constructor(a, b) {
super(a, b);
this.c = 3;
}
}
let code = new childer(1, 2);
console.log(code); // childer { a: 1, b: 2, c: 3 }