【ES6 教程】第四章 ES6类07—JavaScript继承使用extends & super
function Animal(legs) { this.legs = legs;}
Animal.prototype.walk = function() { console.log('walking on ' + this.legs + ' legs');}
function Bird(legs) { Animal.call(this, legs);}
Bird.prototype = Object.create(Animal.prototype);Bird.prototype.constructor = Animal;
Bird.prototype.fly = function() { console.log('flying');}
var pigeon = new Bird(2);pigeon.walk(); // walking on 2 legspigeon.fly(); // flyingES6 通过使用 extends 和 super 关键字简化了这些步骤。
以下示例定义了 Animal 和 Bird 类，并通过 extends 和 super 关键字建立继承。
class Animal { constructor(legs) { this.legs = legs; } walk() { console.log('walking on ' + this.legs + ' legs'); }}
class Bird extends Animal { constructor(legs) { super(legs); } fly() { console.log('flying'); }}
let bird = new Bird(2);
bird.walk();bird.fly();它们怎么运作。
首先，使用 extends 关键字使 Bird 类继承自 Animal 类：
class Bird extends Animal { // ...}Animal 类称为基类或父类，而 Bird 类称为派生类或子类。通过这样做，Bird 类继承了 Animal 类的所有方法和属性。
其次，在 Bird 的构造函数中，调用 super() 以调用带有 leg 参数的 Animal 的构造函数。
如果子类有构造函数，JavaScript 要求子类调用 super()。正如你在 Bird 类中看到的，super(legs) 等价于 ES5 中的以下语句：
Animal.call(this, legs);如果 Bird 类没有构造函数，则无需执行任何其他操作：
class Bird extends Animal { fly() { console.log('flying'); }}它等价于以下类：
class Bird extends Animal { constructor(...args) { super(...args); } fly() { console.log('flying'); }}但是，子类有一个构造函数，它需要调用super()。例如，以下代码会导致错误：
class Bird extends Animal { constructor(legs) { } fly() { console.log('flying'); }}错误：
ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor代码语言：JavaScript （javascript ）因为super()初始化了this对象，所以，在访问this对象之前需要调用super()。在调用 super() 之前尝试访问它也会导致错误。
例如，如果要初始化 Bird 类的 color 属性，可以如下进行：
class Bird extends Animal { constructor(legs, color) { super(legs); this.color = color; } fly() { console.log("flying"); } getColor() { return this.color; }}
let pegion = new Bird(2, "white");console.log(pegion.getColor());Shadowing methods
ES6 允许子类和父类拥有同名的方法。在这种情况下，当你调用子类的某个对象的方法时，子类中的方法会影响父类中的方法。
以下 Dog 类扩展了 Animal 类并重新定义了 walk() 方法：
class Dog extends Animal { constructor() { super(4); } walk() { console.log(`go walking`); }}
let bingo = new Dog();bingo.walk(); // go walking要在子类中调用父类的方法，可以像这样使用 super.method(arguments)：
class Dog extends Animal { constructor() { super(4); } walk() { super.walk(); console.log(`go walking`); }}
let bingo = new Dog();bingo.walk();// walking on 4 legs// go walking继承静态成员
除了属性和方法，子类还继承了父类的所有静态属性和方法。例如：
class Animal { constructor(legs) { this.legs = legs; } walk() { console.log('walking on ' + this.legs + ' legs'); } static helloWorld() { console.log('Hello World'); }}
class Bird extends Animal { fly() { console.log('flying'); }}Bird.helloWorld(); // Hello World从内置类型继承
JavaScript 允许你通过继承扩展内置类型，例如 Array、String、Map 和 Set。
以下 Queue 类扩展了 Array 引用类型，语法比使用构造函数/原型模式实现的队列要干净得多。
class Queue extends Array { enqueue(e) { super.push(e); } dequeue() { return super.shift(); } peek() { return !this.empty() ? this[0] : undefined; } empty() { return this.length === 0; }}
var customers = new Queue();customers.enqueue('A');customers.enqueue('B');customers.enqueue('C');
while (!customers.empty()) { console.log(customers.dequeue());}总结
在 ES6 中使用 extends 关键字来实现继承，要扩展的类称为基类或父类，扩展基类或父类的类称为派生类或子类。
在子类的构造函数中调用 super(arguments) 来调用父类的构造函数。
使用 super 关键字在子类的方法中调用父类的方法。
学习更多技能
请点击下方公众号