Hinweise [mehr]

ECMAScript (Objekte)

Nächste Vorherige Lösung Punkte

An welchen Objekt-Kontext wird this gebunden?
<script>
var name = "aussen", 
    obj0 = {
        name : "innen",
        getName : function() {
           return function() { return this.name; };
        }
    }, 
    x = obj0.name,
    y = obj0.getName()();
</script>
Die Variable x enthält den String 'innen'
Die Variable y enthält den String 'aussen'
Die Variable y enthält den String 'innen'
Nachfolgend sind 2 Beispiele ( Methoden a, b ): Die Ergebnisse werden in den Array sum geschrieben. Bei der Methode a wird eine globale Funktion Fn() definiert, die eine inneren this.add - Funktion hat. Bei der Methode b wird ein Objekt r3 angelegt. Das Objekt r4 erbt r3. Richtige Antworten bitte ankreuzen.
var r1, r2, r3, r4, sum = [ ];

// Methode a:
function Fn(a, b){ this.a = a; this.b = b;
  this.add = function() { return this.a + this.b; };
}
r1 = new Fn(4,1);  
r2 = new Fn(47,11);
sum[1] = r1.add(); sum[2] = r2.add();

// Methode b:
var r3 = {a:4, b:1, add:function(){return this.a + this.b;}}; 
r4 = Object.create(r3); 
r4.a = 47; 
r4.b = 11; sum[3] = r3.add(); sum[4] = r4.add();
Es wird ein Syntaxerror ausgegeben.
sum ist [ 5,58,5,58 ]
sum ist [ undefined, 5,58, 5,58 ]
Es geht um das nachfolgend deklarierte Objekt-Literal obj, das fünf key-value-Paare (Properties) hat. Es gibt die key's a, 'd', add, s, x. Die zugehörigen Werte sind in der obj-Deklaration ersichtlich. Ein Zugriff auf den Wert des obj-key a erfolgt mit obj.a
<script>
var obj = { 
  a:  'A',
 'd': '64',
 add: function(x, y) { var r = x + y; return r; },
 s:'',
 x: 12
}; 

var v1 = obj.add(4,40);
var v2 = window.parseInt(obj.d, 16);
var v3 = v1 + v2; 
var v4 = obj.add(v3/obj.x,obj.add(-2,-6));

document.write('v1='+v1+
  '<br \/>v2='+v2+
  '<br \/>v3='+v3+
  '<br \/>v4='+v4
);
</script>
var v1 = obj.add(4, 40); entspricht var v1 = 44;
var v2 = window.parseInt(obj.d, 16); entspricht var v2 = 100;
var v3 = v1 + v2; entspricht var v3 = 144;
var v4 = obj.add(v3/obj.x, obj.add(-2,-6)); entspricht var v4 = 4;
Es geht um die Funkton extend_obj(), die als Parameter mehrere Objekte haben kann. In das erste (Parameter-) Objekt werden die key-value-Paare der nachfolgenden Objekte geschrieben. Unten sind zu extend_obj() mehrere Test-Aufrufe angegeben. Bitte richtige Aussagen ankreuzen.
<script>
function extend_obj(){ 
  var i, key, a = arguments;
  for( i=1; i < a.length; i += 1 ) {
    for( key in a[i] ){
      if( a[i].hasOwnProperty(key) ) {
          a[0][key] = a[i][key];
      }
     }
  } return a[0];
}

var obj1 = extend_obj( {      },  { a:"A" } ); 
var obj2 = extend_obj( { bb: 22 },  { "22": "CC",  dd:"DD" } ); 
var obj3 = extend_obj( Object.create(null), {eee:"EEE", fff:333} ); 
</script>
obj1.a liefert den String A
obj2.bb + obj2["dd"] + obj2['22'] liefert den String 22DDCC.
obj2.bb + obj2["dd"] + obj2['22'] liefert eine Fehlermeldung.
obj3.eee + obj3["fff"]; lliefert eine Fehlermeldung.
obj3.eee + obj3["fff"]; liefert den String EEE333.
typeof obj2.__proto__ liefert object
typeof obj3.__proto__ liefert undefined
Es geht um objekt-gebundene Namespaces. Die folgenden Funktionen "fn_..." beziehen sich auf unterschiedliche Objekte. Richtige Antworten bitte ankreuzen
this.str = "this (Window-Namespace)";/*this.str*/

var arr = [ ], 
    str = "this ( glob Window-Objekt )";

arr.push( this.str );                /* 1 */ 

var modul = { // modul mit inneren Variablen
   str: "this ( Modul-Objekt )",
   fn: function() { return this.str; }
};

arr.push( modul.fn() );              /* 2  */ 

var fn_von_modul = modul.fn;
arr.push( fn_von_modul() );          /* 3 */ 

