JavaScript中的继承艺术：ES3、ES5和ES6

2023-11-04 13:26:40

好的，我将为您生成一篇3000字的文章。

JavaScript中的继承

JavaScript 是一门动态语言，这意味着它可以很容易地创建和修改对象。这也意味着它支持多种继承方式。

在 JavaScript 中，继承是指创建一个新对象，该对象从另一个对象继承属性和方法。新对象称为子对象，而另一个对象称为父对象。

JavaScript 中的继承有三种主要类型：

在 ES3 中，继承是通过原型继承来实现的。每个对象都有一个原型对象，原型对象是该对象从其创建的构造函数继承的属性和方法的集合。

例如，以下代码创建了一个名为 Person 的构造函数：

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

Person 构造函数有一个名为 name 的属性。当我们使用 Person 构造函数创建一个新对象时，新对象将继承 name 属性。

例如，以下代码创建一个名为 john 的新对象：

var john = new Person('John');

john 对象继承了 name 属性，我们可以使用 . 运算符来访问该属性：

console.log(john.name); // John

在 ES5 中，继承是通过构造函数继承来实现的。构造函数继承允许子对象继承父对象的所有属性和方法，但它也允许子对象拥有自己的属性和方法。

例如，以下代码创建了一个名为 Student 的构造函数，它继承自 Person 构造函数：

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

Student 构造函数继承了 Person 构造函数的所有属性和方法，但它也添加了一个名为 major 的新属性。

当我们使用 Student 构造函数创建一个新对象时，新对象将继承 Person 构造函数的所有属性和方法，以及 Student 构造函数的 major 属性。

例如，以下代码创建一个名为 jane 的新对象：

var jane = new Student('Jane', 'Computer Science');

jane 对象继承了 Person 构造函数的 name 属性，以及 Student 构造函数的 major 属性。我们可以使用 . 运算符来访问这些属性：

console.log(jane.name); // Jane
console.log(jane.major); // Computer Science

在 ES6 中，继承是通过类继承来实现的。类继承与构造函数继承非常相似，但它更易于使用。

例如，以下代码创建了一个名为 Person 的类：

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

Person 类有一个名为 name 的属性。当我们使用 Person 类创建一个新对象时，新对象将继承 name 属性。

例如，以下代码创建一个名为 john 的新对象：

var john = new Person('John');

john 对象继承了 name 属性，我们可以使用 . 运算符来访问该属性：

console.log(john.name); // John

下表比较了 JavaScript 中的继承类型：