JavaScript-Tutorium:Grundlagen - Versionsgeschichte

Lawrence: /* Kapselung */

2015-10-14T21:53:24Z

Kapselung

← Nächstältere Version		Version vom 14. Oktober 2015, 21:53 Uhr
Zeile 1.574:		Zeile 1.574:
	In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.		In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
	Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.		Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
	Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.		Dadurch wird der Kontext, in dem die Funktion definiert wurde, so lange erhalten wie die Funktion selbst besteht.

	~~<source lang="javascript">~~
	~~var erzeugeLogFunktion = function(prefix) {~~
	~~var logge = function(message) {~~
	~~console.log(prefix + message);~~
	};
	};

	~~var log1 = erzeugeLogFunktion('Nachricht:');~~
	~~log1('Hello World');~~
	~~var log2 = erzeugeLogFunktion('Message:');~~
	~~log2('Hello World');~~
	~~</source>~~


Zeile 1.595:		Zeile 1.582:
	var Spieler = function(name) {		var Spieler = function(name) {
	var kuerzel = name.charAt(0);		var kuerzel = name.charAt(0);
	this.~~hatKuerzel~~ = function(~~zuPruefendesKuerzel~~) {		this.getKuerzel = function() {
	return kuerzel ~~=== zuPruefendesKuerzel~~;		return kuerzel;
	};		};
	}		}

	var spieler1 = new Spieler('John');		var spieler1 = new Spieler('John');
	console.log(spieler1.~~hatKuerzel~~(~~'J'~~));		console.log(spieler1.getKuerzel());
	</source>		</source>

Zeile 1.607:		Zeile 1.594:
	==Pseudo-private Eigenschaften==		==Pseudo-private Eigenschaften==

	Closures sind ~~schwer zu verstehen sein~~ und erfordern einen sicheren Umgang mit JavaScript.		Closures sind komplex und erfordern einen sicheren Umgang mit JavaScript.
	Eine Pseudokapselung kann erreicht werden, indem ~~vor Namen von~~ privaten Eigenschaften ~~ein~~ Unterstrich ~~vorangestellt wird~~.		Eine Pseudokapselung kann erreicht werden, indem man privaten Eigenschaften mit einem vorangestellten Unterstrich kennzeichnet.

	<source lang="javascript">		<source lang="javascript">
Zeile 1.620:		Zeile 1.607:
	</source>		</source>

	'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff~~, wird jedoch oft verwendet in der JavaScript-Commmunity~~.		'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den tatsächlichen Zugriff.

Lawrence: /* Manipulation von this */

2015-10-14T21:53:05Z

Manipulation von this

@@ Zeile 1.284: / Zeile 1.284: @@
 var spieler1 = new Spieler('John');
 spieler1.springe();
 </source>

Lawrence: /* this */

2015-10-14T21:52:40Z

this

Änderungen zeigen

Lawrence: /* this */

2015-10-14T21:51:51Z

this

@@ Zeile 1.206: / Zeile 1.206: @@
-==this==
+=this=
-Das Schlüsselwort <code>this</code> zeigt innerhalb einer Konstruktorfunktion auf das automatisch erzeugte Objekt.
+Das Schlüsselwort <code>this</code> hat in JavaScript unterschiedliche Bedeutungen je nach Kontext.
 <source lang="javascript">
 var Spieler = function(name) {
    this.name = name;
 };
 var spieler1 = new Spieler('John');
-console.log(spieler1);
+spieler1.springe();
 </source>
