Einführung in die objektorientierte JavaScript-Programmierung Tutorial_Grundkenntnisse

Obwohl es Unterschiede zwischen objektorientiertem JavaScript und anderen Sprachen gibt, die einige Debatten ausgelöst haben, besteht kein Zweifel daran, dass JavaScript über leistungsstarke objektorientierte Programmierfunktionen verfügt

Dieser Artikel beginnt mit einer Einführung in objektorientierte Programmiersprachen. Die orientierte Programmierung beginnt, überprüft dann das JavaScript-Objektmodell und demonstriert schließlich objektorientierte Programmierkonzepte in JavaScript.

JavaScript-Rezension

Wenn Sie sich über JavaScript-Konzepte wie Variablen, Typen, Funktionen und Bereiche nicht sicher sind, können Sie „Wiedereinführung dieser Themen in JavaScript“ lesen. Sie können sich auch JavaScript 1.5 Core Guide

Objektorientierte Programmierung

ansehen

Objektorientierte Programmierung ist ein Programmierparadigma, das Abstraktionen verwendet, um Modelle zu erstellen, die auf der realen Welt basieren. Es nutzt mehrere zuvor etablierte Paradigmentechniken, darunter Modularität, Polymorphismus und Kapselung. Heutzutage unterstützen viele gängige Programmiersprachen (wie Java, JavaScript, C#, C, Python, PHP, Ruby und Objective-C) die objektorientierte Programmierung (OOP).

Objektorientierte Programmierung kann als Verwendung von Sammlungen kollaborierender Objekte zum Entwerfen von Software angesehen werden, im Gegensatz zur traditionellen Sichtweise von Programmen als Sammlungen von Funktionen oder reduziert auf Listen von Computeranweisungen. Bei der objektorientierten Programmierung verfügt jedes Objekt über die folgenden Fähigkeiten: Nachrichten empfangen, Daten verarbeiten und Nachrichten an andere Objekte senden. Jedes Objekt kann als unabhängige kleine Maschine mit unterschiedlichen Rollen oder Verantwortlichkeiten betrachtet werden.
Objektorientierte Programmierung soll eine größere Flexibilität und Wartbarkeit bei der Programmierung fördern und erfreut sich in der Softwareentwicklung im großen Maßstab großer Beliebtheit. Aufgrund seiner Betonung der Modularität soll objektorientierter Code die Entwicklung einfacher und später leichter verständlich machen und das Analysieren, Codieren und Verstehen komplexer Situationen und Schritte erleichtern als weniger modulare direkte Programmiermethoden.

Sonderbedingungen

Klasse
~ Definiert die Eigenschaften des Objekts.
Objekt
~ Instanz der Klasse.
Eigenschaft
~ Charakteristik eines Objekts, z. B. Farbe.
Methode
~ Einige Objektfähigkeiten, wie zum Beispiel Gehen.
Konstruktor
~ Methode, die während der Instanziierung aufgerufen wird.
Vererbung
~ Eine Klasse kann Eigenschaften von einer anderen Klasse erben.
Kapselung
~ Eine Klasse definiert nur die Eigenschaften des Objekts und eine Methode definiert nur, wie die Methode ausgeführt wird.
Abstraktion
~ Kombiniert komplexe Vererbung, Methoden und Eigenschaften eines Objekts und muss in der Lage sein, ein bestimmtes Realitätsmodell zu simulieren.
Polymorphismus
~ Verschiedene Klassen können dieselben Methoden oder Eigenschaften definieren.
Eine weitere Beschreibung der objektorientierten Programmierung finden Sie im Wikipedia-Eintrag zur objektorientierten Programmierung.

Prototypbasierte Programmierung

Prototypbasierte Programmierung ist ein objektorientierter Programmierstil, bei dem es keine Klassen gibt und die Wiederverwendung von Verhalten (in klassenbasierten Sprachen Vererbung genannt) als Prototypen getarnt wird. Dies geschieht unter Verwendung vorhandener Objekte. Dieses Muster wird auch als klassenlose, prototyporientierte oder instanzbasierte Programmierung bezeichnet.
Das ursprüngliche (und sehr kanonische) Beispiel einer prototypbasierten Sprache ist die von David Ungar und Randall Smith entwickelte Programmiersprache Self. Allerdings ist dieser Stil der klassenlosen Programmierung in letzter Zeit immer beliebter geworden und wurde von mehreren Programmiersprachen wie JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (bei Verwendung des Viewer-Frameworks zur Manipulation morphischer Komponenten) übernommen. und mehrere andere Sprachen.

Objektorientierte JavaScript-Programmierung

Kernobjekte

JavaScript enthält mehrere Objekte, zum Beispiel Mathe-, Objekt-, Array- und String-Objekte. Das folgende Beispiel zeigt, wie man mit der random()-Methode des Math-Objekts eine Zufallszahl erhält.

Code kopieren Der Code lautet wie folgt:

alert(Math.random());

Tipp: Bei diesem und allen anderen Beispielen wird davon ausgegangen, dass die Funktionsnamenwarnung global definiert wurde (da die Warnung in Webbrowsern enthalten ist). Die Alarmfunktion ist eigentlich kein Teil von JavaScript selbst.

Eine Liste der JavaScript-Kernobjekte finden Sie unter JavaScript 1.5-Kernreferenz: Globale Objekte.

Jedes Objekt in JavaScript ist eine Instanz eines Object-Objekts und erbt daher alle seine Eigenschaften und Methoden.

Benutzerdefinierte Objekte

Die Klasse

JavaScript ist eine prototypbasierte Sprache, die keine Klassenanweisungen enthält, wie sie in C oder Java zu finden sind. Dies kann manchmal Programmierer verwirren, die an Sprachen mit Klassenanweisungen gewöhnt sind. Allerdings verwendet JavaScript Funktionen als Klassen. Das Definieren einer Klasse ist so einfach wie das Definieren einer Funktion. Im folgenden Beispiel definieren wir eine neue Klasse namens Person.

Code kopieren Der Code lautet wie folgt:

Funktion Person() { }

Das Objekt (Klasseninstanz)

Um eine neue Instanz des obj-Objekts zu erstellen, verwenden wir die Anweisung new obj und weisen das Ergebnis zu (sein Typ ist obj). Geben Sie ihm ein Variable, damit später darauf zugegriffen werden kann.
Im folgenden Beispiel definieren wir zunächst eine Klasse namens Person und erstellen dann zwei Instanzen (person1 und person2).

Code kopieren Der Code lautet wie folgt:

function Person() {}
var person1 = neue Person( );
var person2 = neue Person();

Siehe auch die neue Instanziierungsalternative Object.create.

Der Konstrukteur

Der Konstruktor wird bei der Instanziierung aufgerufen (in dem Moment, in dem eine Objektinstanz erstellt wird). Ein Konstruktor ist eine Methode einer Klasse. In JavaScript wird eine Funktion als Konstruktor des Objekts verwendet. Daher ist es nicht erforderlich, eine Konstruktormethode explizit zu definieren. Jedes in einer Klasse deklarierte Verhalten wird ausgeführt, wenn es instanziiert wird.

Der Konstruktor wird verwendet, um Objekteigenschaften festzulegen oder Methoden aufzurufen, um das Objekt für die Verwendung vorzubereiten. Später in diesem Artikel erfahren Sie, wie Sie Klassenmethoden und ihre Definitionen mit einer anderen Syntax hinzufügen.

Im folgenden Beispiel zeigt der Konstruktor der Person-Klasse bei der Instanziierung einer Person ein Warnfeld an.

Code kopieren Der Code lautet wie folgt:

Funktion Person() {
Warnung ('Person instanziiert');
}
var person1 = new Person();
var person2 = new Person();

Die Eigenschaft (Objektattribut)

Eigenschaften sind Variablen, die in einer Klasse enthalten sind. Jede Objektinstanz verfügt über diese Eigenschaften. Damit die Vererbung ordnungsgemäß funktioniert, sollten Eigenschaften im Prototypattribut der Klasse (Funktion) festgelegt werden.
Das Manipulieren von Attributen in einer Klasse erfolgt über das Schlüsselwort this, das auf das aktuelle Objekt verweist. Der Zugriff (Lesen oder Schreiben) einer Eigenschaft von außerhalb einer Klasse erfolgt über die folgende Syntax: InstanceName.Property; Dies ist dieselbe Syntax, die in C, Java und einigen anderen Sprachen verwendet wird. (Verwenden Sie die this.Property-Syntax innerhalb der Klasse, um den Eigenschaftswert abzurufen oder festzulegen.)

Im folgenden Beispiel definieren wir das Geschlechtsattribut für die Person-Klasse und definieren das Attribut dann während der Initialisierung.

Code kopieren Der Code lautet wie folgt:

Funktion Person(Geschlecht) {
this.gender = Geschlecht;
Alert('Person instanziiert');
}
var person1 = neue Person('Männlich'); // Männlich: männlich
var person2 = neue Person('Weiblich') ; // Weiblich: 女
//Geschlecht von Person1 anzeigen
alert('person1 ist ein ' person1.gender); // Person1 ist ein Mann

Die Methoden

Methoden folgen der gleichen Logik wie Eigenschaften; der Unterschied besteht darin, dass sie Funktionen sind und als Funktionen definiert sind. Der Aufruf einer Methode ähnelt dem Zugriff auf eine Eigenschaft, Sie fügen jedoch () am Ende des Methodennamens hinzu, der möglicherweise Argumente enthält. Das Definieren einer Methode bedeutet, einer benannten Eigenschaft der Prototypeigenschaft der Klasse eine Funktion zuzuweisen. Der der Funktion zugewiesene Name ist der Name, unter dem die Methode für das Objekt aufgerufen wird.
Im folgenden Beispiel definieren und verwenden wir die Methode sayHello() für die Klasse Person.

Code kopieren Der Code lautet wie folgt:

Funktion Person(Geschlecht) {
this.gender = Geschlecht;
Alert('Person instanziiert');
}
Person.prototype.sayHello = function() {
Alert('hello');
};
var person1 = new Person('Male');
var person2 = new Person('Female'); // SayHello-Methode von Person aufrufen.
person1.sayHello(); // hallo

In JavaScript sind Methoden gewöhnliche Funktionsobjekte, die als Eigenschaften an eine Klasse/ein Objekt gebunden sind, was bedeutet, dass sie „außerhalb des Kontexts“ aufgerufen werden können. Betrachten Sie den folgenden Beispielcode:

Kopieren Sie den Code Der Code lautet wie folgt:

Funktion Person (Geschlecht) {
this.gender = gender;
}
Person.prototype.sayGender = function() {
warning(this.gender);
};
var person1 = new Person(' Male');
var genderTeller = person1.sayGender;
person1.sayGender(); // alarmiert 'Male'
genderTeller(); genderTeller === person1 .sayGender); // Alerts true
alert(genderTeller === Person.prototype.sayGender); // Alerts true

