es6 类-class
与大多正规的面向对象编程语言不同(比如java),js在创建之初就不支持类。js的面向对象编程实现方式是通过构造函数和原型来实现的。
我之前以为es6引入类的概念将会带给这门语言极大的改变。后来才发现es6类的特性只是一种语法糖,使得js创建自定义类型和传统的面向对象语言语法上更为相似,其内部机理和之前构造函数-原型模式本质上是一样的。但是,es6 类的特性依然是值得掌握的,它使得js语言更加的严谨,消除了一些可能导致出错的状况。
语法
类的创建依赖于class和constructor两个关键字,下面介绍下类创建的语法。
创建自定义类型
看下面一段代码:
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
sayName(){
console.log(this.name);
}
}
上面代码使用class创建了一个自定义类型Person,constructor是这个类的构造器,sayName是类的公共方法。它和下面一段代码是等价的。
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function(){
console.log(this.name);
}
二者在使用上完全相同,比如:创建一个Person的实例 new Person('icode007')
等。一些小的差别主要有下面几点:
- 使用class创建的类只能使用new来调用,而后者可以作为普通函数调用。
- class没有声明提升,后者作为函数会有声明提升。
- 类声明中的代码自动运行在严格模式下。
- 类的所有方法都是不可枚举的。
类表达式
与函数类似,类也具有两种形式,类声明和类表达式。
let Person = class{
constructor(name, age){
this.name = name;
this.age = age;
}
sayName(){
console.log(this.name);
}
}
let person = new Person('icode007');
类表达式在使用上与类声明几乎没有区别。
类的访问器属性
使用get和set关键字可以为类定义访问器属性。
let Person = class{
constructor(firstname, lastname){
this.firstname = firstname;
this.lastname = lastname;
}
get fullname(){
return this.firstname + this.lastname;
}
set fullname(name){
var arr = name.split(' ');
this.firstname = arr[0];
this.lastname = arr[arr.length - 1];
}
}
let person = new Person('nicholas', 'zakas');
console.log(person.fullname);
类的静态成员
要定义类的静态方法,只需要在公共方法定义前加static关键字即可。如:
let Person = class{
constructor(firstname, lastname){
this.firstname = firstname;
this.lastname = lastname;
}
static getFullname(){
return this.firstname + this.lastname;
}
}
要使用该静态方法,需要直接在类上调用,比如Person.getFullname()
。
类的继承
es6的类使用extends来实现继承。例如:
class Rectangle{
constructor(length,width){
this.length = length;
this.width = width;
}
getArea(){
return this.length * this.width;
}
}
class Square extends Rectangle {
constructor(length){
super(length, length);
}
getPerimeter(){
return this.length * 4;
}
}
var sqr = new Square(5);
console.log(sqr.getArea()
上面代码中,类Square继承了Rectangle类,所以实例sqr同样具有getArea()方法。 同时sqr添加了自己的getPerimeter方法。并重写了构造器constructor。
注意事项
在使用类继承的实现中,需要注意的点是:
- 如果子类没有重写constructor方法,默认会调用父类的构造器方法。
- 如果重写了constructor方法,那么需要显式的调用父类的构造器方法,即
super(arg...)
,并且super()调用一定要放到构造器的最前面(准确的说是在使用this前需要调用super)。 - 父类的静态成员同样会被继承到子类上。
最佳实践
es6的类的语法比较易于掌握,推荐在实际开发中,多使用class来创建自定义类型。 首先会使关于类的信息都包裹在一个class{}中,也会使得js中的类与其他语言的类的语法更加的统一。
更多关于es6的内容,可以关注右侧专栏 - 学习ES6。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。