XT Knowledge Base
Hauptseite | Über | Hilfe | FAQ | Spezialseiten | Anmelden

Druckversion | Impressum | Datenschutz | Aktuelle Version

OOP mit JavaScript

(Unterschied zwischen Versionen)

(→OOP mit JavaScript)
Zeile 3: Zeile 3:
== Deklaration von Klassen ==
== Deklaration von Klassen ==
-
{|
+
 
-
! PHP
+
Folgende Klasse repräsentiert einen Punkt im zweidimensionalen Raum.
-
! C++
+
 
-
! JavaScript
+
<pre>
-
|-
+
function Point2D( x, y )
-
|<pre>
+
-
class Point2D
+
{
{
-
   public $x;
+
   this.x = x ? x : 0;
-
  public $y;
+
  this.y = y ? y : 0;
-
 
+
-
  function __construct( $x = 0, $y = 0 )
+
-
  {
+
-
    $this->x = $x;
+
-
    $this->y = $y;
+
-
  }
+
}
}
</pre>
</pre>
-
|<pre>
 
-
class Point2D
 
-
{
 
-
public:
 
-
  double x;
 
-
  double y;
 
-
  Point2D( double _x = 0, double _y = 0 )
+
Der Ausdruck <pre><argument> ? <argument> : 0;</pre> sorgt dafür, dass die Variablen auch dann richtig initalisiert werden, wenn keine Argumente übergeben werden. (Default-Konstruktor).
-
  {
+
 
-
    x = _x;
+
Eine JavaScript-Klasse sieht aus wie eine gewöhnliche Funktion. Diese Funktion übernimmt aber gleichzeitig die Aufgabe einer Klassen-Deklaration und die eines Konstruktors.
-
    y = _y;
+
 
-
   }
+
Die Erzeugung einer Instanz und der Zugriff darauf geschieht wie folgt:
-
};
+
<pre>
 +
  var p = new Point2D( 10, 15 );
 +
   alert( "x: " + p.x + ", y: " + p.y ); // x: 10, y: 15
</pre>
</pre>
-
|<pre>
+
 
 +
Im Vergleich zur Deklaration erscheint die Instanziierung dann aber eher so, wie man es erwarten würde.
 +
 
 +
== Methoden ==
 +
 
 +
Insgesamt werden drei Möglichkeiten genannt, einer Klasse Methoden hinzuzufügen:
 +
 
 +
1. Zuweisung von Funktionen im Konstruktor:
 +
<pre>
function Point2D( x, y )
function Point2D( x, y )
{
{
-
   this.x = x ? x : 0;
+
   this.x = 0;
-
   this.y = y ? y : 0;
+
   this.y = 0;
 +
 
 +
  this.set = function( x, y )
 +
  {
 +
    this.x = x;
 +
    this.y = y;
 +
  }
 +
 
 +
  this.set( x ? x : 0, y ? y : 0 );
}
}
</pre>
</pre>
-
|}
+
In diesem Fall wird im Konstruktor eine set()-Methode gesetzt und direkt aufgerufen. Diese Funktion ist nun auch "von außen" aufrufbar:
 +
<pre>
 +
  var p = new Point2D( 1, 3 );
 +
  p.set( 3, 1 );
 +
  alert( "x: " + p.x + ", y: " + p.y ); // x: 3, y: 1
 +
</pre>

Version vom 12:57, 7. Sep. 2010

Einleitung

Dieses Tutorial basiert auf einen Artikel von Gavin Kistner und dessen Korrektur durch Shelby H. Moore III.

Deklaration von Klassen

Folgende Klasse repräsentiert einen Punkt im zweidimensionalen Raum. 

function Point2D( x, y )
{
  this.x = x ? x : 0;
  this.y = y ? y : 0;
}
Der Ausdruck 
<argument> ? <argument> : 0;
sorgt dafür, dass die Variablen auch dann richtig initalisiert werden, wenn keine Argumente übergeben werden. (Default-Konstruktor).

Eine JavaScript-Klasse sieht aus wie eine gewöhnliche Funktion. Diese Funktion übernimmt aber gleichzeitig die Aufgabe einer Klassen-Deklaration und die eines Konstruktors.

Die Erzeugung einer Instanz und der Zugriff darauf geschieht wie folgt: 

  var p = new Point2D( 10, 15 );
  alert( "x: " + p.x + ", y: " + p.y ); // x: 10, y: 15

Im Vergleich zur Deklaration erscheint die Instanziierung dann aber eher so, wie man es erwarten würde.

Methoden

Insgesamt werden drei Möglichkeiten genannt, einer Klasse Methoden hinzuzufügen:

1. Zuweisung von Funktionen im Konstruktor: 

function Point2D( x, y )
{
  this.x = 0;
  this.y = 0;

  this.set = function( x, y )
  {
    this.x = x;
    this.y = y;
  }

  this.set( x ? x : 0, y ? y : 0 );
}

In diesem Fall wird im Konstruktor eine set()-Methode gesetzt und direkt aufgerufen. Diese Funktion ist nun auch "von außen" aufrufbar: 

  var p = new Point2D( 1, 3 );
  p.set( 3, 1 );
  alert( "x: " + p.x + ", y: " + p.y ); // x: 3, y: 1

Von „http://xtainment.net/wiki/index.php?title=OOP_mit_JavaScript“