Dieses Beispiel demonstriert mehrere Konzepte gleichzeitig. Dies zeigt, dass es in JavaScript keine „pro-Objekt-Methoden“ gibt, da alle Verweise auf die Methode auf genau dieselbe Funktion verweisen, die wir ursprünglich im Prototyp definiert haben. Wenn eine Funktion als Methode (oder genauer gesagt als Eigenschaft) aufgerufen wird, „bindet“ JavaScript den aktuellen „Objektkontext“ an die spezifische „diese“ Variable. Dies entspricht dem Aufruf der Methode „call“ des Funktionsobjekts wie folgt:

Kopieren Sie den Code Der Code lautet wie folgt :

genderTeller.call(person1); //alerts 'Male'e

Weitere Informationen finden Sie unter

Function.call und Function.apply

Vererbung

Vererbung ist eine Methode zum Erstellen einer Klasse, die eine spezialisierte Version einer oder mehrerer Klassen ist. (JavaScript unterstützt nur die Vererbung einzelner Klassen.) Diese spezialisierte Klasse wird oft als untergeordnete Klasse bezeichnet, und die anderen Klassen werden oft als übergeordnete Klasse bezeichnet. Um in JavaScript die Vererbung abzuschließen, müssen Sie der Unterklasse eine Instanz der übergeordneten Klasse zuweisen und dann die Unterklasse spezialisieren.