-'''Achtung:'''
+==Sichere Verwendung in Konstruktorfunktionen==
-Wird eine Konstruktorfunktion ohne <code>new</code> aufgerufen so zeigt <code>this</code> aber auf das globale Objekt (im Browser: <code>window</code>).
 <source lang="javascript">
 var Spieler = function(name) {
    this.name = name;
+}
-Spieler('John Doe');
-console.log(window.name);
+var fuehreFunktionAus = function(funktion) {
 </source>
 ==Erzwingung von <code>new</code>==

Lawrence: /* Konstruktoren */

2015-10-14T21:49:41Z

Konstruktoren

@@ Zeile 1.204: / Zeile 1.204: @@
 console.log(spieler1);
 </source>
@@ Zeile 1.250: / Zeile 1.234: @@
 ==Erzwingung von <code>new</code>==
-Es ist bedingt möglich sicherzustellen, dass eine Funktion mit dem Schlüsselwort <code>new</code> aufgerufen wurde.
+Es ist bedingt möglich sicherzustellen, dass eine Funktion mit <code>new</code> aufgerufen wurde.
+Zum Beispiel kann überprüft werden ob <code>this</code> auf das globale Objekt zeigt (<code>window</code>).
 <source lang="javascript">
@@ Zeile 1.284: / Zeile 1.249: @@
-==Alternative==
+==Factories==
 Aufgrund der Flexibilität von JavaScript gibt es auch andere Möglichkeiten gleichartige Objekte zu erzeugen.
@@ Zeile 1.300: / Zeile 1.261: @@
 var spieler1 = erstelleSpieler('John');
 console.log(spieler1);
 </source>

Lawrence am 7. Oktober 2015 um 16:49 Uhr

2015-10-07T16:49:02Z

← Nächstältere Version		Version vom 7. Oktober 2015, 16:49 Uhr
Zeile 21:		Zeile 21:
	* Ist interpretiert, nicht kompiliert		* Ist interpretiert, nicht kompiliert
	* Looses Typsystem		* Looses Typsystem
	* Objektorientiert, nicht ~~klassorientiert~~		* Objektorientiert, nicht klassenorientiert
	* Begünstigt funktionales Programmieren		* Begünstigt funktionales Programmieren
	* Läuft in vielen unterschiedlichen Umgebungen		* Läuft in vielen unterschiedlichen Umgebungen
Zeile 332:		Zeile 332:

	<source lang="javascript">		<source lang="javascript">
	var spieler1 = 'Paul', spieler2 = 'Peter';		var spieler1 = 'Paul', spieler2 = "Peter";
	console.log(spieler1);		console.log(spieler1);
	console.log(spieler2);		console.log(spieler2);
Zeile 579:		Zeile 579:
	var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};		var spieler = {name: 'Max Mustermann', leben: 3, punkte: 2000};
	for (var eigenschaft in spieler) {		for (var eigenschaft in spieler) {
	console.log(~~spieler~~);		console.log(eigenschaft);
	}		}
	</source>		</source>

Lawrence: /* Sichere Verwendung in Konstruktorfunktionen */

2015-10-01T20:54:24Z

Sichere Verwendung in Konstruktorfunktionen

← Nächstältere Version		Version vom 1. Oktober 2015, 20:54 Uhr
Zeile 1.545:		Zeile 1.545:
	</source>		</source>

	Anmerkung: Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.		'''Anmerkung:''' Die Hilfsvariable ist kein Feature von JavaScript und stellt somit einen "Hack" dar.

	=Prototypen=		=Prototypen=

Lawrence: /* Kapselung */

2015-10-01T20:53:51Z

Kapselung

← Nächstältere Version		Version vom 1. Oktober 2015, 20:53 Uhr
Zeile 1.776:		Zeile 1.776:
	=Kapselung=		=Kapselung=

	Kapselung ermöglicht ~~Zugriffe~~ auf Daten und Informationen zu steuern und auch zu verhindern.
			Kapselung ermöglicht den Zugriff auf Daten und Informationen zu steuern und auch zu verhindern.


	==Closures==		==Closures==

	In JavaScript kann man~~, abgesehen von neueren ECMAScript-Standards,~~ nur mithilfe von Closures echte Kapselung erreichen.
	Eine Closure wird ~~immer dann geformt~~ wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.		In JavaScript (bis ECMAScript 5) kann man nur mithilfe von Closures echte Kapselung erreichen.
	Dadurch wird der Kontext in dem die Funktion definiert wurde so lange ~~am Leben~~ erhalten wie die Funktion selbst besteht.		Eine Closure wird erzeugt, wenn eine innere Funktion aus ihrem Erstellungskontext nach außen gegeben wird.
			Dadurch wird der Kontext in dem die Funktion definiert wurde so lange erhalten wie die Funktion selbst besteht.

	<source lang="javascript">		<source lang="javascript">
