15-minütiges objektorientiertes JavaScript-Tutorial

Diese Anleitung wird Ihnen dabei helfen, in kürzester Zeit schönen objektorientierten JavaScript-Code zu schreiben, versprochen! Das Erlernen des Schreibens prägnanten JavaScript-Codes ist für die Entwicklung eines Entwicklers sehr wichtig. Mit dem Aufkommen von Technologien wie Node.js können Sie JavaScript-Code jetzt sogar zum Abfragen persistenter Datenbanken wie MongoDB verwenden Datenspeicherung.
Jetzt beginnen Sie mit dem Schreiben von Object Oriented JS (OO JS). Wenn Sie Fragen haben oder ich etwas verpasst habe, lassen Sie es mich in den Kommentaren unten wissen.
Wörtliche Notation
Die wörtliche Notation ist nur eine Möglichkeit, Objekte in JavaScript zu erstellen, und ja, es gibt mehr als eine Möglichkeit. Die Literalnotation ist die bevorzugte Methode, wenn Sie planen, eine Objektinstanz zu erstellen.
var bill = {};
Der obige Code ist nicht sehr nützlich, er erstellt lediglich ein leeres Objekt. Fügen wir diesem Objekt dynamisch einige Eigenschaften und Methoden hinzu.
bill.name = "Bill E Goat";
bill.sound = function() {
console.log( 'bahhh!' );
};
Hier haben wir „ name“ hinzugefügt "-Attribut hinzugefügt und den Wert „Bill E Goat“ zugewiesen. Wir müssen vorher kein leeres Objekt erstellen und können alles oben Genannte in nur einem Schritt erledigen.
var bill = {
name: "Bill E Goat",
sound: function() {
console.log( 'bahhh!' );
}
};
Sehr einfach und schön, nicht wahr? Auch der Zugriff auf Eigenschaften und Methoden ist einfach.
bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"
Wenn der Attributname kein gültiger Bezeichner ist, können wir trotzdem wie folgt darauf zugreifen:
bill['name']; // "Bill E Goat"
Bitte beachten Sie, dass wir beim Aufrufen einer Methode nach dem Methodennamen ein Paar Klammern hinzufügen müssen, um sie aufzurufen. Überschreiben wir die aktuelle Sound-Methode und rufen sie auf, indem wir ihr einen Parameter übergeben:
bill.sound = function(noise) {
console.log(noise);
};
bill sound(" brrr!"); // "brrr!" Ihm ist kalt
Großartig, wir haben einen Parameter (Rauschen) übergeben und innerhalb der Methode darauf zugegriffen. Als nächstes fügen wir weiterhin eine Methode hinzu, um auf das Namensattribut zuzugreifen:
bill.sayName = function() {
console.log( "Hello " + this.name );
};
bill. sayName( ); // „Hallo Bill E Goat“
Wir können über this.propertyName
bill.sayName; // function
Wir weisen einem Objekt eine lokale Methode namens sound zu Sound, jetzt können Sie nach dem Sound Klammern hinzufügen und die Parameter übergeben, um diese Methode aufzurufen. Was würde passieren, wenn wir versuchen würden, Bill zu klonen?
var sally = bill;
sally.name; // „Bill E Goat“, aber ihr Name ist Sally silly
sally.name = „Sally“;
sally.name; Sally“, Better
bill.name; // „Sally“, Oh nein, was ist mit Bill passiert
Im obigen Beispiel haben wir eine neue Variable sally erstellt und sie gleich bill gemacht. Jetzt beziehen sich Sally und Bill auf dasselbe Objekt in ihrer Erinnerung. Änderungen an einem Objekt wirken sich auf das andere aus.
Sehen wir uns ein weiteres Beispiel an:
bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
var sayName = bill.sayName ;
sayName; // Funktion, soweit soweit gut
sayName(); // „Hallo“, warum wurde Bills Name nicht ausgedruckt?
Bills Namensattribut ist eine lokale Variable Die Methode sayName wird im globalen Bereich erstellt, sodass this.name den Wert von name im globalen Bereich findet. Das Problem ist jedoch, dass der Name nicht definiert ist. Definieren wir einen globalen Variablennamen und sehen, was passiert:
var name = "Bearded Octo";
sayName(); // "Hello Bearded Octo"
Hier erstellen wir einen globalen Variablennamen und weisen ihn zu Wert „Bärtiger Okto“. Wenn wir die Methode sayName aufrufen, sucht sie im globalen Bereich nach dem Namen und greift auf den Wert „Bearded Octo“ zu, gut. Werfen wir einen Blick auf die Konstruktornotation.
Konstruktornotation
Die Konstruktornotation ist eine weitere Möglichkeit, objektorientiertes JavaScript zu schreiben. Wenn Sie anfängliche Eigenschaftswerte und Methoden für ein Objekt festlegen müssen oder planen, verschiedene Instanzen eines Objekts zu erstellen, deren Eigenschaften und Methoden jedoch unterschiedlich sind, wird die Konstruktornotation bevorzugt. Beginnen wir mit der Erstellung eines leeren Objekts:
function Game() {}; Bitte beachten Sie, dass es üblich ist, den ersten Buchstaben groß zu schreiben, um anzuzeigen, dass es sich um eine Klasse handelt. Lassen Sie uns diese Klasse verwenden, um ein neues Objekt zu erstellen:
var zelda = new Game();
var smb = new Game();
zelda.title = "Legend of Zelda";
smb. title = „Super Mario Brothers“;
zelda.title; // „Legend of Zelda“
smb.title; // „Super Mario Brothers“
Unser Objekt hat jetzt seine eigenen Eigenschaften! Beim Erstellen eines Objekts können wir Werte an Eigenschaften übergeben oder diese später ändern.
function Game(title) {
this.title = typeof title !== 'undefiniert' ? title : "";
};
var zelda = new Game("Legend of Zelda");
zelda.title; // „Legend of Zelda“
zelda.title = „Ocarina of Time“;
zelda.title; // „Ocarina of Time“
var blank = new Game();
blank.title; // ""
Die zweite Zeile ist möglicherweise etwas schwer zu verstehen. Wir verwenden einen ternären Operator, der lediglich eine Möglichkeit darstellt, einen if else-Block in eine einzelne Zeile einzufügen. Es entspricht dem Folgenden:
if (typeof title !== 'undefiniert') {
this.title = title;
} else {
this.title = "";
}
// Ist dasselbe wie
this.title = typeof title !== 'undefiniert' ? title : "";
Wenn der Titelparameter beim Erstellen dieses Objekts übergeben wird, das Titelattribut des Objekts wird eingestellt. Wenn nicht übergeben, wird es auf den Standardwert „“ gesetzt.
Wir können eine Methode erstellen, um auf diese Eigenschaft zuzugreifen:
zelda.loveTitle = function() {
console.log( "I love " + this.title );
};
zelda .loveTitle(); // „Ich liebe Ocarina of Time“
Das sieht nett aus, könnte aber besser sein. Wir können der Game-Klasse eine Methode hinzufügen, sodass alle aus der Game-Klasse erstellten Objekte diese Methode haben:
Game.prototype.heartIt = function() {
console.log( "I heart " + this.title ) ;
};
zelda.heartIt(); // „Ich liebe Ocarina of Time“
smb.heartIt(); // „Ich liebe Super Mario Brothers
Epilog
I Ich hoffe, dieses Tutorial ist hilfreich für Sie, um objektorientiertes JavaScript zu erlernen. Es gibt viele Aspekte von objektorientiertem JavaScript, die in zukünftigen Tutorials vorgestellt werden