ES6之class
es6中的class是一个基于prototype继承的语法糖,它提供了更接近传统语言的写法,引入了class(类)这个概念作为对象的模版。通过class关键字可以定义类,但是通过class做的工作,es5也可以做到,只是通过class,可以使我们的工作更加方便。
第一部分:class定义
class实际上是一种特殊的函数,就像我们可以通过函数表达式和函数声明来定义函数一样,class也有这两种定义方式。
1.class声明
只需使用class关键字,并在其后加上class名称即可,如:
class Polygon{
constructor(width,height){
this.width=width;
this.height=height;
}
}
注意:普通的函数声明的特点在于:函数声明提升。但是class的函数声明没有函数声明提升,这一点要格外注意。
2.class表达式
class表达式可以是匿名的,也可以不是。
不匿名:
var Polygon = class Polygon{
constructor(width,height){
this.width=width;
this.height=height;
}
};
匿名:
var Polygon = class{
constructor(width,height){
this.width=width;
this.height=height;
}
};
同样的,函数表达式也没有提升的效果。
第二部分:class主体和方法
class的主体部分使用{}括起来的,我们可以在其中定义class成员。比如方法和constructor。且他们都是在严格模式下运行的。
constructor是为了创建和初始化一个有class产生的对象的,在class中只能有一个class方法, 并且在construtor中可以使用super关键字调用父类的constructor。
原型方法:
class Polygon { constructor(height, width) { this.height = height; this.width = width; } get area() { return this.calcArea(); } calcArea() { return this.height * this.width; } } const square = new Polygon(10, 10); console.log(square.area);
我们可以看到,在这个类中不仅有constructor方法,还有其他两个方法。
值得注意的是:在定义“类”方法时,前面不需要加function关键字,直接把函数定义进去就可以了,且方法之间不需要加逗号分隔,否则会报错。
重点:
ES6中的类完全可以看作构造函数的另一种写法:
class Polygon {
//...
}
typeof Point //“function”
Point === Point.prototype.constructor // true
也就是说,对于下面的这个类:
class Polygon {
constructor(){// ...
}
toString(){
//...
}
toValue(){
//...
}
}
使用es5来写可以写成这样:
Polygon.prototype = {
constructor(){},
toString(){},
toValue(){}
}
也就是就说,在类的实例上调用方法,实际上就是调用原型上的方法。
class B {}
let b = new B{};
b.constructor === B.prototype.constructor //true
即b是B类的实例,它的constructor方法就是B类原型的constructor方法。
第三部分:实例对象
生成实例对象的方法和ES5完全相同,使用new命令即可。如:
var polygon = new Polygon();
值得注意的是:实例的属性除非显示定义在其本身(即this对象)上,否则都是定义在原型上的。
与ES5一样,类的所有实例共享一个原型对象。如下所示:
var polygon1 = new Polygon();
var polygon2 = new Polygon();
polygon1._proto_ === polygon2._proto_ //true
在上面的代码中,p1和p2都是Polygon的实例,他们的原型都是Point,所以_proto_属性时相等的。这也意味着,我们可以通过实例的_proto_属性为class添加方法。
polygon1._proto_.getArea = function () {return 100};
polygon2.getArea(); //100
下面是一个简单的例子:
class Polygon { constructor(height, width) { this.height = height; this.width = width; } get area() { return this.calcArea(); } calcArea() { return this.height * this.width; } } const square = new Polygon(20, 20); const sss = new Polygon(10,250); console.log(square._proto_ === sss._proto_); //true console.log(square.area); //400 console.log(sss.area); //2500
第四部分:继承
class之间可以通过extends实现继承,这比ES5通过修改原型链实现继承要清晰和方便很多。如:
class ColorPolygon extends Polygon {}
上面的代码定义了一个ColorPolygon类,该类通过extends关键字继承了Polygon类中的所有属性和方法,但是上面的这行代码由于我们没有部署任何代码,所以这两个类目前是完全一样的,等于复制了一个Polygon类。
如果我们给这个ColorPolygon类进行部署:
class ColorPolygon extends Polygon {
constructor(width,height,color){
super(width,height); //通过super关键字来调用父类的constructor(width,height)
this.color = color;
}
toString(){
return this.color + ' ' + super.someFunc(); // 如果父类中有一个方法someFunc,我们就可以通过关键字super来调用父类的toString()
}
于是我们可以看到,constructor方法和toString方法中都出现了super关键字,它指代父类的实例(即父类的this对象),且子类必须在constructor方法中调用super方法,否则新建实例时会报错,这是因为子类中没有自己的this对象,而是继承了父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。