Zeile 1.789:		Zeile 1.792:
	console.log(prefix + message);		console.log(prefix + message);
	};		};
	~~return logge;~~
	};		};

	var ~~logge~~ = erzeugeLogFunktion('Nachricht:');		var log1 = erzeugeLogFunktion('Nachricht:');
	~~logge~~('Hello World');		log1('Hello World');
			var log2 = erzeugeLogFunktion('Message:');
			log2('Hello World');
	</source>		</source>

	Mithilfe von Closures innerhalb von Konstruktoren ~~kann man in Funktionen~~ auf ~~Variablen~~ die ~~von außen nicht zugänglich sind~~.
			Mithilfe von Closures kann der Zugriff von Variablen innerhalb von Konstruktoren auf die inneren Funktionen beschränkt werden.

	<source lang="javascript">		<source lang="javascript">
	var ~~Person~~ = function(~~vorname, nachname~~) {		var Spieler = function(name) {
	var name ~~= vorname + ' ' + nachname~~;		var kuerzel = name.charAt(0);
	this.~~hatNamen~~ = function(~~zuPruefenderName~~) {		this.hatKuerzel = function(zuPruefendesKuerzel) {
	return ~~name~~ === ~~zuPruefenderName~~;		return kuerzel === zuPruefendesKuerzel;
	};		};
	}		}

	var ~~person1~~ = new ~~Person~~('~~Max', 'Mustermann~~');		var spieler1 = new Spieler('John');
	console.log(~~person1~~.~~hatNamen~~('~~Martina Mustermann~~'));		console.log(spieler1.hatKuerzel('J'));
	</source>		</source>


	==Pseudo-private Eigenschaften==		==Pseudo-private Eigenschaften==

	Closures ~~können relativ~~ schwer ~~verständlich~~ sein und erfordern einen sicheren Umgang mit ~~der Sprache~~ JavaScript.		Closures sind schwer zu verstehen sein und erfordern einen sicheren Umgang mit JavaScript.
	Eine ~~einfache~~ Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.		Eine Pseudokapselung kann erreicht werden, indem vor Namen von privaten Eigenschaften ein Unterstrich vorangestellt wird.
	~~Diese Syntax hat zwar keine Auswirkung auf die Zugriffsmöglichkeiten, wird jedoch oft verwendet in der JavaScript-Commmunity.~~


	<source lang="javascript">		<source lang="javascript">
	var ~~Person~~ = function(~~vorname, nachname~~) {		var Spieler = function(name) {
	this.~~_vorname = vorname;~~		this._name = name;
	~~this._nachname~~ = ~~nachname~~;		this._punktzahl = 0;
	this.~~_name~~ = ~~this._vorname + ' ' + this._nachname~~;		this.hatNamen = function(name) {
	this.hatNamen = function(~~zuPruefenderName~~) {		return this._name === name;
	return this._name === ~~zuPruefenderName~~;
	};		};
	}		}
	</source>		</source>

			'''Anmerkung:''' Die Syntax hat keine Auswirkung auf den Zugriff, wird jedoch oft verwendet in der JavaScript-Commmunity.

Lawrence: /* Prototypen */

2015-10-01T20:53:34Z

Prototypen

Änderungen zeigen

Lawrence: /* this */

2015-10-01T20:52:40Z

this

Änderungen zeigen