Advertisement
  1. Code
  2. Web Development

Die Grundlagen der objektorientierten JavaScript.

Scroll to top
Read Time: 14 min

German (Deutsch) translation by Wilhelm Wolf (you can also view the original English article)

In den letzten Jahren -, JavaScript -, hat zunehmend an Popularität gewonnen, Teils durch Bibliotheken, die entwickelt werden, um JavaScript-Anwendungen/Effekte einfacher zu erstellen, für diejenigen, die vielleicht nicht völlig Begriffen, den Kern der Sprache noch. 

 Während in der Vergangenheit war es eine gängige argument, dass JavaScript eine Programmiersprache basic, und es war sehr "slap dash' mit keine echte Grundlage; ist dies nicht mehr der Fall, vor allem mit der Einführung von hochskalierbaren web-Applikationen und 'Anpassungen' wie JSON (JavaScript Object Notation).

 JavaScript können alle, die eine Objekt-Orientierte Sprache zu bieten hat, wenn auch mit einigen zusätzlichen Aufwand außerhalb des Geltungsbereichs dieses Artikels.

Lassen Sie uns ein Objekt Erstellen 

Glückwunsch, Sie haben gerade ein Objekt erstellt.   Es gibt zwei Möglichkeiten zum erstellen eines JavaScript-Objekts: sind Sie "Konstruktor Funktionen" und "Literal notation'.  Das oben ist eine Konstruktor-Funktion, ich werde erklären, was der Unterschied ist kurz, aber bevor ich das Tue, hier ist das, was ein Objekt definition sieht wie die Verwendung von literal-Schreibweise.

 Literal ist eine bevorzugte option für die Namen Abstand, so dass Ihr JavaScript-code nicht beeinträchtigen (oder Umgekehrt) mit anderen Skripten auf der Seite und auch wenn Sie dieses Objekt als ein einziges Objekt und nicht erfordern mehr als eine Instanz von dem Objekt, wobei der Konstruktor-Funktion Typ notation wird bevorzugt, wenn Sie brauchen, um einige der ersten arbeiten, bevor das Objekt erstellt wird, oder verlangen, dass mehrere Instanzen des Objekts, wobei jede Instanz geändert werden kann während der Lebensdauer des scripts.  Wir bauen weiter auf unsere beiden Objekte gleichzeitig, so können wir beobachten, was die Unterschiede sind.

Die Definition von Methoden und Eigenschaften 

Konstruktor version: 

Literal version: 

 Für jedes der Objekte, die wir erstellt haben, eine Eigenschaft, 'iAm', welches ein string-Wert, der verwendet wird, in unsere Objekte Methode "whatAmI", die alerts eine Nachricht.

 Eigenschaften sind Variablen innerhalb eines Objektes und die Methoden sind Funktionen innerhalb eines Objekts.

 Jetzt ist wohl so gut wie jedem zu erklären, wie Sie mit den Eigenschaften und Methoden (zwar würden Sie bereits getan haben, so dass, wenn Sie vertraut sind mit einer Bibliothek).

 Verwenden Sie eine Eigenschaft zuerst geben Sie, was für ein Objekt es gehört - also in diesem Fall ist es myObject - und dann für den Verweis auf den internen Eigenschaften, Sie setzen einen Punkt und dann den Namen der Eigenschaft, so wird es irgendwann so Aussehen wie myObject.iAm (dies wird return 'ein Objekt').

Für Methoden, es ist das gleiche, außer die Methode auszuführen, wie bei jeder Funktion, müssen Sie Klammern setzen, nachdem es, sonst wirst du nur wieder ein Verweis auf die Funktion und nicht das, was die Funktion tatsächlich gibt.  So wird es Aussehen, wie myObject.whatAmI()  (dies wird die Warnung "ich bin ein Objekt"). 

 Jetzt zu den unterschieden:

  • Die Konstruktor-Objekt hat die Eigenschaften und Methoden definiert, mit dem Schlüsselwort "this" vor, in der Erwägung, dass die wörtliche version nicht. 
  •  In der Konstruktor-Objekt, Eigenschaften/Methoden haben Ihre "Werte" definiert, die nach einem Gleichheitszeichen '=' in der Erwägung, dass in der wörtlichen Fassung, definiert sind Sie nach einem Doppelpunkt ':'.
  •  Der Konstruktor-Funktion haben kann (optional) ein Semikolon ';' am Ende jeder Eigenschaft/Methode Erklärung in der Erwägung, dass in der literal version, wenn Sie mehr als eine Eigenschaft oder Methode, die Sie, getrennt durch ein Komma ',', und Sie können NICHT semi-colons nach Ihnen, sonst JavaScript, wird ein Fehler zurückgegeben.

 Es gibt auch einen Unterschied zwischen der Art, wie diese zwei Arten von Objekt-Deklarationen verwendet werden.