var fn_gebunden_an_modul = modul.fn.bind(modul);
arr.push( fn_gebunden_an_modul() );  /* 4 */ 

// Anzeige: alert( arr.join("\n") );
Bei /* 1 */ wird benutzt "this ( glob Window-Objekt )"
Bei /* 2 */ wird benutzt "this ( Modul-Objekt )"
Bei /* 3 */ wird benutzt "this ( glob Window-Objekt )"
Bei /* 4 */ wird benutzt "this ( Modul-Objekt )"
Es geht um unterschiedliche Möglichkeit, wie nachfolgend deklarierte Objekt-Literale und Property-Zugriffe geschrieben werden können. Richtige Antworten bitte ankreuzen.
<script>
/*1*/ var add = function (x, y) { var r = x + y; return r; };

/*2*/ function mul (x, y) { var r = x * y; return r; }

/*3*/ 
var myobj = { };
    myobj.add = add;
    myobj.mul = mul;

/*4*/
var obj = { add: function(x, y) { var r = x + y; return r; },
            sub: function(x, y) { var r = x - y; return r; }
          };
/*5*/
var wert2 = add(1,1), wert6 = myobj.add(3,3), wert8 = obj.add(4,4);
/*6*/
var sum_num    =       wert2 + wert6 + wert8;
var sum_string = " " + wert2 + wert6 + wert8;
document.write(sum_num + sum_string);
</script>
Bei /*1*/ wird der Variablen add eine anonyme Funktion zugewiesen.
Bei /*2*/ wird eine Funktions-Anweisung mit dem Funktionsnamen mul verwendet. Eine Funktions-Anweisung ist die Kurzform einer Variablenzuweisung einer anonymen Funktion an die Variable.
Bei /*3*/ wird ein leeres Objekt obj = { } angelegt.
Bei /*3*/ werden mit obj.add = add; und obj.mul = mul; in obj Paare key:value eingetragen (Properties).
Bei /*4*/ wird bei der Objekt-Deklaration obj = {key1:value1, key2:value2} als key die Funktionsnamen und als value die anonyme function() {...} eingetragen.
Ein Aufruf var wert2 = add(1,1);) bei /*5*/ ruft die Funktion unter 1 auf.
Ein Aufruf var wert6 = myobj.add(3,3); bei /*5*/ wie bei /*6*/ ruft über /*3*/ den key des Objektes myobj die add-Funktion unter 1 auf.
Ein Aufruf var wert8 = obj.sub(4,4); bei /*5*/ ruft über den key des Objektes obj die objektinterne Funktion sub auf.
Bei /*6*/ ergibt var sum_num = wert2 + wert6 + wert8; die Zahl 16 und typeof sum_num liefert 'number'
Bei /*6*/ ergibt var var sum_string = " "+ wert2 + wert6 + wert8; den String 268 und typeof sum_string liefert 'string'
Es werden die Property-Werte eines Objekt-Literals obj werden in den Array arr 'gepushed' und mit arr.join(separator-String) zu einem String verkettet. Bitte richtige Aussagen ankreuzen.
<div id="my_test_div">/*1*/</div>
<script>
/*2*/ 
var ss = '',
  obj = { a:'A', 
         'b': 'B', 
         'c-char': 'C', 
         '1': 123
  }, arr = [ ]; 
/*3*/ 
    arr.push(obj.a);
    arr.push(obj.b);
    arr.push(obj['a']);
    arr.push(obj['c-char']); 
    ss = arr.join(' | ');

window.onload = function() { /*4*/ 
  document.getElementById('my_test_div').innerHTML = ss;
};
</script>
Bei /*1*/ ist ein div-Tag id="my_test_div", das var divElement=document.getElementById('my_test_div'); und divElement.innerHTML = "/*1*/"; entspricht.
Bei /*2*/ beginnen die Variablen-Deklaration, bei /*3*/ enden die Variablen-Deklaration und es folgen Statements.
Die Statements bei /*4*/, d.h. in window.onload = function() {...}; werden ausgeführt, nachdem die Seite vollständig geladen wurde. Das Statements bei /*4*/ wird nur einmal ausgeführt. Eine HTML-Seite kann mehrere Anweisungen window.onload = function() {...}; haben.
Siehe bei /*3*/. Die Schreibweise obj['a'] kann hier durch die einfachere Schreibweise obj.a ersetzt werden.
Siehe bei /*3*/. Es ist nicht möglich, die Schreibweise obj['c-char']) durch obj.c-char zu ersetzen.
Bevor die HTML-Seite nicht fertig geladen ist, zeigt das div-Tag id="my_test_div" die Zeichenkette "/*1*/" an.
Nachdem die HTML-Seite fertig geladen ist, zeigt das div-Tag id="my_test_div" die Zeichenkette "A | B | A | C" an.
An welchen Objekt-Kontext wird this gebunden?
<script>
var name = "aussen", 
    obj1 = {
        name : "innen",
        getName : function() { var that = this;
           return function() { return that.name; };
        }
    }, 
    x = obj1.name, 
    y = obj1.getName()();
