Beherrschen Sie objektorientierte Programmierung und Vererbung in JavaScript

In der modernen Webentwicklung ist JavaScript zu einer unverzichtbaren Sprache geworden. Unter diesen sind objektorientierte Programmierung (OOP) und Vererbung zwei wichtige Aspekte in der JavaScript-Entwicklung. Dieser Artikel führt Leser in die objektorientierte Programmierung und Vererbung in JavaScript ein und gibt konkrete Codebeispiele.

1. Objektorientierte Programmierung

Objektorientierte Programmierung ist eine Programmiermethode, die Objekte als Grundeinheit des Programms verwendet und Daten und Datenoperationen kapselt. In JavaScript können wir Objekte und Funktionen verwenden, um objektorientierte Programmierung zu implementieren.

1. Objekte

In JavaScript ist ein Objekt eine Sammlung von Schlüssel-Wert-Paaren. Wir können geschweifte Klammern verwenden, um ein Objekt zu definieren:

var person = {
  name: 'Tom',
  age: 18,
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

Im obigen Code definieren wir ein Objekt mit drei Eigenschaften. Unter diesen sind name und age Grundattribute und sayHello ist eine Methode. Auf die Eigenschaften und Methoden eines Objekts kann zugegriffen werden über: name和age是基本属性，sayHello是一个方法。可以通过以下方式访问对象的属性和方法：

console.log(person.name); // 输出 'Tom'
person.sayHello(); // 输出 'Hello, my name is Tom'

2. 函数

在JavaScript中，函数是一种特殊的对象。我们可以使用函数来创建对象、封装操作和定义类。下面是一个使用函数来创建对象的示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  }
}

var person = new Person('Tom', 18);
person.sayHello(); // 输出 'Hello, my name is Tom'

在上面的代码中，我们定义了一个Person函数来创建一个包含name和age属性的对象。这里使用了this关键字来代表当前的对象。通过new Person('Tom', 18)语句来创建一个新的Person对象。

二、继承

继承是一种实现代码复用的方式。在JavaScript中，我们可以使用原型链来实现继承。

1. 原型链

JavaScript中的对象有一个指向其原型对象的指针。我们可以通过原型对象来实现继承，即子对象继承父对象的属性和方法。

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

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

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

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

var student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

在上面的代码中，我们定义了一个Person函数和一个Student函数。使用Object.create()来创建一个新的对象作为Student.prototype，这个新的对象的原型为Person.prototype。这样，Student函数就可以继承Person函数的属性和方法。

使用call()函数来继承Person的属性和方法：Person.call(this, name, age)，这里的this表示的是Student函数创建的对象。

最后，将Student.prototype的constructor属性指向Student函数本身，这样我们在使用new关键字创建新的Student对象时，就可以调用Student自身的构造函数。

2. ES6中的继承

在ES6中，我们可以使用class关键字来定义类。class关键字封装了function和prototype两个部分，让我们更方便地定义类。

下面是一个使用ES6定义继承的例子：

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

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

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

let student = new Student('Tom', 18, 3);
student.sayHello(); // 输出 'Hello, my name is Tom'

在上面的代码中，我们使用class关键字来定义Person和Student两个类。使用extends关键字来实现继承。

使用super关键字调用父类的构造函数和方法。在Student的构造函数中，使用super(name, age)来调用Person的构造函数，实现了对父类成员属性的继承。使用super关键字调用父类的方法：super.sayHello()rrreee

Funktion

In JavaScript ist eine Funktion eine besondere Art von Objekt. Wir können Funktionen verwenden, um Objekte zu erstellen, Operationen zu kapseln und Klassen zu definieren. Hier ist ein Beispiel für die Verwendung einer Funktion zum Erstellen eines Objekts:

rrreee🎜 Im obigen Code definieren wir eine Person-Funktion, um ein Objekt zu erstellen, das name und enthält AlterDas Objekt der Eigenschaft. Das Schlüsselwort this wird hier verwendet, um das aktuelle Objekt darzustellen. Erstellen Sie ein neues Person-Objekt mit der Anweisung new Person('Tom', 18). 🎜🎜2. Vererbung🎜🎜Vererbung ist eine Möglichkeit, Code wiederzuverwenden. In JavaScript können wir die Prototypenkette verwenden, um die Vererbung zu implementieren. 🎜🎜🎜Prototypenkette🎜🎜🎜Ein Objekt in JavaScript hat einen Zeiger auf sein Prototypobjekt. Wir können die Vererbung über Prototypobjekte implementieren, das heißt, untergeordnete Objekte erben die Eigenschaften und Methoden von übergeordneten Objekten. 🎜rrreee🎜Im obigen Code definieren wir eine Person-Funktion und eine Student-Funktion. Verwenden Sie Object.create(), um ein neues Objekt als Student.prototype zu erstellen. Der Prototyp dieses neuen Objekts ist Person.prototype. Auf diese Weise kann die Funktion Student die Eigenschaften und Methoden der Funktion Person erben. 🎜🎜Verwenden Sie die Funktion call(), um die Eigenschaften und Methoden von Person zu erben: Person.call(this, name, age), wobei this stellt das von der Funktion Student erstellte Objekt dar. 🎜🎜Zum Schluss verweisen Sie das Attribut constructor von Student.prototype auf die Funktion Student selbst, sodass wir die Funktion new verwenden. code>-Taste Beim Erstellen eines neuen <code>Student-Objekts können Sie den Konstruktor von Student selbst aufrufen. 🎜
🎜Vererbung in ES6🎜🎜🎜In ES6 können wir das Schlüsselwort class verwenden, um Klassen zu definieren. Das Schlüsselwort class kapselt die Teile function und prototype, sodass wir Klassen einfacher definieren können. 🎜🎜Das Folgende ist ein Beispiel für die Verwendung von ES6 zum Definieren der Vererbung: 🎜rrreee🎜Im obigen Code verwenden wir das Schlüsselwort class, um Person und StudentZwei Klassen. Verwenden Sie das Schlüsselwort <code>extends, um die Vererbung zu implementieren. 🎜🎜Verwenden Sie das Schlüsselwort super, um den Konstruktor und die Methoden der übergeordneten Klasse aufzurufen. Verwenden Sie im Konstruktor von Student super(name, age), um den Konstruktor von Person aufzurufen und die Änderung der übergeordneten Klassenmitgliedsattribute zu realisieren . erben. Verwenden Sie das Schlüsselwort super, um die Methode der übergeordneten Klasse aufzurufen: super.sayHello() und realisieren Sie so die Vererbung der Methode der übergeordneten Klasse. 🎜🎜3. Zusammenfassung🎜🎜In diesem Artikel haben wir die objektorientierte Programmierung und Vererbung in JavaScript eingeführt. Implementieren Sie objektorientierte Programmierung mithilfe von Objekten und Funktionen und implementieren Sie die Vererbung mithilfe von Prototypketten und ES6-Vererbung. Ich hoffe, dass es für alle hilfreich ist, die JavaScript-Programmierung zu verstehen. 🎜

Das obige ist der detaillierte Inhalt vonBeherrschen Sie objektorientierte Programmierung und Vererbung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!