Versionen vergleichen

Mit Objekten arbeiten

Version 372787:

Version 372787 von eminor am

Version 372797:

Version 372797 von eminor am

Titel:
Mit Objekten arbeiten
Mit Objekten arbeiten
Adressname:
JavaScript/javascript_guide/Mit_Objekten_arbeiten
JavaScript/javascript_guide/Mit_Objekten_arbeiten
Inhalt:

Version 372787
Version 372797
n315    <h3>n315    <h3 id="Defintion_von_Methoden">
nn400    <h3 id="Benutzung_von_this_zur_Objektreferenzierung">
401      Benutzung von this zur Objektreferenzierung
402    </h3>
403    <p>
404      Javascript besitzt das spezielle Schlüsselwort this, das ma
 >n innerhalb von Methoden benutzen kann, um auf das aktuelle Objek
 >t zu verweisen. Wenn man zum Beispiel eine Funktion mit Namen <co
 >de>validate</code> hat, die einen Wert einer Objekteigenschaft va
 >lidiert und der zwei Grenzwerte als Parameter übergeben werden:
405    </p>
406    <div>
407      <div class="container">
408        <pre class="line number4 index3 alt1">
409<code class="brush: js">function</code> <code class="js plain">va
 >lidate(obj, lowval, hival) {</code>
410<code class="js spaces">  </code><code class="js keyword">if</cod
 >e> <code class="js plain">((obj.value &lt; lowval) || (obj.value 
 >&gt; hival))</code>
411<code class="js spaces">    </code><code class="js plain">alert(<
 >/code><code class="js string">"Invalid Value!"</code><code class=
 >"js plain">);</code>
412<code class="js plain">}</code>
413</pre>
414      </div>
415    </div>
416    <p>
417      Dann kann man die Funktion für jedes Formular-Element über 
 >den onchange-event-Handler aufrufen und mit Hilfe von <code>this<
 >/code> das Element übergeben:
418    </p>
419    <pre class="brush: html">
420&lt;input type="text" name="age" size="3" onChange="validate(this
 >, 18, 99)"&gt;
421</pre>
422    <p>
423      Im Allgemeinen verweist <code>this</code> auf das aufrufend
 >e Objekt.
424    </p>
425    <p>
426      In Kombination mit der Eigenschaft <code>form</code> kann <
 >code>this</code> auf das Elternobjekt eines Elements verweisen. B
 >eim folgenden Beispiel enthält das Formular <code>myForm</code> e
 >in Textobjekt und einen Button. Klickt der Benutzer den Button an
 >, wird der Name des Formulars als Wert für des Textobjekt gesetzt
 >. Beim onclick-Event-Handler des Buttons wird mit <code>this.form
 ></code> auf das Elternobjekt <code>myForm</code> verwiesen.
427    </p>
n401      Benutzung von this zur Objektreferenzierungn429      Definition von gettern und settern
402    </h3>
403    <p>430    </h3>
404      Javascript besitzt das spezielle Schlüsselwort this, das ma
>n innerhalb von Methoden benutzen kann, um auf das aktuelle Objek 
>t zu verweisen. Wenn man zum Beispiel eine Funktion mit Namen <co 
>de>validate</code> hat, die einen Wert einer Objekteigenschaft va 
>lidiert und der zwei Grenzwerte und als Parameter übergeben werde 
>n: 
405    </p>431    <p>
432      Ein <code>getter</code> ist eine Methode, die einen Wert ei
 >ner spezifischen Eigenschaft bekommt. Ein <code>setter</code> ist
 > eine Methode, die den Wert einer spezifischen Eigenschaft setzt.
 > Man kann getter und setter für jedes vordefinierte Kernobjekt od
 >er benutzerdefinierte Objekt verwenden, welches das Hinzufügen vo
 >n neuen Eigenschaften erlaubt. Als Syntax für die Definition von 
 >gettern und settern kommt die literale Syntax zum Einsatz.
