Diskussion über JavaScript-Objekte

Aufgrund der Flexibilität von JavaScript kann jeder Code nach seinen eigenen Gewohnheiten schreiben. Es gibt auch Objektliterale, die heute aufgrund des Aufkommens der objektorientierten Programmierung weit verbreitet sind begann sich auch nach und nach zur Klassenprogrammierung zu entwickeln. Jetzt werde ich kurz einige bekannte Programmiergewohnheiten erläutern:

1. Objektliteral:

Nachfolgend der zitierte Inhalt: var person = { Name:null, setName:function(name){ this.name = Name; return this.name; }, getName:function(){ alarm(this.name); } }

Eine Programmiermethode mit JavaScript-Eigenschaften. Sie enthält den Attributnamen, die Methoden setName und getName. Es ist relativ einfach, die Methode person.setname('R') aufzurufen Die Attribute und Methoden einer Person sind alle nicht privat und können aufgerufen werden.

2. Aufrufmodus des Prototypkonstruktors

Nachfolgend der zitierte Inhalt: var Person = function(){ this.name = null; } Person.prototype.setName = Funktion(Name){ this.name = Name; } Person.prototype.getName = function(){ alarm(this.name); }

Es ist auch eine sehr verbreitete Programmiermethode, eine Person-Klasse zu erstellen und dann einen Prototyp zu verwenden, um die Klasse zu erweitern und Methoden hinzuzufügen. Der größte Unterschied zu Objektliteralen besteht darin, dass Sie beim Aufrufen von Methoden dieser Klasse zuerst neue verwenden müssen (ähnlich wie bei Java). Aufrufende Klassen). var p = new Person();p.getName(); Wenn Sie es direkt erstellen, ohne new zu verwenden, wird dieser Fehler nicht gemeldet und ist schwer zu finden kommt daher, dass auf Person.prototypel verwiesen wird, und Person hat keine setName-Methode.

3. Verwenden Sie anonyme Funktionen für die funktionale Programmierung

Nachfolgend der zitierte Inhalt: (Funktion(){ Var-Name; var setName = function(n){ Name = n; } window['person']['setName'] = setName; var getName = function(){ Warnung(Name); } window['person']['getName'] = getName; })()

Einer der größten Vorteile der Entstehung von Klassen besteht darin, dass dadurch das Auftreten globaler Variablen reduziert wird. Wenn Sie jedoch noch an funktionale Programmierung gewöhnt sind, spielt dies keine Rolle. Solange Sie eine anonyme Funktion erstellen und einen Abschluss durchführen Führen Sie darin keine Sorgen über das Erscheinungsbild globaler Variablen durch. Verwenden Sie dann externe Variablen, um interne Funktionen aufzurufen Erstellen Sie private Variablen und private Methoden.

4. Klassenprogrammierung (ich weiß nicht, wie ich es nennen soll)

Nachfolgend der zitierte Inhalt: var person = function(){ Variablenname = null; zurückkehren{ setName:function(n){ Name = n; }, getName:function(){ Warnung(Name); } } }

Es ist Objektliteralen sehr ähnlich, außer dass dies weggelassen wird und Methoden und Eigenschaften privat gemacht werden können. Der Aufruf von Methoden ist im Grunde dasselbe wie Objektliterale.

5.Methodenkette

Nachfolgend der zitierte Inhalt: var Person = function(){ this.name = null; } Person.prototype = { setName:function(name){ this.name = Name; gib dies zurück; }, getName:function(){ alarm(this.name); gib dies zurück; } }

jQuery ist die klassischste Methodenverkettungsbibliothek. Wenn Sie immer noch nicht verstehen, was Methodenverkettung ist, schauen Sie sich dieses Beispiel an:

Nachfolgend der zitierte Inhalt: var p = neue Person(); p.setName('Tom').getName().setName('Ray').getName();

Da jede Methode mit „return this“ endet, wird eine methodenverkettete Klasse erstellt.

Dies sind die Methoden, mit denen ich besser vertraut bin. Jeder hat seine eigenen Eigenschaften, daher gibt es unzählige Methoden. Ich möchte jedoch die folgenden Probleme untersuchen.

1. Über diesen Zeiger

Dies wird beim Erstellen mehrerer Kategorien verwendet. Welche Rolle spielt dies tatsächlich? Schauen wir uns zunächst ein Beispiel für die Vererbung an:
Erstellen Sie zunächst die Person-Klasse:

Nachfolgend der zitierte Inhalt: var Person = function(){ this.name = null; } Person.prototype.setName = Funktion(Name){ this.name = Name; } Person.prototype.getName = function(){ alarm(this.name); } Person.prototype.getAge = function(){ var age = this.age || ''; Alarm(Alter); }

Erstellen Sie dann eine Children-Klasse und integrieren Sie alle Methoden und Eigenschaften von Person:

