ES6中类的实现和继承
类的基本语法
ES6提供了更接近面向对象语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
//创建对象
let p = new Point(1,2);
console.log(p.toString());
注意:生成类的实例对象的写法,要使用new命令。如果忘记加上new,像ES5函数那样调用Class,将会报错。
// 报错
let point = Point(2,3);
// 正确
let point = new Point(2,3);
取值函数(getter)和存值函数(setter)
在“类”的内部可以使用get
和set
关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
class MyClass {
constructor() {
// ...
}
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'
静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static
关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
- 有 static关键字,表明该方法是一个静态方法
- 需要通过类名来调用,而不是在实例 ( this )上调用
- 如果使用this调用,或者在该方法中使用this。均会出现异常
- 静态方法可以和非静态方法重名 ( 不推荐这样 )
- 父类的静态方法,可以被子类继承
class Car {
constructor(brand, factory) {
this.brand = brand
this.factory = factory
this.wheel = 4
}
dreiver () {
console.log(`${this.brand},启动发动`)
}
static isCar (car) {
if (car.wheel === 4) {
console.log('小汽车');
return true
} else {
console.log('不算小汽车');
return false
}
}
}
注意,如果静态方法包含this
关键字,这个this
指的是类,而不是实例。
constructor()方法
constructor()
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor()
方法,如果没有显式定义,一个空的constructor()
方法会被默认添加。
class Point {
}
// 等同于
class Point {
constructor() {}
}
类的继承
通过 extends
和 super
来实现继承效果
子类通过 extends 关键字来继承 父类所有的属性和方法
子类必须在 constructor 中调用 super 方法,否则新建实例会报错
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
sayName () {
return this.name
}
syaAge () {
return this.age
}
}
//继承
class Dog extends Animal {
constructor(name, age, color) {
super(name, age) //继承父类的属性要使用super
this.color = color
}
}
只需要一个extends 关键字即可轻松实现继承父类中的constructor属性
重写父类的方法
子类继承父类之后,子类中也可以直接调用父类的方法(最上方示例代码中有涉及这里就不再做展示了)。
但是在很多情况下,父类中的方法是达不到子类的要求的,那么子类就可以有一下两个操作:
添加方法:
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
sayName () {
return this.name
}
syaAge () {
return this.age
}
}
//继承
class Dog extends Animal {
constructor(name, age, color) {
super(name, age) //继承父类的属性要使用super
// Animal.call(this, name, age)
this.color = color
}
//子类自己定义的方法
sayColor () {
return `${this.name}是${this.age}岁了,它的颜色是${this.color}`
}
}
重写父类的方法:
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
sayName () {
return this.name
}
syaAge () {
return this.age
}
}
//继承
class Dog extends Animal {
constructor(name, age, color) {
super(name, age) //继承父类的属性要使用super
// Animal.call(this, name, age)
this.color = color
}
//子类自己定义的方法
sayColor () {
return `${this.name}是${this.age}岁了,它的颜色是${this.color}`
}
//重写父类
sayName () {
return this.name + super.syaAge() + this.color
}
}