继承行为在 ES5 与 ES6 中的区别详解

笔者注：一句话引发的基础知识回炉，基础不扎实，还要什么自行车 最近在看 React 方面的一些文章时，看到了这样一个问题，「为什么每个 class 中都要写 super， super 是做什么的？」, 刚看到这个问题时，直接就想到了继承行为在 javascript 中的表现。后面作者的一句话「super 不可以省略，省略的话会报错」。当时脑海中蹦出来一个念头，这个同学是不是写错了，super 不就是用来完成调用父类构造函数，将父类的实例属性挂在到 this 上吗？为什么不写还会报错？ 后来自己亲自写了一个 Demo 尝试了一下，还真是会报错，到底是哪里出了问题，找到了阮老师的教程又打开仔细看 JavaScript中的继承是面向对象编程的重要概念，用于复用和扩展已有类的功能。在ES5和ES6中，继承实现的方式有所不同，导致了在使用时的行为差异。本文将深入探讨这两种方式的区别。 让我们回顾一下ES5的继承模式。在ES5中，没有内置的类或继承关键字，而是通过模拟类的概念来实现。常见的继承方式是使用`prototype`对象和构造函数。例如： ```javascript // ES5 父类 function Shape() { this.x = 0; this.y = 0; } Shape.prototype.move = function(x, y) { this.x += x; this.y += y; console.info('Shape moved.'); } // ES5 子类 function Rectangle() { Shape.call(this); // 调用父类构造函数 } Rectangle.prototype = Object.create(Shape.prototype); Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); ``` 在这个例子中，`Rectangle`通过`Object.create`创建了一个新的原型对象，使其原型链指向`Shape.prototype`，确保子类能够访问父类的方法。同时，`Rectangle`构造函数通过`Shape.call(this)`调用了父类的构造函数，确保子类实例拥有与父类相同的实例属性。 然而，随着ES6的引入，JavaScript引入了`class`关键字和`extends`关键字，使得继承语法更加简洁和易读。例如： ```javascript // ES6 父类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } // ES6 子类 class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的构造函数 this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的方法 } } ``` 在ES6中，`class`关键字提供了类的语法，但其实质仍然是基于原型的继承。`extends`关键字用于声明子类，并且在子类的构造函数中，必须通过`super`关键字调用父类的构造函数，以确保父类的实例属性被正确初始化。如果不调用`super`，JavaScript会报错，因为子类的`this`对象在没有经过父类构造函数塑造之前是不可用的。 在ES6的`class`语法下，`super`不仅可以用于调用父类的构造函数，还可以用于在子类方法中调用父类的方法。如上述`ColorPoint`的`toString`方法中，`super.toString()`就调用了父类`Point`的`toString`方法。 总结来说，ES5和ES6在继承上的主要区别包括： 1. ES5使用构造函数和`prototype`对象模拟类和继承，而ES6引入了`class`和`extends`关键字，提供了更接近传统面向对象语言的语法。 2. ES5中子类必须通过`call`或`apply`调用父类构造函数，而在ES6中，通过`super`自动处理这一过程。 3. ES6的`super`关键字还可以用于在子类方法中调用父类的方法，这是ES5中没有的特性。 4. 在ES6中，如果子类构造函数不调用`super`，JavaScript会抛出错误，强调了子类实例的构建必须先遵循父类的规则。 理解这些差异有助于开发者更好地利用ES6的特性进行面向对象编程，同时也能更好地理解和转换从ES5到ES6的代码。