Die Verwendung einer wörtlich notiert-Objekt, verwenden Sie einfach es durch verweisen auf den Variablennamen, also überall dort, wo es erforderlich ist, rufen Sie es durch die Eingabe von; 

Mit Konstruktor-Funktionen, die Sie benötigen, um zu instanziieren (erstellen einer neuen Instanz) das Objekt zuerst; Sie tun dies, indem Sie eingeben; 

Mit einem Konstruktor-Funktion. 

 Verwenden wir unsere vorherigen Konstruktor-Funktion und aufbauen, so dass es führt einige grundlegende (aber dynamische) Vorgänge, wenn wir instanziieren.

Genau wie jede JavaScript-Funktion, die wir verwenden können Argumente mit unserer Konstruktor-Funktion; 

Nun wollen wir instantiieren unser Objekt und rufen Sie seine whatAmI Methode, füllen Sie die erforderlichen Felder aus, wie wir es tun. 

Dies wird die Warnung " ich bin ein Objekt der JavaScript-Sprache.' 

Zu Instanziieren, oder nicht zu Instanzieren 

 Ich bereits erwähnt über die Unterschiede zwischen Objekt-Konstruktoren-und Object-Literalen und, wenn eine änderung vorgenommen wird, um ein Objekt-Literal, es wirkt sich auf das Objekt über das gesamte Skript in der Erwägung, dass, wenn eine Konstruktor-Funktion instanziiert wird und dann eine änderung an der Instanz, es wird nicht auf andere Instanzen des Objekts. Nehmen wir ein Beispiel; 

Zuerst erstellen wir ein Objekt-literal; 

Auch wenn Sie eine neue variable erstellen, und zeigen Sie auf das Objekt, es wird den gleichen Effekt haben. 

 Versuchen wir nun eine ähnliche übung mit einer Konstruktor-Funktion.

So wie erwartet, sowohl den richtigen Wert zurück, sondern verändern Sie mit uns die myProperty für eine der Instanzen. 

 Wie Sie sehen können aus diesem Beispiel, obwohl wir verändert die Eigenschaft der constructorOne es hatte keinen Einfluss auf myObjectConstructor und daher nicht beeinflussen constructorTwo. Auch wenn constructorTwo instanziiert wurde, bevor wir verändert der myProperty Eigenschaft von constructorOne, wäre es immer noch nicht auf die Eigenschaft myProperty von constructorTwo es ist eine ganz andere Instanz des Objekts innerhalb des JavaScript-Speicher. 

So welche sollten Sie verwenden?   Nun hängt es von der situation, wenn Sie brauchen nur ein Objekt seiner Art, für Ihr Skript (wie Sie sehen in unserem Beispiel am Ende dieses Artikels), dann verwenden Sie ein Objekt-literal, aber wenn Sie mehrere Instanzen eines Objekts, wobei jede Instanz unabhängig von den anderen und können verschiedene Eigenschaften oder Methoden, die je nach der Art, wie es konstruiert ist, verwenden Sie eine Konstruktor-Funktion.

Dies und das  

Bei der Erläuterung Konstruktor-Funktionen, es gab eine Menge von 'diese' Schlagworte werden in den Raum geworfen und ich herausfinden, was bessere Zeit, um darüber zu reden Spielraum! 

