ES6中class类的使用

我们在ES5中经常使用方法或者对象去模拟类的使用,虽然可以实现功能,但是代码并不优雅,ES6为我们提供了类的使用。需要注意的是我们在写类的时候和ES5中的对象和构造函数要区分开来,不要学混了。

类的声明

先声明一个最简单的coder类,类里只有一个name方法,方法中打印出传递的参数。

class coder{
name(val){
console.log(val);
}
}

类的使用

我们已经声明了一个类,并在类里声明了name方法,现在要实例化类,并使用类中的方法。

class Coder{
name(val){
console.log(val);
}
}
let awesome= new Coder;
awesome.name('awesome233333');

// awesome233333

类的多方法声明


class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('awesome')+':'+'Skill:'+val);
}
}

let awesomeObj= new Coder;
awesomeObj.name('GanPing');
awesomeObj.skill('web');
//GanPing
//obj.html:59 awesome
//obj.html:63 awesome:Skill:web

这里需要注意的是两个方法中间不要写逗号了,还有这里的this指类本身,还有要注意return 的用法。

类的传参

在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。

class Coder{

constructor(a,b){
this.a=a;
this.b=b;
}

add(){
return this.a+this.b;
}
}

let awesomeObj=new Coder(1,2);
console.log(awesomeObj.add());

// 3

我们用constructor来约定了传递参数,然后用作了一个add方法,把参数相加。这和以前我们的传递方法有些不一样,所以需要小伙伴们多注意下。

class的继承

如果你学过java,一定知道类的一大特点就是继承。ES6中也就继承,在这里我们简单的看看继承的用法。

class htmler extends Coder{

}
let awesomeObj=new htmler;
awesomeObj.name('HelloWorld');

声明一个htmler的新类并继承Coder类,htmler新类里边为空,这时候我们实例化新类,并调用里边的name方法。结果也是可以调用到的。

(完)

分享到