JS个人学习(9)——JS常见的六种继承方式

前端

2023-12-12 07:53:06

前言

JavaScript是一种面向对象的编程语言，继承是面向对象编程中的一项重要特性。继承允许我们创建新对象，并从现有的对象继承属性和方法。这使得我们可以复用代码，并创建更复杂的程序。

JavaScript中的六种继承方式

在JavaScript中，有六种常见的继承方式：

原型链继承
构造函数继承
组合继承
寄生继承
寄生组合继承
ES6继承

原型链继承

原型链继承是JavaScript中最基本的一种继承方式。它利用了JavaScript中对象的原型链机制。每个对象都有一个原型对象，原型对象又可能有自己的原型对象，如此一层一层向上追溯，直到到达Object对象。

当我们创建新对象时，这个新对象会自动继承其原型对象的所有属性和方法。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('John');

person.sayHello(); // Hello, my name is John

在这个例子中，Person函数是一个构造函数，它创建了一个名为person的新对象。person对象继承了Person.prototype对象的所有属性和方法，因此它可以调用sayHello方法。

构造函数继承

构造函数继承是另一种常见的继承方式。它通过在子类的构造函数中调用父类的构造函数来实现继承。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

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

Student.prototype = Object.create(Person.prototype);

const student = new Student('John', 'Computer Science');

student.sayHello(); // Hello, my name is John

在这个例子中，Student函数是一个构造函数，它继承了Person函数的属性和方法。在Student函数的构造函数中，我们调用了Person函数的构造函数，并将this作为参数传递给它。这使得Student对象可以继承Person对象的所有属性和方法。

组合继承

组合继承是构造函数继承和原型链继承的结合。它通过在子类的构造函数中调用父类的构造函数，并在子类的原型对象中设置父类的原型对象来实现继承。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student = new Student('John', 'Computer Science');

student.sayHello(); // Hello, my name is John

在这个例子中，Student函数继承了Person函数的属性和方法。在Student函数的构造函数中，我们调用了Person函数的构造函数，并将this关键字作为参数传递给它。这使得Student对象可以继承Person对象的所有属性和方法。在Student函数的原型对象中，我们设置了Person函数的原型对象，这使得Student对象可以访问Person函数的原型对象中的属性和方法。

寄生继承

寄生继承是一种不使用构造函数的继承方式。它通过创建一个新对象，并将父对象的所有属性和方法复制到新对象中来实现继承。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const student = Object.create(Person.prototype);
student.name = 'John';
student.major = 'Computer Science';

student.sayHello(); // Hello, my name is John

在这个例子中，student对象是一个新对象，它继承了Person函数的原型对象的所有属性和方法。我们通过调用Object.create()方法，并将Person.prototype对象作为参数传递给它来创建student对象。这使得student对象可以访问Person函数的原型对象中的属性和方法。

寄生组合继承

寄生组合继承是寄生继承和构造函数继承的结合。它通过在子类的原型对象中设置父类的原型对象，并在子类的构造函数中调用父类的构造函数来实现继承。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student = new Student('John', 'Computer Science');

student.sayHello(); // Hello, my name is John

在这个例子中，Student函数继承了Person函数的属性和方法。在Student函数的原型对象中，我们设置了Person函数的原型对象，这使得Student对象可以访问Person函数的原型对象中的属性和方法。在Student函数的构造函数中，我们调用了Person函数的构造函数，并将this关键字作为参数传递给它。这使得Student对象可以继承Person对象的所有属性和方法。

ES6继承

ES6中引入了新的继承语法，它使用extends关键字来实现继承。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }
}

const student = new Student('John', 'Computer Science');

student.sayHello(); // Hello, my name is John