Jetzt werden Sie vielleicht Fragen, "was ist das Bereich Sie sprechen'?' Scope in JavaScript-Funktion/Objekt-basiert, so dass bedeutet, wenn Sie außerhalb einer Funktion, die Sie nicht verwenden können, eine variable, die definiert ist, die innerhalb einer Funktion (es sei denn, Sie verwenden eine Schließung). 

 Es ist jedoch ein scope-chain, was bedeutet, dass eine Funktion innerhalb einer anderen Funktion zugreifen können eine definierte variable in Ihrer übergeordneten Funktion. Werfen wir einen Blick auf einige Beispiel-code. 

 Wie Sie sehen können, in diesem Beispiel var1 definiert ist, in das Globale Objekt und ist verfügbar für alle Funktionen und Objekt, var2 definiert ist, innerhalb function1 und ist für function1 und function2, aber wenn Sie versuchen, zu verweisen, aus der Sie die Globale Objekt-es wird Ihnen die Fehlermeldung "var2 ist undefiniert', var3 ist nur zugänglich function2.

Also verweisen was "Dies"? Auch in einem browser, "dies" bezieht sich auf das window-Objekt, also technisch ist das Fenster unserer globalen Objekt.  Wenn wir innerhalb eines Objekts haben, "das" bezieht sich auf das Objekt selbst aber bist du innerhalb einer Funktion, dies weiterhin auf das Window-Objekt verweisen wird und ebenso bist du innerhalb einer Methode, die innerhalb eines Objekts ist, "das" bezieht sich auf das Objekt.

 Aufgrund unserer scope-chain, wenn wir uns im inneren eines sub-Objekt (ein Objekt in einem Objekt), 'dies' bezieht sich auf die sub-Objekt und nicht das parent-Objekt.

 Als seitliche Anmerkung, es lohnt sich auch hinzufügen, dass bei der Verwendung von Funktionen wie setInterval, setTimeout und eval, wenn Sie eine Funktion ausführen, oder die Methode über, 'diese' bezieht sich auf das window-Objekt, da diese Methoden von window, setInterval() und window.setInterval()  sind die gleichen.

Ok, jetzt haben wir das geklärt, machen wir mal ein real world-Beispiel und erstellen Sie ein Formular-Validierung-Objekt! 

Praxis: Ein Formular-Validierung Objekt 

 Zunächst muss ich Ihnen die addEvent Funktion, die wir schaffen, und ist eine Kombination von ECMAScript (Firefox, Safari, usw.. ) von addEventListener () - Funktion und die Microsoft ActiveX-Skripts attachEvent () - Funktion.

 Dies erstellt eine neue Funktion mit drei Argumenten auf, um das DOM-Objekt, das wir anbringen, den Fall zu geben in der Art der Veranstaltung und der fn wird die Funktion ausgeführt, wenn das Ereignis ausgelöst wird.  Es wird zunächst überprüft, ob die Methode addEventListener unterstützt wird, wenn man Sie so verwenden, dass, wenn nicht, wird die Prüfung für attachEvent und wenn alle Stricke reißen, sind Sie wahrscheinlich mit IE5 oder etwas ebenso obsolet, so fügen wir die Veranstaltung direkt auf die Ereignis-Eigenschaft (Hinweis: die Dritte option überschreibt alle vorhandenen Funktion kann die angebracht wurden, um die Ereignis-Eigenschaft, während die ersten beiden wird, fügen Sie es als eine zusätzliche Funktion auf Ihrer Ereignis-Eigenschaft).

Jetzt lassen Sie uns unsere Dokument-es ist also ähnlich dem, was Sie möglicherweise sehen, wenn Sie entwickeln jQuery-Kram. 

In jQuery Sie haben würde; 

 Mit unserem addEvent Funktion, die wir haben;

Jetzt für unsere Form-Objekt. 

 Also das ist ganz einfach, aber kann leicht erweitert werden.