433    </p>
406    <div>434    <p>
407      <div class="syntaxhighlighter js" id="highlighter_587735">435      &nbsp;
408        <table border="0" cellpadding="0" cellspacing="0">436    </p>
409          <tbody>437    <div class="blockIndicator standardNote standardNoteBlock">
410            <tr>438      <p>
411              <td class="code">439        <span class="external">Hinweis:</span> <a class="external
 >" href="http://developer.mozilla.org/en-US/docs/JavaScript/New_in
 >_JavaScript/1.8.1">JavaScript 1.8.1</a>
412                <div class="container">
413                  <div class="line number1 index0 alt2">
414                    <code class="js keyword">function</code> <cod
>e class="js plain">validate(obj, lowval, hival) {</code> 
415                  </div>
416                  <div class="line number2 index1 alt1">
417                    <code class="js spaces">&nbsp;&nbsp;</code><c
>ode class="js keyword">if</code> <code class="js plain">((obj.val 
>ue &lt; lowval) || (obj.value &gt; hival))</code> 
418                  </div>
419                  <div class="line number3 index2 alt2">
420                    <code class="js spaces">&nbsp;&nbsp;&nbsp;&nb
>sp;</code><code class="js plain">alert(</code><code class="js str 
>ing">"Invalid Value!"</code><code class="js plain">);</code> 
421                  </div>
422                  <div class="line number4 index3 alt1">
423                    <code class="js plain">}</code>
424                  </div>
425                </div>
426              </td>
427            </tr>
428          </tbody>
429        </table>
430      </div>440      </p>
441      <p style="font-weight: 400;">
442        Ab JavaScript 1.8.1 werden setter nicht weiter aufgerufen
 >, wenn Eigenschaften in Objekten und Array-Initialisierern gesetz
 >t werden.
443      </p>
t433      Dann kann man die Funktion für jedes Formular-Element über t446      Die nachfolgende Sitzung mit <a href="https://developer.moz
>den onchange-event-Handler aufrufen und mit Hilfe von <code>this<>illa.org/en-US/docs/SpiderMonkey/Introduction_to_the_JavaScript_s
>/code> das Element übergeben:>hell" title="en-US/docs/SpiderMonkey/Introduction to the JavaScri
 >pt shell">JS-Shell</a> veranschaulicht wie getter und setter für 
 >ein benutzerdefiniertes Objekt o funktionieren können. Die JS-She
 >ll ist ein Programm das Entwicklern ermöglicht Javascript-Code im
 > Batch-Modus oder interaktiv zu testen. Bei Firefox kann man dies
 >e über die Tastenkombination Strg+Shift+K öffnen.
447    </p>
434    </p>448    <p>
435    <div class="container">449      Die Eigenschaften des Objekts o sind:
436      <div class="line number1 index0 alt2">450    </p>
437        <code class="html plain">&lt;</code><code class="html key451    <ul>
>word">input</code> <code class="html color1">type</code><code cla 
>ss="html plain">=</code><code class="html string">"text"</code> < 
>code class="html color1">name</code><code class="html plain">=</c 
>ode><code class="html string">"age"</code> <code class="html colo 
>r1">size</code><code class="html plain">=</code><code class="html 
> string">"3"</code> 
452      <li>
453        <code>o.a</code> — Eine Zahl
438      </div>454      </li>
439      <div class="line number2 index1 alt1">455      <li>
440        <code class="html spaces">&nbsp;&nbsp;</code><code class=456        <code>o.b</code> — Ein getter, der <code>o.a</code> plus 
>"html color1">onChange</code><code class="html plain">=</code><co>1 zurückgibt
>de class="html string">"validate(this, 18, 99)"</code><code class 
>="html plain">&gt;</code> 
441      </div>457      </li>
458      <li>
459        <code>o.c</code> — Ein setter, der den Wert von o.a auf d
 >en halben Wert von o.c setzt.
460      </li>
461    </ul>
462    <p>
463      &nbsp;
442    </div>464    </p>

Zurück zur Versionsgeschichte