Tipp: Da JavaScript den „prototype.constructor“ (Konstruktor des Prototyps) einer Unterklasse nicht erkennt, siehe

Core JavaScript 1.5 Core Reference: Global Objects:Object:prototype Attribut, daher müssen wir diesen Wert manuell angeben .

Im folgenden Beispiel definieren wir die Klasse Student als Unterklasse von Person. Dann definieren wir die Methode sayHello() neu und fügen die Methode sayGoodBye() hinzu.

Code kopieren Der Code lautet wie folgt:

// Personenklasse definieren
function Person() {}
Person.prototype.walk = function() {
warning('I am walk!');
} ;
Person.prototype.sayHello = function() {
alarm('hello');
};
// Definiere die Student-Klasse
function Student() {
// Rufen Sie den Konstruktor der übergeordneten Klasse auf
Person.call(this);
}
// Inherit Person
Student.prototype = new Person(); // Korrigieren Sie den Konstruktorzeiger, da er auf Person zeigt
Student.prototype.constructor = Student; // Ersetzen Sie die sayHello-Methode
Student.prototype.sayHello = function() {
warning('hi, I am a student');
}
// sayGoodBye-Methode hinzufügen
Student.prototype.sayGoodBye = function() {
alarm('goodBye');
}
var student1 = new Student();
student1. sayHello( );
student1.walk();
studierender / wahr

