javascript继承六种方式，用通俗易懂的语言深入解析！

2023-09-17 08:21:19

javascript继承六种方式，用通俗易懂的语言深入解析！

在javascript中，继承是一种重要的概念，它允许我们创建新的对象，这些对象可以从现有对象继承属性和方法。继承使我们能够重用代码，并创建更复杂的程序。

javascript的继承方式有很多种，每种方式都有其优缺点。本文将详细介绍javascript的六种继承方式：

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

原型继承

原型继承是javascript中最简单的一种继承方式。它允许我们通过创建一个新对象并将它的原型指向另一个对象来创建新的对象。

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

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

var john = new Person("John");
john.greet(); // Hello, my name is John

在上面的示例中，我们创建了一个名为Person的构造函数，它有一个名为name的属性和一个名为greet的方法。然后我们创建了一个名为john的新对象，并将它的原型指向Person.prototype。这使得john对象能够访问Person构造函数的所有属性和方法。

原型继承的优点是它简单易用，而且它不需要创建新的构造函数。缺点是它不能传递参数给父对象，而且它不能重写父对象的方法。

构造函数继承

构造函数继承是javascript中另一种常见的继承方式。它允许我们通过创建一个新的构造函数并让它调用父构造函数来创建新的对象。

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

Person.prototype.greet = 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;

var john = new Student("John", "Computer Science");
john.greet(); // Hello, my name is John
console.log(john.major); // Computer Science

在上面的示例中，我们创建了一个名为Person的构造函数和一个名为Student的构造函数。Student构造函数继承了Person构造函数的属性和方法，并添加了一个新的属性major。

构造函数继承的优点是它允许我们传递参数给父对象，而且它允许我们重写父对象的方法。缺点是它比原型继承更复杂，而且它需要创建新的构造函数。

组合继承

组合继承是原型继承和构造函数继承的结合。它允许我们通过创建一个新的构造函数并让它调用父构造函数，并将它的原型指向父构造函数的原型来创建新的对象。

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

Person.prototype.greet = 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;

Student.prototype.study = function() {
  console.log("I am studying " + this.major);
};

var john = new Student("John", "Computer Science");
john.greet(); // Hello, my name is John
john.study(); // I am studying Computer Science

在上面的示例中，我们创建了一个名为Person的构造函数和一个名为Student的构造函数。Student构造函数继承了Person构造函数的属性和方法，并添加了一个新的属性major和一个新的方法study。

组合继承的优点是它允许我们传递参数给父对象，而且它允许我们重写父对象的方法。缺点是它比原型继承和构造函数继承更复杂，而且它需要创建新的构造函数。

寄生继承

寄生继承是一种不涉及构造函数的继承方式。它允许我们通过创建一个新对象并将它的原型指向另一个对象来创建新的对象。

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

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

var john = {};
Object.setPrototypeOf(john, Person.prototype);
john.name = "John";
john.greet(); // Hello, my name is John

在上面的示例中，我们创建了一个名为Person的构造函数。然后我们创建了一个名为john的新对象，并将它的原型指向Person.prototype。这使得john对象能够访问Person构造函数的所有属性和方法。

寄生继承的优点是它简单易用，而且它不需要创建新的构造函数。缺点是它不能传递参数给父对象，而且它不能重写父对象的方法。

寄生组合继承

寄生组合继承是寄生继承和组合继承的结合。它允许我们通过创建一个新对象并将它的原型指向另一个对象，然后调用父构造函数来创建新的对象。

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

Person.prototype.greet = 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;

Student.prototype.study = function() {
  console.log("I am studying " + this.major);
};

var john = {};
Object.setPrototypeOf(john, Student.prototype);
john.name = "John";
john.major = "Computer Science";
john.greet(); // Hello, my name is John
john.study(); // I am studying Computer Science

寄生组合继承的优点是它允许我们传递参数给父对象，而且它允许我们重写父对象的方法。缺点是它比原型继承、构造函数继承和寄生继承更复杂，而且它需要创建新的构造函数。

ES6 class继承

ES6 class继承是javascript中一种新的继承方式。它允许我们通过使用class来创建新的类，然后通过使用extends关键字来继承另一个类。

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

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

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

  study() {
    console.log("I am studying " + this.major);
  }
}

var john = new Student("John", "Computer Science");
john.greet(); // Hello, my name is John
john.study(); // I am studying Computer Science