Neben elementaren Variablen und Funktionen bilden Objekte (Objekt-Literale) den innersten ECMAScript-Kern.
Ein Objekt hat Name:Wert-Paare (auch properties:value-Paare genannt).
Name kann ein beliebiger String (einschließlich leerer String) sein. Wert kann jeder ECMScript-Wert außer undefined sein.
Für Objekte gibt es 2 Property-Zugriffsarten: obj.a oder obj['a']. Bei obj.a muß a den Konvetionen eines Variablennamens entsprechen. Bei obj['a'] kann ein beliebiger String (einschließlich des leeren Strings) als "zufriffskey" verwendet werden.
function teste_obj_property () {
var s, br = '<br />', my_property, obj = { };
my_property = 'b';
obj.a = "X";
obj.b = 'Y';
obj[''] = 'hallo leerer key';
s = '<pre>';
s += 'obj[my_property] = ' + obj[my_property]+ br;
s += 'obj.a = ' + obj.a + br;
s += "obj.b = " + obj.b + br;
s += "obj[''] = " + obj[""] + '</pre>';
document.write(s);
}
teste_obj_property();
Diese Funktion teste_obj_property() liefert die Ausgabe:
Das folgende Beispiel verwendet 2 Objekte o1, o2 und die Properties a, b, "c string". Im Beispiel wird o1.c mit delete o1.c gelöscht. Es werden die Vergleichsoperatoren == und === gegenüber gestellt. === führt einen Wert-Vergleich und einen Typ-Vergleich aus.
var o1 = { };
o1.c = 'C';
o1.b = 0;
o1.a = "A"; delete o1.c;
var o2 = {"c string": /\s/g, a: "A", b: "0",
eq2:function (a,b) { return a == b;},
eq3:function (a,b) { return a === b;}
};
var br = "<br />",
br2 = br + br, t=" | ",
s = "<pre>";
s += "o1.c = " + o1.c+br2;
s += "o2['c string'] = " + o2['c string'] +
" mit RegExp typeof o2['c string'] = " + (typeof o2['c string'])+br2;
s += "o2.eq2(null,1) = " + o2.eq2(null,0) + br2;
s += " | == o2.a | === o2.a" +br;
s += "-----|---------|---------" +br;
s += "o1.a" + t + (o1.a == o2.a) +t + (o1.a === o2.a)+br2;
s += " | == o2.b | === o2.b" +br;
s += "-----|---------|---------" +br;
s += "o1.b" + t + (o1.b == o2.b) +t + (o1.b === o2.b) + "</pre>";
document.write(s);
Ausgabe:
Nachfolgend wird eine eigene Object.my_keys-Funktion betrachtet, die für das Argument o lediglich ein einfaches Daten-Objekt, wie z.B. { a : "A", 'b' : "B"} verwendet.
ECMAScript 5 kennt die Funktion Object.keys( ), die die Key-Strings als Array zurück gibt. Object.keys( ) ist nicht bei älteren Browsern verfügbar, siehe z.B. die ECMAScript Kompatibilitätstabelle kangax-es5-compat-table
<script>
if(!Object.my_keys) {
Object.my_keys = (function(o) { 'use strict';
return function (o) { var r = [ ], p;
for (p in o) {
if( o.hasOwnProperty(p) ) {
r.push(p);// +' '+typeof p);
}
} return r;
};
}());
}
var r = [ ],
obj = { 65 : "A0", 'b' : "B1", "" : "C2" },
arr = [ "u0", "v1", "w2" ],
mykeys = Object.my_keys,
eskeys = Object.keys;
r.push( Object.keys({ a : "A", 'b' : "B"}) );
r.push( mykeys(obj) );
r.push( mykeys(arr) );
r.push( eskeys(obj)[2] === mykeys(obj)[2] );
r.push( obj[eskeys(obj)[2]] === obj[""] );
document.write(r.join('<br />') );
</script>
Anzeige:
Hier wird als Beispiel ein a-Tags verwendet und mit onclick und href zugegriffen. Wenn onclick return true zurück gibt, so wird nachfolgend auch das href ausgeführt. Was wird durch das folgende a-Tags angezeigt?
<a id="a-test" onclick="alert(this.id);return true;"
href="javascript:alert(this.document.getElementById('a-test').nodeName);">teste </a>
teste Merke: Bei href meint this das window-Objekt und bei onclick meint this das a-Element
Zur Property-Anzeige von DOM-Elementen kann natürlich ein Debugger verwendet werden.
Wie erfolgt der ECMAScript-Zugriff auf Properties von DOM-Elementen?
Beispiel:
function zeige_dom_attribute(that, key_arr) { var i, key, tg='', r=["<pre>"];
key_arr = key_arr||['nodeName','id','onclick','href','target','innerHTML'];
for (i = 0; i < key_arr.length; i += 1) { key = key_arr[i];
if (that.hasOwnProperty(key)) {
if (key === 'nodeName') {
tg = that[key].toLowerCase(); r.push('<' + tg);
} else if (key === 'innerHTML') {
r.push('>' + that[key] + '<\/' + tg + '>');
} else {
r.push('\n' + key + '="' + that[key].toString().replace(/(\s)/g,' ') + '"');
}
}
} r.push("</pre>"); return r.join("");
}
Das folgende Beispiel wird 2 mal betrachtet (mit geringen Codeunterschieden). Es werden seiten-eindeutige Identifizierer id="myid_a" bzw. id="myid_b" verwendet. Das folgende Beispiel a verwendet den seiten-eindeutigen Identifizierer id="myid_a" für den Zugriff auf das div-Element.
<div id="myid_a" title="nachher">vorher</div>
a) Welche Fehler können in Verbindung mit Objekten (häufig) auftreten? Ist der id-String id="myid_a" korrekt, dann funktioniert mit var div = document.getElementById(id); der Zugriff auf das div-Element. Durch div.innerHTML = div.title wird div.title direkt sichtbar, falls div.title vorhanden ist.
Ist der id-String korrekt, so wäre der var div = document.getElementById(id) - Zugriff auf das browser-interne Objekt div korrekt. Wäre nun im div kein title-attribut vorhanden, so liefert div.title den Wert undefined und (div.title || 'zugriffsfehler') den String 'zugriffsfehler', d.h. es erfolgt div.innerHTML = 'zugriffsfehler'; und dadurch wird im div-innerHTML dann "zugriffsfehler" angezeigt.
Ist der id-String nicht korrekt, so bleibt das (nicht referenzierte) div-Objekt ungeändert. Infolge von div = document.getElementById(id) || {innerHTML:''} das Objekt div = {innerHTML:''} angelegt, das kein div.title-Property hat und (div.title || 'zugriffsfehler') liefert den String 'zugriffsfehler'. Wegen div.innerHTML = 'zugriffsfehler' wird {innerHTML:''} gemäß {innerHTML:'zugriffsfehler'} überschrieben und die alert-Box zeigt div.innerHTML, d.h. 'zugriffsfehler' an.
var id = "myid_a",
div = document.getElementById(id) || {innerHTML:''};
div.innerHTML = div.title || 'zugriffsfehler';
if (!div.nodeName) { alert(div.innerHTML); }
Ausgabe:
Das folgende Beispiel b verwendet den seiten-eindeutigen Identifizierer id="myid_b" für den Zugriff auf das div-Element.
<div id="myid_b" title="nachher">vorher</div>
b) Welche Fehler können in Verbindung mit Objekten (häufig) auftreten? Ist der id-String id="myid_b" korrekt, dann funktioniert mit div = document.getElementById(id); der Zugriff auf das div-Element. Durch div.innerHTML = div.title wird div.title direkt sichtbar, falls div.title vorhanden ist.
Ist der id-String korrekt und wäre im div kein title-attribut vorhanden, so liefert div.title den Wert undefined und (div.title || 'zugriffsfehler') den String 'zugriffsfehler'. Im div-innerHTML wird dann "zugriffsfehler" angezeigt.
Ist der id-String nicht korrekt, so löst try {} das catch-Ereignis aus und übergibt in der Variablen e eine eval-Fehlermeldung (etwa "TypeError: Cannot convert 'div' to object"), die in einer alert-Box angezeigt wird. Die Variable e wird nicht definiert, sondern wie ein Funktionsparameter betrachtet, der vom System genutzt wird.
var div, id = "my_id";
try {
div = document.getElementById(id);
div.innerHTML = div.title || 'zugriffsfehler';
} catch(e) {
alert(e);
}
Ausgabe:
Hier ist eine Self-Assessment-Möglichkeit für ECMAScript (Objekte)