Verpackung
Im obigen Beispiel muss Student nicht wissen, wie die walk()-Methode der Person-Klasse implementiert ist, kann diese Methode jedoch trotzdem verwenden. Die Student-Klasse muss diese Methode nicht explizit definieren, es sei denn, wir möchten ändere es. Dies nennt man Kapselung, wobei jede Klasse die Methoden ihrer übergeordneten Klasse erbt und nur definiert, was sie ändern möchte.

Zusammenfassung

Abstraktion ist ein Mechanismus, der die Modellierung des aktuellen Teils des angesprochenen Problems ermöglicht. Dies kann durch Vererbung (Spezialisierung) oder Zusammensetzung erreicht werden. JavaScript erreicht eine Spezialisierung durch Vererbung und Zusammensetzung, indem es Klasseninstanzen zu Eigenschaftswerten anderer Objekte werden lässt.

Die Function-Klasse von JavaScript erbt von der Object-Klasse (dies veranschaulicht die Spezialisierung des Modells), und die Function.prototype-Eigenschaft ist eine Instanz von Object (dies veranschaulicht die Zusammensetzung).

Code kopieren Der Code lautet wie folgt:var foo = function() {};

Alert(' foo ist eine Funktion: ' (foo Instanz der Funktion));

alert('foo.prototype ist ein Objekt: ' (foo.prototype Instanz des Objekts));

Polymorph

So wie alle Methoden und Eigenschaften innerhalb von Prototypattributen definiert werden, können verschiedene Klassen Methoden mit demselben Namen definieren; der Umfang der Methoden ist auf die Klasse beschränkt, in der sie definiert sind. Dies gilt nur, wenn zwischen den beiden Klassen keine Eltern-Kind-Beziehung besteht (wenn eine Klasse nicht von anderen Klassen in der Vererbungskette erbt).

Tipps

Die in diesem Artikel vorgeschlagenen Techniken zur Implementierung der objektorientierten Programmierung sind nicht nur auf JavaScript anwendbar, da es hinsichtlich der Durchführung der objektorientierten Programmierung sehr flexibel ist.

Auch hier verwenden die hier vorgestellten Techniken weder Sprach-Hacks noch imitieren sie Implementierungen der Objekttheorie in anderen Sprachen.

Es gibt andere fortgeschrittenere objektorientierte Programmiertechniken in JavaScript, diese gehen jedoch über den Rahmen dieses Einführungsartikels hinaus.