</script>
Die Variable x enthält den String 'innen'
Die Variable y enthält den String 'aussen'
Die Variable y enthält den String 'innen'
Bei ECMAScript ist this ein Schlüsselwort. An welches Objekt ist in einer HTML-Seite this gebunden, wenn die funktion setze_gelb()
<body>
 <script>
 function setze_gelb() { 
   this.document.body.style.backgroundColor = '#cc0'; 
 }
 setze_gelb();
 </script>
</body>
im globalen body-Bereich der Seite steht? Richtige Aussagen bitte ankreuzen.
Der Aufruf setze_gelb(); wird ohne Syntax-Fehler ausgeführt.
Bei dem Aufruf setze_gelb(); wird this an das window-Objekt gebunden.
Bei dem Aufruf von setze_gelb(); wird ein Fehler ausgegeben (Fehlerkonsole), der darauf hinweist, daß kein backgroundColor existiert.
Das folgende Objekt obj hat die Properties add1, add2, add3.
Die Funktion add1 verwendet this.x,
die Funktion add2 verwendet obj.x,
die Funktion add3 verwendet x.
Welche Aussagen sind richtig?
<script>
var obj = {  
    add1: function(num) { 
            this.x += num; 
            this.arr.push(this.x); return this; },
    add2: function(num) { 
            obj.x += num; 
            obj.arr.push(obj.x); return obj; },

    add3: function(num) { 
            try { x += num; 
            } catch(e) { this.arr.push(e); 
            } return obj; }, 
    x: 4711, arr:[ ]
}; 

obj.add1(-4700).add2(-2).add3(-2);

document.write(  obj.arr.join('<br />') );
</script>
Im der obj-Literaldeklaration steht das arr-Property hinter den Funktionen. Deshalb liefert jede Funktionsausführung Fehler.
Eine direkte Funktionsverkettung obj.add1(-4700).add2(-2).add3(-2); ist falsch.
Bei add3 ist try { ... } catch(e) { ... } notwendig, um einen Abbruch der Auführung zu vermeiden. Die generierte Fehlermeldung schreibt das Ausführungssystem in die "Callback-Variablen" e
Das obige Code-Fragment liefert etwa die Ausgabe:
11
9
ReferenceError: Undefined variable: x
Die folgende Funktion arr_to_obj() gibt ein Objekt zurück. Richtige Antworten bitte ankreuzen.
<script>
function arr_to_obj(arr, val) {
  var i, a, obj = {};
  for(i = 0; a = arr[i]; i += 1){
    obj[a] =   val + '=' +a;
  } return obj;
}

var obj = arr_to_obj(['0', 'a', "2", 1, 0], "key");

</script>
document.write(obj['0']) gibt key=0 aus
document.write(obj['a']) gibt key=a aus
document.write(obj["2"]) gibt key=2 aus
document.write(obj["1"]) gibt key=1 aus
document.write(obj[ 1 ]) gibt key=1 aus
document.write(obj[ 0 ]) gibt key=0 aus
Das Objekt obj enthält 4 Properties
Das folgende Codefragment ist zu durchdenken. Welche Aussagen sind richtig?
<script>
function test(obj) {
  return (obj && obj.length === +obj.length);
}

var a = [ ];
a.push( test( [ 0, 1, 2, 3, 4 ] ));
a.push( test( "abcdefghijklmno" ));
a.push( test( { a:'A', b:'B' }  ));
a.push( test(   123456789       ));
a.push( test(   document        ));
alert('erg1 = [' + a.join(', ') + '];' );

