js继承的6种方式详解

以下是js继承的六种方式的详细攻略。

1. 原型链继承

原型链继承是JavaScript中最基本的继承方式之一，它通过将父类的实例对象作为子类的原型对象来实现继承。这种方式的缺点是，所有子类实例对象共享同一个原型对象，当父类原型对象中的引用类型属性被修改时，所有子类实例对象中对应属性的值都会同时改变，这个缺点也被称之为“原型污染”问题。

示例代码如下：

function Person(name) {
  this.name = name;
  this.friends = ["Ben", "Tom"];
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

function Student() {}

Student.prototype = new Person("Jack");
Student.prototype.constructor = Student;

var s1 = new Student();
s1.friends.push("Mike");
console.log(s1.friends); // 输出 ["Ben", "Tom", "Mike"]

var s2 = new Student();
console.log(s2.friends); // 输出 ["Ben", "Tom", "Mike"]

2. 构造函数继承

构造函数继承是通过借用父类构造函数来实现继承。这种方式解决了原型链继承中“原型污染”的问题，但带来的另外一个问题是，每个子类实例对象都会拥有一份自己的父类属性副本，而且无法继承父类原型对象上的属性和方法。

示例代码如下：

function Person(name) {
  this.name = name;
  this.friends = ["Ben", "Tom"];
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

var s1 = new Student("Jack", 1);
s1.friends.push("Mike");
console.log(s1.friends); // 输出 ["Ben", "Tom", "Mike"]

var s2 = new Student("Tom", 2);
console.log(s2.friends); // 输出 ["Ben", "Tom"]

3. 组合继承

组合继承是原型链继承和构造函数继承的组合使用，它通过借用父类构造函数来继承父类实例属性，通过将父类构造函数的实例对象作为子类原型对象来继承父类原型属性，从而既解决了“原型污染”问题，又避免了每个子类实例对象都拥有一份自己的父类属性副本的问题。

示例代码如下：

function Person(name) {
  this.name = name;
  this.friends = ["Ben", "Tom"];
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

Student.prototype = new Person();
Student.prototype.constructor = Student;

var s1 = new Student("Jack", 1);
s1.friends.push("Mike");
console.log(s1.friends); // 输出 ["Ben", "Tom", "Mike"]

var s2 = new Student("Tom", 2);
console.log(s2.friends); // 输出 ["Ben", "Tom"]

4. 原型式继承

原型式继承是借助原型链继承的方式来实现对象之间的继承关系。它通过创建一个临时性的构造函数，将传入的对象作为这个构造函数的原型对象来创建新的对象，从而实现继承。

示例代码如下：

var person = {
  name: "Jack",
  friends: ["Ben", "Tom"]
};

var student = Object.create(person);
student.grade = 1;

var student2 = Object.create(person);
student2.grade = 2;

student.friends.push("Mike");
console.log(student.friends); // 输出 ["Ben", "Tom", "Mike"]

console.log(student2.friends); // 输出 ["Ben", "Tom", "Mike"]

5. 寄生式继承

寄生式继承是基于原型式继承的一种增强版，它利用一个虚构的构造函数，在原型式继承的基础上添加了一些新的属性和方法，并返回这个虚构的构造函数。

示例代码如下：

function createStudent(person, grade) {
  var student = Object.create(person);
  student.grade = grade;

  student.sayGrade = function() {
    console.log(this.grade);
  };

  return student;
}

var person = {
  name: "Jack",
  friends: ["Ben", "Tom"]
};

var student = createStudent(person, 1);
student.friends.push("Mike");
console.log(student.friends); // 输出 ["Ben", "Tom", "Mike"]

6. 寄生组合式继承

寄生组合式继承是通过组合继承和寄生式继承的方式来实现继承。这种方式解决了组合继承中重复执行父类构造函数的问题，并且避免了父类构造函数中实例属性被重复定义的问题。

示例代码如下：

function Person(name) {
  this.name = name;
  this.friends = ["Ben", "Tom"];
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

function inheritPrototype(subType, superType) {
  var prototype = Object.create(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

inheritPrototype(Student, Person);

var s1 = new Student("Jack", 1);
s1.friends.push("Mike");
console.log(s1.friends); // 输出 ["Ben", "Tom", "Mike"]

var s2 = new Student("Tom", 2);
console.log(s2.friends); // 输出 ["Ben", "Tom"]

希望以上内容能够帮助您更好地理解JavaScript中的继承方式。