ECMAScript 2015（以下简称 ES6）是 ECMAScript 标准的第六个版本，对于前端开发者来说，其中的 Class 用来定义类，是一个非常重要的新特性。在 ES5 中，我们使用构造函数来创建一个类，并且使用原型链来实现继承。本文将会比较 ES6 中的 Class 与 ES5 中的继承方式的不同之处，并给出一些在实际开发中需要注意的技术细节。
ES5 中的继承方式
在 ES5 中，我们通常使用“构造函数 + 原型链”的方式来实现继承。例如，我们要创建一个 Animal 类，它有一个属性 name 和一个方法 sayName：
function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log('My name is ' + this.name); }
要创建一个 Dog 类，它继承自 Animal 类，我们可以使用如下代码：
function Dog(name) { Animal.call(this, name); // 调用父类构造函数 } Dog.prototype = Object.create(Animal.prototype); // 原型链继承 Dog.prototype.constructor = Dog; // 修复构造函数引用
上面这段代码可以解析为：
- 定义 Dog 构造函数，并调用 Animal 构造函数，让 Dog 实例拥有 name 属性；
- 将 Dog 的原型指向一个新创建的 Animal 实例，由此实现了继承；
- 修复 Dog 的构造函数引用，确保 instanceof 的正确性。
最后，我们就可以创建一个 Dog 实例并调用 sayName 方法：
var dog = new Dog('Small'); dog.sayName(); // My name is Small
在 ES5 中，封装性和继承性是通过原型链来实现的，但是原型链的实现细节非常复杂，也不够直观，所以在 ES6 中引入了 Class 语法。
ES6 中的 Class
在 ES6 中，我们可以使用 Class 语法声明一个类。例如，下面的代码创建了一个 Animal 类：
-- -------------------- ---- ------- ----- ------ - ----------------- - --------- - ----- - --------- - --------------- ---- -- --------------- - -展开代码
这段代码的含义与 ES5 中的那段代码是一样的。Class 的语法使得类的定义更加优雅和简单。
要创建一个继承自 Animal 的子类，我们可以使用 extends 关键字，例如：
class Dog extends Animal { constructor(name) { super(name); // 调用父类构造函数 } }
在这段代码中，我们定义了一个继承自 Animal 的子类 Dog，并且在 constructor 中调用了父类的构造函数。
与 ES5 中的继承方式相比，ES6 中的 Class 更加直观，适合在团队协作中使用。同时，ES6 中的 Class 也让 JavaScript 更接近于传统的面向对象语言。
注意事项
类成员修饰符
在 ES6 中，我们可以使用 static 关键字来定义类的静态方法，例如：
-- -------------------- ---- ------- ----- ------ - ------ ---- - ----- -- - ------- ----------------- - --------- - ----- - ------ ------ - ------------------------- - --------- - --------------- ---- -- --------------- - -展开代码
在这段代码中，我们定义了一个静态属性 info 和一个静态方法 info。注意，静态方法和静态属性只能通过类名来调用，不能通过实例来调用。同时，静态属性和静态方法也不能被继承。
super
super 关键字用于调用父类的构造函数和方法，例如：
-- -------------------- ---- ------- ----- ------ - ----------------- - --------- - ----- - - ----- --- ------- ------ - ----------------- ---- - ------------ -- -------- -------- - ---- - --------- - ---------------- -- ------ -------------- -- ----------- ----- ------ - -展开代码
在这段代码中，我们在子类的 constructor 中通过 super 调用了父类的构造函数，并在子类的 sayName 方法中通过 super 调用了父类的 sayName 方法。
注意，使用 super 调用父类方法时，如果在子类中定义了同名的方法，父类的方法不会被覆盖，而是通过 super 调用父类方法。
结语
ES6 中的 Class 相比于 ES5 中的继承方式更加直观和优雅，是实现面向对象思想的最佳实践。在实际开发中，我们需要注意类成员修饰符和 super 关键字的使用。同时，我们也要深入了解 JavaScript 的原型链机制，以便更好地理解 Class 相关内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c3fe7333e578e3b567a487