Nachfolgend der zitierte Inhalt: var Kinder = Funktion(Alter){ this.name = null; this.age = Alter; } Children.prototype = new Person(); //Eigenschaften und Methoden von Person erben Children.prototype.ageJudge = function(){ //Fügen Sie außerdem eine neue Methode für Children hinzu if(this.age > 18){ alarm('adult~'); } anders { Alert('Unter 18 Jahre alt~'); } } Children.prototype.getName = function(){ //Überschreiben Sie die getName-Methode var about = this.name + ' ' + this.age; alarm(über); } var tom = neue Kinder(12); var ages = tom.getAge(); //12 var Judge = tom.ageJudge(); //Unter 18 Jahren~ var setN = tom.setName('Tom'); var get = tom.getName(); //Tom 12

Das ist Vererbung, und dann schauen wir uns eine einfache Wiederverwendung von Funktionen an:

Nachfolgend der zitierte Inhalt: var SetColor = function(){ this.style.backgroundColor = '#000'; //dies zeigt auf das Fenster } document.body.onclick = SetColor; //Dies zeigt zu diesem Zeitpunkt auf body documnet.getElementById('color').onmouseout = SetColor; //dies zeigt auf documnet.getElementById('color') Nachdem ich die Funktion gesehen habe, muss ich ein neues Verständnis davon haben. Schauen wir uns nun ein einfaches Beispiel an: var setColor = { init:function(obj){ this.obj = obj; //this zeigt auf setColor this.obj.onclick = this.color; }, color:function(){ this.style.backgroundColor = '#000'; //this zeigt auf obj } }

In nur einer Klasse weist dies auf zwei Stellen hin, was die Leute, die gerade erst lernen, verwirrt und die Art und Weise, Code zu schreiben, leicht ändert.

Nachfolgend der zitierte Inhalt: var setColor = { init:function(obj){ setColor.obj = obj; setColor.obj.onclick = setColor.color; }, color:function(){ this.style.backgroundColor = '#000'; //Dies kann die Wiederverwendung von Methoden erleichtern } }

Auf diese Weise kann der Code klarer sein. Wenn Sie also Code schreiben, sollten Sie dessen zukünftige Verwendung berücksichtigen und prüfen, ob er wiederverwendet werden kann Vermeiden Sie dies so weit wie möglich. Es gibt ein weiteres häufigeres Problem. Es ist wie folgt:

Nachfolgend der zitierte Inhalt: var Person = function(){ this.name = null; } Person.prototype.setName = Funktion(Name){ this.name = Name; } Person.setName('tom'); //Falscher Weg: Dies in der setName-Methode zeigt auf Person.prototypel, Person hat keine setName-Methode

Wie bereits erwähnt, wird dieser Fehler während der Kompilierung oder Laufzeit nicht auftreten, wenn er nicht als var p = new Person();p.setName('tom'); geschrieben wird Beim Schreiben von Code wähle ich dies daher immer sorgfältig aus.

2. Klassenkapselung

In Java können Methoden oder Eigenschaften einer Klasse als privat festgelegt werden, um externe Aufrufe zu vermeiden. JavaScript verfügt jedoch nicht über eine solche Einstellung. Schauen Sie sich den folgenden Code an:

Nachfolgend der zitierte Inhalt: var person = { Name:null, init:function(name){ this.setName(name); }, setName:function(name){ this.name = Name; return this.name; } } person.init('tom'); //tom

In dieser Klasse gibt es insgesamt zwei Methoden, nämlich init und setName. Wir möchten nur setName von init ausführen oder verschiedene Methoden, die in Zukunft hinzugefügt werden und nicht angezeigt werden sollen:

person.setName('tom'); //tom

Rufen Sie die setName-Methode direkt auf und das Namensattribut soll privat sein. Dadurch wird verhindert, dass andere Programmierer Methoden aufrufen, die Sie nicht aufrufen möchten, wenn Sie Ihre Klasse verwenden.
Wie sollten wir also Klassen gut kapseln? Probieren Sie eine andere Programmiermethode aus und sehen Sie, wie die überarbeitete Version funktioniert:

Nachfolgend der zitierte Inhalt: var person = function(){ Variablenname = null; var setName = function(n){ Name = n; Rückgabename; } zurückkehren{ init:function(n){ setName(n); } } }

Auf diese Weise können die Methoden und Eigenschaften, die ursprünglich privatisiert werden sollten, nicht direkt von außen aufgerufen werden. Dies wird jedoch auch durch die Verwendung von Schließungen erreicht. Diese Programmiermethode ist jedoch nicht einfach zu lesen, insbesondere für Anfänger. Es wird sehr schwierig sein, diese Art von Code zu erkennen, und er wird auch mehr Speicher beanspruchen als gewöhnlicher Code.
Okay, das war's für den Moment. Ich werde das nächste Mal, wenn ich Zeit habe, über Schließungen und Umfang sprechen.