构造函数和 class 的一个优势特性是，它们可以基于父级扩展为新的对象蓝图。这可以避免为相似但需要一些额外或更具体功能的对象的代码重复。

可以使用 call() 方法从父级创建新的构造函数。在下面的示例中，我们将创建一个更具体的角色类 Mage，并使用 call() 将 Hero 的属性分配给它，同时添加一个额外的属性。

// 从父级创建新的构造函数
function Mage(name, level, spell) {
	// 使用 call 链式调用构造函数
	Hero.call(this, name, level);

	this.spell = spell;
}

此时，我们可以使用与 Hero 相同的属性以及我们添加的新属性来创建 Mage 的新实例。

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

将 hero2 输出到控制台，我们可以看到基于构造函数创建了一个新的 Mage。

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}
__proto__:
    ▶ constructor: ƒ Mage(name, level, spell)

使用 ES6 class 时，使用 super 关键字代替 call 来访问父级函数。我们将使用 extends 来引用父 class。

// 从父级创建新的 class
class Mage extends Hero {
	constructor(name, level, spell) {
		// 使用 super 链式调用构造函数
		super(name, level);

		// 添加新属性
		this.spell = spell;
	}
}

现在我们可以使用相同的方式创建 Mage 的新实例。

const hero2 = new Mage('Lejon', 2, 'Magic Missile');

我们将 hero2 输出到控制台并查看结果。

Output
Mage {name: "Lejon", level: 2, spell: "Magic Missile"}
__proto__: Hero
    ▶ constructor: class Mage

输出几乎完全相同，除了在 class 构造中 [[Prototype]] 链接到父级，在本例中是 Hero。

下面是构造函数函数和 class 的初始化、添加方法和继承整个过程的并排比较。

function Hero(name, level) {
	this.name = name;
	this.level = level;
}

// 为构造函数添加方法
Hero.prototype.greet = function() {
	return `${this.name} says hello.`;
}

// 从父级创建新的构造函数
function Mage(name, level, spell) {
	// 使用 call 链式调用构造函数
	Hero.call(this, name, level);

	this.spell = spell;
}

// 初始化 class
class Hero {
	constructor(name, level) {
		this.name = name;
		this.level = level;
	}

	// 为构造函数添加方法
	greet() {
		return `${this.name} says hello.`;
    }
}

// 从父级创建新的 class
class Mage extends Hero {
	constructor(name, level, spell) {
		// 使用 super 链式调用构造函数
		super(name, level);

		// 添加新属性
		this.spell = spell;
	}
}

尽管语法差异很大，但两种方法的底层结果几乎相同。Class 提供了更简洁的对象蓝图创建方式，而构造函数函数更准确地描述了底层发生的事情。

在本教程中，我们学习了 JavaScript constructor functions 和 ES6 classes 之间的相似点和不同点。classes 和 constructors 都为 JavaScript（一种基于原型的继承语言）模拟了面向对象的继承模型。

理解原型继承对于成为一名高效的 JavaScript 开发者至关重要。熟悉 classes 也非常有帮助，因为像 React 这样的流行 JavaScript 库频繁使用 class 语法。