JavaScript 继承

JavaScript 继承

一. 原型链继承

function Parent() {
  this.name = 'parent';
  this.friends = ['petter', 'july', 'jerry'];
}

Parent.prototype.getName = function () {
  console.log(this.name);
};

function Child() {
  this.name = 'child';
}

Child.prototype = new Parent();

const child1 = new Child();
child1.friends.push('tom');
console.log(child1.friends);
const child2 = new Child();
console.log(child2.friends);

特点：

• 父类在构造函数上的方法，子类都能访问到。

缺点：

• 来自原型对象的所有属性被所有实例共享，如在上述例子中 child1 修改 friends 会影响 child2 的 friends ;
• 创建子类实例时，无法向父类的构造函数传参。

二. 构造函数继承

function Parent(name, age) {
  this.name = name;
  this.age = age;
  this.friends = ['petter', 'july', 'jerry'];
  this.getAge = function () {
    return this.age;
  };
}

Parent.prototype.skill = 'jump';

Parent.prototype.getName = function () {
  return this.name;
};

function Child(name, age) {
  Parent.call(this, name, age);
  this.hobbies = ['play', 'eat'];
}

const child1 = new Child('child1', 18);
const child2 = new Child('child2', 20);
console.log(child1.name);
console.log(child2.name);
console.log(child1.skill);
console.log(child1.getName());

特点：

• 避免原型链继承中属性共享的问题，每个子类实例都有属于自己的属性；
• 创建子类实例时，可以向父类传递参数。

缺点：

• 实例只是子类的实例，不是父类实例；
• 只能继承父类实例的属性和方法，不能继承父类原型对象的属性和方法；
• 无法实现函数复用，每次创建实例都会创建一个函数，影响性能。

三. 组合继承（常用）

function Parent(name) {
  this.name = name;
  this.friends = ['petter', 'july', 'jerry'];
}

Parent.prototype.getName = function () {
  return this.name;
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

const child1 = new Child('child1', 18);
const child2 = new Child('child2', 20);

特点：

• 融合了原型链继承和借用构造函数继承的优点，是 JavaScript 中最常用的继承模式。

缺点：

• 调用了两次父类构造函数，生成了两份父类实例。

四. 原型式继承（Object.create）

const person = {
  name: 'parent',
  friends: ['petter', 'july', 'jerry'],
};

const person1 = Object.create(person);
const person2 = Object.create(person);

person1.name = 'child1';
person2.name = 'child2';

person1.friends.push('tom');

console.log(person1.friends);
console.log(person2.friends);

特点：

• 没有严格意义上的构造函数，借助原型可以基于已有对象创建新对象。

缺点：

• 所有实例共享原型对象上的属性，修改一个实例的属性，会同时影响其他实例。

五. 寄生式继承

const person = {
  name: 'parent',
  friends: ['petter', 'july', 'jerry'],
};

function createObj(original) {
  var clone = Object.create(original);
  clone.getName = function () {
    return this.name;
  };
  return clone;
}

const obj = createObj(person);

特点：

• 寄生式继承是基于原型式继承的变体，把原型式继承操作放到了函数之中。

缺点：

• 与原型式继承一样，所有实例共享原型对象上的属性，修改一个实例的属性，会同时影响其他实例。
• 无法实现函数复用，每次创建实例都要重新创建函数，影响性能。

六. 寄生组合式继承

function Parent(name) {
  this.name = name;
  this.friends = ['petter', 'july', 'jerry'];
}

Parent.prototype.getName = function () {
  return this.name;
};

function Child(name, age) {
  // 继承属性
  Parent.call(this, name);
  this.age = age;
}

function inheritPrototype(parent, child) {
  var prototype = Object.create(parent.prototype);
  prototype.constructor = Child;
  child.prototype = prototype;
}

// 继承方法
inheritPrototype(Parent, Child);

const child1 = new Child('child1', 18);
const child2 = new Child('child2', 20);

特点：

• 寄生组合式继承是一种继承方式，结合了寄生式继承和组合继承的优点，以解决组合继承的问题。通过构造函数继承属性，通过寄生式继承继承方法，是引用类型最理性的继承范式。

七. ES6 的继承

class Parent {}
class Child extends Parent {
  constructor(name, age, friends) {
    super(name, age);
    this.friends = friends;
  }
  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString();
  }
}

特点：

• 通过 class 关键字定义类，使用 extends 关键字实现继承，并且支持 super 关键字。