在过去,需要像 053|JavaScript 继承详解 那样实现继承。JavaScript这种继承实现方式与其它面向对象编程语言有着巨大的区别,本质上是将最原始的继承实现暴露给了开发者。
ES6中,JavaScript提供了像其它面向对象编程语言类似的语法,class语法。class语法并没有必变JavaScript使用原型链实现继承的本质,它只是一种语法糖。使用class这种语法糖,在继承的实现上更加的简单、清晰。
下面定义了一个名为Rectangle的类:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class语法声明的类没有声明前置(hoisting)。如,下面代码会引发错误:
var p = new Rectangle(); // ReferenceError
class Rectangle {}
class也可以赋给一个变量,这种语法叫class表达式:
// unnamed
var Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
// named
var Rectangle = class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
constructor即是构造函数,每个class中只能有一个constructor。
使用super关键字,可以调用父类构造函数。
class Cat {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Lion extends Cat {
speak() {
super.speak();
console.log(this.name + ' roars.');
}
}
class中也可以定义get方法:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
get area() {
return this.calcArea();
}
通过 static 方法定义静态方法:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx*dx + dy*dy);
}
}
最关键的来了,如何实现继承?通过 extends关键字即可。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal { // 使用extends实现继承
speak() {
console.log(this.name + ' barks.');
}
}
var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
经典语法和es6 class语法可以混用:
function Animal (name) {
this.name = name;
}
Animal.prototype.speak = function () {
console.log(this.name + ' makes a noise.');
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
var d = new Dog('Mitzie');
d.speak(); // Mitzie barks.
完。
什么是Spread Operator?