ES6时代的JavaScript面向对象编程
ES6带来的类语法糖
类的定义
ES6支持了class,extends关键字,也支持Class的静态方法,一切看起来越来越像Java开发人员所熟悉的那一套机制。
首先看class关键字,通过class关键字,可以像Java语言定义类一样去定义对象。其构造方法为constructor方法。
例,定义一个圆:
class Circle {
constructor(x,y,r){
this.x = x;
this.y = y;
this.r = r;
}
area(){
return Math.PI * this.r * this.r;
}
}
let circle1 = new Circle(0,0,10);
console.log(circle1.area());
输出为半径为10的圆的面积:
314.1592653589793
类的继承
ES6可以通过extends关键字来继承一个class,子类的构造函数可以通过super关键字来调用父类的构造函数。
举例如下:
class Sphere extends Circle {
constructor(x,y,z,r){
super(x,y,r);
this.z = z;
}
volume() {
return 4/3*Math.PI * this.r * this.r * this.r;
}
}
需要说明的一点是,子类的构造函数一定要通过super关键字来调用父类的构造函数,否则不能使用this关键字。因为子类中没有this对象,要使用父类的。
比如我们不调super,这么写:
class Sphere2 extends Circle {
constructor(x,y,z,r){
this.x = x;
this.y = y;
this.z = z;
this.r = r;
}
volume() {
return 4/3*Math.PI * this.r * this.r * this.r;
}
}
会是什么下场呢?答案是this未定义:
this.x = x;
^
ReferenceError: this is not defined
静态方法
静态方法也叫类方法,是不会被对象继承的方法。
在Java中,对象也可以调用类的静态方法,虽然说不建议如此。在ES6的语法中,对象里根本就找不到类的方法,必须通过类来调用。
比如我们写个获取类的一个实例的一个静态方法obtain:
class Circle {
constructor(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
}
area() {
return Math.PI * this.r * this.r;
}
static obtain(x, y, r) {
return new Circle(x, y, r);
}
}
let circle2 = Circle.obtain(1, 1, 4);
console.log(circle2.area());
如果想通过对象circle2去调用obtain方法,是什么结果呢?
let circle2 = Circle.obtain(1, 1, 4);
console.log(circle2.area());
circle2.obtain(2,2,2);
答案是找不到这个方法:
circle2.obtain(2,2,2);
^
TypeError: circle2.obtain is not a function
对象不能调用类的静态方法,但是子类会继承父类的静态方法:
let ball2 = Sphere.obtain(1,1,1);
Sphere虽然没有定义obtain,但是它继承了Circle的obtain,所以是有效的。
静态方法可以继承也可以重载,也可以通过super来访问父类的静态方法。
静态方法不像构造方法,不是一定要用super了,反正也没有this可以用。
例:
class Sphere extends Circle {
constructor(x, y, z, r) {
super(x, y, r);
this.z = z;
}
volume() {
return 4 / 3 * Math.PI * this.r * this.r * this.r;
}
static obtain(x,y,z,r){
return new Sphere(x,y,z,r);
}
}
let ball2 = Sphere.obtain(1,1,1);
console.log(ball2);
let ball3 = Sphere.obtain(1,1,1,1);
console.log(ball3);
输出如下:
Sphere { x: 1, y: 1, r: undefined, z: 1 }
Sphere { x: 1, y: 1, r: 1, z: 1 }
静态属性
ES6中没有定义静态属性。
网友评论