javascript是一种基于原型的语言，javascript中的每个对象都有一个名为[[原型]]的隐藏内部属性，可用于扩展对象属性和方法。
直到最近，勤奋的开发人员使用构造函数来模仿JavaScript中面向对象的设计模式。语言规范ECMAScript 2015（通常称为ES6）引入了JavaScript语言的类。JavaScript中的类实际上并没有提供额外的功能，并且通常被描述为提供原型和继承的“语法糖”，因为它们提供了更清晰，更优雅的语法。由于其他编程语言使用类，因此JavaScript中的类语法使开发人员在语言之间移动变得更加直接。
类是函数：
JavaScript类是一种函数。使用class关键字声明类。我们将使用函数表达式语法初始化函数和类表达式语法来初始化类。
// Initializing a function with a function expression
const x = function() {}
// Initializing a class with a class expression
const y = class {}我们可以使用object.getprototypeof（）方法访问对象的[[原型]]。让我们用它来测试我们创建的空函数。
Object.getPrototypeOf(x);
Output
ƒ () { [native code] }我们也可以在刚刚创建的类上使用该方法。
Object.getPrototypeOf(y);
Output
ƒ () { [native code] }用函数和类声明的代码都返回函数[[原型]]。使用原型，任何函数都可以使用new关键字成为构造函数实例。
const x = function() {}
// Initialize a constructor from a functionconst
constructorFromFunction = new x();
console.log(constructorFromFunction);
Output
x {}
constructor: ƒ ()这也适用于类。
const y = class {}
// Initialize a constructor from a class
const constructorFromClass = new y();
console.log(constructorFromClass);
Output
y {}
constructor: class这些原型构造函数示例在其他方面是空的，但是我们可以看到在语法的下面，这两个方法是如何实现相同的最终结果的。
定义一个类
一个构造函数函数是用一些参数初始化的，这些参数将被指定为该函数的属性，并引用该函数本身。按照惯例，标识符的第一个字母将大写。
constructor.js
// Initializing a constructor
functionfunction Hero(name, level) {
this.name = name;
this.level = level;
}当我们将其转换为类语法时，如下所示，我们看到它的结构非常相似。
class.js
// Initializing a class definition
class Hero {
constructor(name, level) {
this.name = name;
this.level = level;
}}我们知道构造器函数通过初始化器的第一个字母大写（可选）和熟悉语法来表示对象蓝图。class关键字以更直接的方式传递函数的目标。
初始化语法的唯一区别是使用class关键字而不是函数，并在constructor（）方法中分配属性。
定义方法
构造函数函数的常见做法是将方法直接分配给原型，而不是在初始化过程中，如下面的greet（）方法所示。
constructor.js
function Hero(name, level) {
this.name = name;
this.level = level;
}// Adding a method to the constructor
Hero.prototype.greet = function() {
return `${this.name} says hello.`;
}对于类，这种语法被简化，方法可以直接添加到类中。
class.js
class Hero {
constructor(name, level) {
this.name = name;
this.level = level;
}
// Adding a method to the constructor
greet() {
return `${this.name} says hello.`;
}
}让我们看看这些属性和方法的实际应用。我们将使用新关键字创建一个新的英雄实例，并分配一些值。
const hero1 = new Hero('Varg', 1);如果我们用console.log（hero1）打印出更多关于新对象的信息，我们可以看到更多关于类初始化的细节。
Output
Hero {name: "Varg", level: 1}
__proto__:
▶ constructor: class Hero
▶ greet: ƒ greet()我们可以在输出中看到constructor（）和greet（）函数被应用于hero1的uu proto_uuuu或[[prototype]]，而不是直接作为hero1对象上的方法。虽然这在构造构造函数函数时很明显，但在创建类时并不明显。类允许更简单和简洁的语法，但会在过程中牺牲一些清晰度。
扩展类
构造器函数和类的一个优点是，它们可以基于父对象扩展为新的对象蓝图。这可以防止对相似但需要一些额外或更具体功能的对象重复代码。
可以使用call（）方法从父级创建新的构造函数函数。在下面的示例中，我们将创建一个更具体的字符类mage，并使用call（）将hero的属性分配给它，同时添加一个额外的属性。
constructor.js
// Creating a new constructor from the parent
function Mage(name, level, spell) {
// Chain constructor with call
Hero.call(this, name, level);
this.spell = spell;
}此时，我们可以创建一个Mage使用相同属性的新实例，Hero以及我们添加的新属性。
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类，使用super关键字代替call访问父函数。我们将用于extends引用父类。
class.js
// Creating a new class from the parent
class Mage extends Hero {
constructor(name, level, spell) {
// Chain constructor with super
super(name, level);
// Add a new property
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输出几乎完全相同，除了在类构造中[[Prototype]]链接到父类，在本例中是Hero。
下面是初始化、添加方法以及构造函数函数和类继承的整个过程的并行比较。
constructor.js
function Hero(name, level) {
this.name = name;
this.level = level;
}// Adding a method to the constructor
Hero.prototype.greet = function() {
return `${this.name} says hello.`;
}// Creating a new constructor from the parent
function Mage(name, level, spell) {
// Chain constructor with call
Hero.call(this, name, level);
this.spell = spell;
}class.js
// Initializing a class
class Hero {
constructor(name, level) {
this.name = name;
this.level = level;
}
// Adding a method to the constructor
greet() {
return `${this.name} says hello.`;
}
}
// Creating a new class from the parent
class Mage extends Hero {
constructor(name, level, spell) {
// Chain constructor with super
super(name, level);
// Add a new property
this.spell = spell;
}
}虽然语法完全不同，但两种方法的基本结果几乎相同。 类为我们提供了一种更简洁的方法来创建对象蓝图，构造函数更准确地描述了引擎盖下发生的事情。
结论
在本教程中，我们了解了JavaScript构造函数和ES6类之间的相似点和不同点。类和构造函数都模仿面向对象的继承模型到JavaScript，这是一种基于原型的继承语言。
理解原型继承对于成为有效的JavaScript开发人员至关重要。熟悉类非常有用，因为像React这样的流行JavaScript库经常使用class语法。
更多web前端学习相关知识，请查阅 HTML中文网 ！！