a[0] = test( [ 0, 1, 2, 3, 4 ] );
a[1] = test( "abcdefghijklmno" );
a[2] = test( { a:'A', b:'B' }  );
a[3] = test(   123456789       );
a[4] = test(   document        );
alert('erg2 = [' + a.join(', ') + '];' );
</script>
Als Anzeige ergibt sich erg1 = [true, true, false, false, false];
Als Anzeige ergibt sich erg2 = [true, true, false, false, false];
Wird das obige (obj && obj.length === +obj.length); durch
(obj && obj.length === +obj.length); ersetzt, so ergibt sich erg1 = [true, true, true, true, true];
Es geht um ein Objekt erde, das den Erd-Radius und Formeln zur Berechnung des Erd-Umfanges enthält.
<script>
var erde = { 
  radius          :  6373,
  umfang_return   : 'return ( 2*r*Math.PI ).toFixed( 1 )',
  umfang_new_fn   : new Function( 'r', 'return ( 2*r*Math.PI ).toFixed( 1 );'),
  umfang_anonym_fn: function( r ) {return ( 2*r*Math.PI ).toFixed( 1 );}
};
/* 1 */
</script>
Wird bei /* 1 */ alert(erde.umfang_return(erde.radius) aufgerufen, so wird 40042.7 angezeigt
Wird bei /* 1 */ alert(erde.umfang_new_fn(erde.radius)) aufgerufen, so wird 40042.7 angezeigt
Wird bei /* 1 */ alert(erde['umfang_anonym_fn'](erde['radius'])) aufgerufen, so wird 40042.7 angezeigt
Wird bei /* 1 */ alert(JSON.stringify(erde)) aufgerufen, so wird
{"radius":6373,"umfang_return":"return 2*r*Math.PI.toFixed(1)"} angezeigt
Hier geht es um 2 unterschiedliche Möglichkeiten, ein Objekt von einem Objekt zu erben. Die obere Form verwendet .prototype und new und die nachfolgende Form verwendet Object.create(). Beide Formen sind zu durchdenken. Achtung! Bitte groß O bzw. klein o bei Obj0 bzw obj0 unterscheiden. Richtige Antworten bitte ankreuzen.
<script>
//=== ECMAScript 3.x mit .prototype und new: 
var Obj0 = function ( ) { };
    Obj0.prototype = { wert: null, 
         set_wert: function (wert) { this.wert = wert; }
    };
var Obj1 = function ( ) { }; Obj1.prototype = new Obj0( );
var Obj1 = new Obj1( );      Obj1.set_wert(4711);

//=== uebersichtlicher mit Object.create():
var obj0 = Object.create({ wert: null,
             set_wert: function(wert){ this.wert = wert; }
           });
var obj1 = Object.create( obj0 ); obj1.set_wert(4712);
</script>
Ein alert( Obj1.wert ) am Code-Ende zeigt 4712 an
Ein alert( obj1.wert ) am Code-Ende zeigt 4711 an
Nachfolgend wird eine eigene Funktion Object.my_keys(obj) betrachtet, die für das Argument obj ein einfaches Daten-Objekt, wie z.B. { a : "A", 'b' : "B"} verwenden kann.
<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" ];
</script>
Hinweis zu ECMAScript 5. ECMAScript 5 kennt die Funktion Object.keys( ), die die Key-Strings als Array zurück gibt. Object.keys( ) ist bei älteren Browsern nicht verfügbar. [mehr]
Object.my_keys(obj) gibt den Array ["65", "b", ""] zurück.
Object.my_keys(arr) gibt den Array ["0", "1", "2"] zurück.
Object.my_keys(obj)[2] === Object.my_keys(obj)[2] liefert den Wert true.
obj[""] === obj[Object.keys(obj)[2]] liefert den Wert true.
Mit var mykeys = Object.my_keys; kann anstelle von Object.my_keys(obj) auch geschrieben werden mykeys(obj);
Die Strings str1 str2 sollen in die Objekte gaia1, gaia2 umgewandelt werden. Zum Testen werden hierzu JSON.parse() und eval() verwendet. Bitte sorgsam durchdenken. Richtige Antworten ankreuzen.
<script>
var str1 = '{"radius":6373,"umfang_return":"return (2*r*Math.PI).toFixed(1)"}',
    str2 = '{"radius":"6373","umfang_return":"return (2*r*Math.PI).toFixed(1);"}',
    str3 = '{radius:6373,umfang_anonym_fn:function(r){return (2*r*Math.PI).toFixed(1);} }',
    a = 3, b = "4", c = a * b, werte, typs,
 
    gaia1 = JSON.parse(str1),
    gaia2 = JSON.parse(str2),
    gaia3 = eval("(" + str3 + ")"), 

    fn1 = new Function("r",gaia1["umfang_return"]), 
    fn2 = new Function("r",gaia2["umfang_return"]),
    fn3 = gaia3['umfang_anonym_fn'];//,

  werte = [  a * b, 
             gaia1.radius, 
             gaia2['radius'],
            +gaia2.radius  ]; 

  typs = [ typeof  gaia1.radius, 
           typeof  gaia2['radius'], 
           typeof +gaia2['radius'] ],

  fn_werte = [ fn1(gaia1['radius']), 
               fn2(gaia2['radius']), 
               fn3(gaia3['radius'])  ]; /* 1 */
</script>
Ein alert( typs an der Stelle /* 1 */ zeigt number, string, number
Ein alert( werte ) an der Stelle /* 1 */ zeigt 12, 6373, 6373, 6373
Ein alert( fn_werte ) an der Stelle /* 1 */ zeigt 40042.7, 40042.7, 40042.7