Um diese brechen zunächst erstellen wir eine neue Eigenschaft, die nur die Zeichenfolge name unseres 'gültig' css-Klasse, die, wenn angewandt, um das Formular-Feld, fügt gültig Effekte wie eine grüne Grenze.   Wir definieren auch unsere zwei sub-Objekte, fname und lname, so können wir definieren Ihre eigenen Eigenschaften, die verwendet werden können durch Methoden, die anderswo, diese Eigenschaften sind minLength ist die minimale Anzahl der Zeichen in diesen Feldern haben kann, maxLength die maximale Zeichen, die das Feld haben kann, und fieldName, die es eigentlich nicht gewöhnt, aber könnten ergriffen werden, für Dinge wie die Identifizierung des Feld mit einem benutzerfreundlichen string mit einer Fehlermeldung (zB. 'Erste Feld Name ist erforderlich.').

 Als Nächstes erstellen wir eine validateLength-Methode akzeptiert zwei Argumente: formEl das DOM-element zu validieren und die Art, die sich auf eine sub-Objekt zu verwenden (d.h. fname oder lname).  Diese Funktion überprüft, ob die Länge des Feldes ist zwischen den minLength und maxLength-Bereich, wenn es nicht, dann entfernen wir unsere gültigen Klasse (falls vorhanden) aus dem element, und geben Sie false zurück, ansonsten, wenn es ist, dann fügen wir die gültige Klasse und geben true zurück.

 Dann haben wir eine validateEmail Methode akzeptiert ein DOM-element als argument, wir testen dann diese DOM-Elemente Wert gegen eine E-Mail geben Sie reguläre Ausdrücke; wenn es wieder geht fügen wir unserer Klasse, und true zurückgeben, und Umgekehrt.

Schließlich haben wir eine getSubmit Methode.   Diese Methode wird die id des Formulars und dann in einer Schleife über alle input-Elemente innerhalb der angegebenen form zu finden, die hat eine Art abschicken (type="submit").  Der Grund für diese Methode ist die Rückkehr der submit-button, so können wir es deaktivieren, bis das Formular bereit ist, sich zu Unterwerfen.

Lasst uns diese validator-Objekt zu arbeiten, die auf einer realen form.   Zunächst müssen wir unsere HTML-ist. 

Lassen Sie uns nun den Zugriff auf diese input-Objekte mit JavaScript, und überprüfen Sie, wenn die form übermittelt. 

Lassen Sie uns brechen Sie diesen code. 

Wir wickeln unseren code in die addEvent Funktion, so dass, wenn das Fenster geladen wird dieses Skript ausgeführt wird.  Erstens, wir Holen unser Formular mit seiner ID und legen Sie es in einer Variablen namens ourForm, dann schnappen wir uns unsere submit-button (über unser Formular Objekte getSubmit-Methode), und stellen Sie es in einer Variablen namens " submit_button, und legen Sie dann die submit-buttons disabled-Attribut auf 'deaktiviert'. 

Als Nächstes definieren wir eine Funktion checkForm.  Diese speichert alle Eingaben in das Formular-Feld als ein array, und wir befestigen Sie es an  eine variable mit dem Namen.. du hast es erraten.. - Eingänge!  Dann ist es definiert einige verschachtelte if-Anweisungen, die den test jedes der Felder innerhalb der Eingänge array gegen unsere Methoden.  Dies ist der Grund, warum wir true zurück oder false, unsere Methoden, so dass, wenn es den Wert true zurück, wir geben die if-Anweisung und fahren Sie weiter auf der nächsten, aber wenn es false zurück, wir beenden das if-Anweisungen. 

Nach unserer definition einer Funktion, führen wir die Funktion checkForm, wenn die Seite anfangs geladen wird, und lege auch die Funktion eines keyup-Ereignis und ein submit-Ereignis. 

 Sie Fragen sich vielleicht, warum befestigen Sie Einreichen, wenn wir deaktiviert die Schaltfläche senden.  Nun, wenn Sie konzentrieren sich auf ein input-Feld und drücken Sie die enter-Taste, wird versucht, das Formular zu senden, und wir brauchen, um dies zu prüfen, daher auch der Grund, unsere checkForm Funktion gibt true zurück, (das Formular sendet) oder false (nicht abschicken).

Fazit  

So erfuhren wir, wie definieren die unterschiedlichen Objekt-Typen in JavaScript und erstellen von Eigenschaften und Methoden in sich.  Wir haben auch gelernt, eine nette addEvent-Funktion und habe unser Objekt in ein basic real world " - Beispiel. 

Dies schließt die Grundlagen von JavaScript die Objektorientierung.  Hoffentlich, diese beginnen Sie auf Ihrem Weg zum Aufbau Ihrer eigenen JavaScript-Bibliothek!   Wenn Ihnen dieser Artikel gefallen und Sie Interesse an anderen JavaScript-Verwandte Themen, postet Sie in die Kommentare ich würde mich freuen weiter zu schreiben. Vielen Dank für das Lesen. 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.