1、类的继承:原生
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类的继承:原生</title> </head> <body> <script> // 原生是通过修改原型链来实现继承 // 1.父类 function Vehicle(fuel, purpose) { this.fuel = fuel; this.purpose = purpose; } // 公共/原型方法 Vehicle.prototype.show = function () { return `燃料: ${this.fuel}\n用途: ${this.purpose}\n`; }; console.dir(Vehicle); // 2. 子类 function Car(fuel, purpose, color) { // this是当前子类 Vehicle.call(this, fuel, purpose); this.color = color; } // 关键代码 // 更新当前子类的原型对象,这样才能实现真正意义上继承 Car.prototype = Object.create(Vehicle.prototype); // 手工补上constructor Car.prototype.constructor = Car; // 在子类中重写父类的原型方法 Car.prototype.show = function () { return Vehicle.prototype.show .call(this) .concat(`颜色: ${this.color}\n`); }; // 实例化子类 const car = new Car("汽油", "商用", "白色"); console.log(car.show()); </script> </body></html>
2、类的继承：es6
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>类的继承：es6</title> </head> <body> <script> // 父类 class Vehicle { // 构造方法 constructor(fuel, purpose) { this.fuel = fuel; this.purpose = purpose; } // 原型方法 show() { return `燃料: ${this.fuel}\n用途: ${this.purpose}\n`; } } // 子类 class Car extends Vehicle { constructor(fuel, purpose, color) { // 调用父类的构造方法 // super()必须是第一条,否则不能正确的生成子类的this super(fuel, purpose); this.color = color; } // 重写父类的原型方法 show() { // super:代表父类的原型对象 console.log(super.show === Vehicle.prototype.show); return super.show().concat(`颜色: ${this.color}\n`); } // super: // 1. 当成函数: super()代表父类的构造方法,必须用在子类的构造方法中的第一行 // 2. 当成对象: super用在原型方法/静态方法,代码父类的原型对象 } // 实例化子类 const car = new Car("新能源", "商用", "绿色"); console.log(car.show()); </script> </body></html>
- 总结：
es6实现类的继承，用到的super:代表父类的原型对象，调用父类的构造方法时，super()必须是第一条，才能在外部访问到子类
