JavaScript的继承方式有多种，这里列举3种，分别是原型继承、类继承以及混合继承。
1、原型继承
优点：既继承了父类的模板，又继承了父类的原型对象；
缺点：不是子类实例传参，而是需要通过父类实例，不符合常规。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>javascript的3种继承方式</title> </head> <body> <script type="text/javascript"> //1、原型继承 //父类（水果） function Fruit(name, price) { this.name = name; this.price = price; } //父类的原型对象属性 Fruit.prototype.id = 2018; //子类（苹果） function Apple(color) { this.color = color; } //继承实现 Apple.prototype = new Fruit('apple', 15); var apple = new Apple('red'); console.log(apple.name); console.log(apple.price); console.log(apple.color); console.log(apple.id); </script> </body> </html>
控制台结果：
2、类继承（运用构造函数的方式继承）
优点：继承了父类的模板并且能通过子类实例传参；
缺点：不能继承父类的原型对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>javascript的3种继承方式</title> </head> <body> <script type="text/javascript"> //2、类继承（使用构造函数的方式继承） //父类（水果） function Fruit(name, price) { this.name = name; this.price = price; } //父类的原型对象属性 Fruit.prototype.id = 99; //子类（苹果） function Apple(name, price, color) { Fruit.call(this, name, price);//调用call或apply方法实现继承 this.color = color; } var apple = new Apple('apple', 12, 'red'); console.log(apple.name); console.log(apple.price); console.log(apple.color); console.log(apple.id); </script> </body> </html>
控制台结果：
3、混合继承（原型继承+类继承）
优点：既继承了父类的模板，又继承了父类的原型对象，还能实现子类实例的传参。
缺点：Apple.prototype = new Fruit();这步又实例化了一次，当多次调用比较占用资源，影响性能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>javascript的3种继承方式</title> </head> <body> <script type="text/javascript"> //3、组合继承 //父类（苹果） function Fruit(name, price) { this.name = name; this.price = price; } //父类的原型对象属性 Fruit.prototype.id = 98; //子类（苹果） function Apple(name, price, color) { Fruit.call(this, name, price);//调用call或apply方法实现继承 this.color = color; } //原型继承 Apple.prototype = new Fruit(); var apple = new Apple('apple', 12, 'red'); console.log(apple.name); console.log(apple.price); console.log(apple.color); console.log(apple.id); </script> </body> </html>
控制台结果：
