JavaScript中继承的多种方式和优缺点

1. 原型链继承

优点：

• 无

缺点：

• 创建子类实例时，不能向父类的构造函数中传递参数
• 父类中所有引用类型的属性会被所有子类实例共享，也就说一个子类实例修改了父类中的某个引用类型的属性时，其他子类实例也会受到影响

function Parent() {
  this.name = "parent";
  this.hobby = ["sing", "rap"];
}
function Child() {
  this.type = "child";
}

Child.prototype = new Parent();

let child1 = new Child();
let child2 = new Child();
child1.hobby.push("basketball");
console.log(child1.hobby); // [ 'sing', 'rap', 'basketball' ]
console.log(child2.hobby); // [ 'sing', 'rap', 'basketball' ]

2. 借用构造函数继承（经典继承）

优点：

• 在子类构造函数中可以向父类的构造函数中传递参数
• 避免了父类中的引用类型属性在子类中共享的问题

缺点：

• 父类原型对象上的方法子类继承不到

function Parent(age) {
  this.name = "parent";
  this.age = age;
  this.hobby = ["sing", "rap"];
}
Parent.prototype.sayHi = function() {
  console.log("Hi");
};
function Child(age) {
  Parent.call(this, age);
  this.type = "child";
}
let child1 = new Child(15);
let child2 = new Child(15);

child1.hobby.push("basketball");
console.log(child1.name); // parent
console.log(child1.age); // 15
console.log(child1.type); // child
console.log(child1.hobby); // [ 'sing', 'rap', 'basketball' ]
console.log(child2.hobby); // [ 'sing', 'rap' ]
child1.sayHi(); // 报错，child1.sayHi is not a function

3. 组合继承

优点：

• 在子类构造函数中可以向父类的构造函数中传递参数
• 避免了父类中的引用类型属性在子类中共享的问题
• 父类原型对象上的方法子类也可以继承到

缺点：

• 父类构造函数被调用了两次

function Parent(age) {
  this.name = "parent";
  this.age = age;
  this.hobby = ["sing", "rap"];
}
Parent.prototype.sayHi = function() {
  console.log("Hi");
};
function Child(age) {
  Parent.call(this, age);      // 第二次调用Parent
  this.type = "child";
}

Child.prototype = new Parent();           // 第一次调用Parent
Child.prototype.constructor = Child;

let child1 = new Child(15);
let child2 = new Child(15);

child1.hobby.push("basketball");
console.log(child1.name); // parent
console.log(child1.age); // 15
console.log(child1.type); // child
console.log(child1.hobby); // [ 'sing', 'rap', 'basketball' ]
console.log(child2.hobby); // [ 'sing', 'rap' ]
child1.sayHi(); // Hi

4. 组合式继承优化1

优点：

• 在子类构造函数中可以向父类的构造函数中传递参数
• 避免了父类中的引用类型属性在子类中共享的问题
• 父类原型对象上的方法子类也可以继承到
• 父类构造函数也只调用了一次

缺点：

• 向子类原型上增加属性或方法时会影响到父类原型

function Parent(age) {
  this.name = "parent";
  this.age = age;
  this.hobby = ["sing", "rap"];
}
Parent.prototype.sayHi = function() {
  console.log("Hi");
};
function Child(age) {
  Parent.call(this, age);
  this.type = "child";
}

Child.prototype = Parent.prototype;
Child.prototype.constructor = Child;
// 向子类原型上增加testProp属性,同时会被添加到父类原型上
Child.prototype.testProp = 1
console.log(Parent.prototype);  // 1

let child1 = new Child(15);
let child2 = new Child(15);

child1.hobby.push("basketball");
console.log(child1.name); // parent
console.log(child1.age); // 15
console.log(child1.type); // child
console.log(child1.hobby); // [ 'sing', 'rap', 'basketball' ]
console.log(child2.hobby); // [ 'sing', 'rap' ]
child1.sayHi(); // Hi

5. 组合式继承优化2

优点：

• 实现继承最有效的方式！

缺点：

• 无

function Parent(age) {
  this.name = "parent";
  this.age = age;
  this.hobby = ["sing", "rap"];
}
Parent.prototype.sayHi = function() {
  console.log("Hi");
};
function Child(age) {
  Parent.call(this, age);
  this.type = "child";
}

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

let child1 = new Child(15);
let child2 = new Child(15);

child1.hobby.push("basketball");
console.log(child1.name); // parent
console.log(child1.age); // 15
console.log(child1.type); // child
console.log(child1.hobby); // [ 'sing', 'rap', 'basketball' ]
console.log(child2.hobby); // [ 'sing', 'rap' ]
child1.sayHi(); // Hi

（完）