c2b_default

Abend 4: 01.06.2016 - Engineering mit JavaScript (2)

Engineering mit JavaScript (2)

Engineering mit JavaScript (2)

23
0.0 (0)

Kartei Details

Karten 23
Sprache Deutsch
Kategorie Informatik
Stufe Universität
Erstellt / Aktualisiert 12.11.2016 / 17.01.2018
Weblink
https://card2brain.ch/box/abend_4_01_06_2016_engineering_mit_javascript_2
Einbinden
<iframe src="https://card2brain.ch/box/abend_4_01_06_2016_engineering_mit_javascript_2/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
Lernen

Object Literal vs Function Literal

Mit welchen Einschränkungen in Bezug auf OOP muss man "leben" wenn man sich anstatt für die "Function Literal" Schreibweise für die "Object Literal" Schreibweise entscheidet?

In der "Object Literal" Schreibweise gibt es keine Möglichkeit private Variablen und Funktionen zu definieren.

Wie ist in JavaScript die Vererbung gelöst?

ede Funktion/Konstruktor hat eine modifizierbares Feld 'prototype'. Auf diesem wird die Superklasse referenziert und der Konstruktor der Klasse definiert:

function Animal() {
   ...
}

function Panda() {
...
}
Panda.prototype = new Animal();
Panda.prototype.constructor = Panda;

Der JavaScript interpreter schaut, wenn er die Methode nicht findet, gemäss der prototype chain nach, ob es in der oberen Funktion die Methode gibt.

Welche Zeilgen haben einen Primitiven Datentyp? (mehere Antworten möglich)

console.log('a)'+ typeof new String('Test String'));
console.log('b)'+typeof new String('          space String       ').trim());
console.log('c)'+typeof (2 * new Number(10)));
console.log('d)'+typeof new Number(10 + 3));
console.log('e)'+typeof 'true'.valueOf());
console.log('f)'+typeof Number('sdffdh'));

b),c),e),f)

 

 

Console Output:

a)object
b)string
c)number
d)object
e)string
f)number

Welche Ausgaben erzeugen die beiden console.log Aufrufe?

function Thing(color){
    this.myColor = color;
    this.setColor = function(newColor){
      this.myColor = newColor;
    };
}

var myThing = new Thing("white");

myThing.setColor("red");

console.log("Color 1: " + myThing.myColor);

var yourThing = myThing.setColor;

yourThing("blue");

console.log("Color 2: " + myThing.myColor);

 

Antworten:

a) Color 1: red, Color 2: red

b) Color 1: red, Color 2: blue

c) Color 1: red, Color 2: undefined

a)

Beschreibung:
Durch die Zuweisung:  var yourThing = myThing.setColor;  wird "this" auf das "globale" Objekt gesetzt.
Der Aufruf   yourThing("blue");    verändert dadurch die Farbe im Objekt "myThing" nicht.

Besser: Zwischenspeichern des Objekts this in self:

function Thing(color){
    var self = this;
    self.myColor = color;
    self.setColor = function(newColor){
      self.myColor = newColor;
    };
}

Welche Arten von Object Creation gibt es ?

  • Object Literal

var newObject = { color: “green”, colorize: function() { } };
 

  • Object Function

var newObject= newObject();
newObject.color= “green”;
newObject.colorize: function() { };

 

  • Object.CreateStatic Method

var newObject = Object.create(House.prototype);

  • Constructor Function

var newObject = new House("green", ...);

Was ist der Unterschied zwischen folgenden Codeteilen?

1.
function House(color) {

  this.facadeColor = color;

  this.paint = function(newColor) {

    this.facadeColor = newColor; 

  };

}

 

2.

function House(color) {

  this.facadeColor = color;

}

House.prototype.paint = function(newColor) {

  this.facadeColor = newColor;

}

Erste Variante bringt einen wesentlichen Nachteil. Diese Methode existiert pro Objektinstanz und führt daher oft zu unnötig hoher Speicherauslastung. Anders beim zweiten Beispiel, diese Methode wird über die ableitenden Objektinstanzen geteilt.

Was wird in die Konsole geloggt?

Snippet:

var variable= "september";
variable.vowels = 3;
console.log(variable.vowels);

 

Auswahl:

a) null

b) 3

c) undefined

Lösung: c

Pseudo-Code:

var primitive = "september";
primitive.vowels = 3;
//new object created to set property
(new String("september")).vowels = 3;
 
primitive.vowels;
//another new object created to retrieve property
(new String("september")).vowels; //undefined

Welches Entwurfsmuster wurde implementiert?

var pattern = (function () {
    var privateVar;

    function privateMember(arg1, arg2) {
        //code
    }

    return {
        member: function (arg1, arg2) {
            //code
        }
    };
}());

Das Entwurfsmuster Module.

Dieses Muster verhindert den Zugriff auf die private Variable privateVar.

Der Zugriff erfolgt über die nach dem Return definierten Memberfunktionen.

Der Aufruf erfolgt mit pattern.member().

Was ist der Unterschied zwischen Scope und Context?

Jeder Funktionsaufruf besitzt sowohl einen Scope wie auch einen Context.

Scope
Grundsätzlich ist der Scope funktionbasiert. D.h. der Scope betrifft immer den Geltungsbereich von Variablen (und Funktionen) beim Aufruf einer Funtkion resp. Funktionskette und ist eindeutig für jeden Funtkionsaufruf.

Context
Grundsätzlich ist der Context objektbasiert. D.h. der Context ist immer der Wert von this, welches eine Referenz auf das Objekt ist, das Eigentümer des aktuell ausgeführten Codes ist.

Für welche Zwecke eignet sich das Singleton Pattern?

  • Wenn man nur ein einziges Objekt/Instanz einer Klasse haben möchte
  • Als einzelner Zugangspunkt für Funktionen
  • Lazy Initialisierung, dadurch kann die Start Up Zeit reduziert werden

Was sind die wichtigsten Konzepte bei der objektorientierten Programmierung?

  • Datenkapselung
  • Abstraktion
  • Polymorphismus
  • Vererbung

Es2015: Module Benefits?

  • No more IIFE

(function() [
  "use strict";

}());

  • "use strict" is on by default in ES2015 Modules
  • console.log(this): // results in undefined not window

ES2015: const is not const

const numbers = [1, 2, 3];

numbers.push(4);
numbers has the values: [1, 2, 3 ,4]

 

 

const numbers = [1, 2, 3];

Object.freeze(numbers);
numbers.push(4);
// TypeError

ES2015: Spread Operator with Objects

const data = {x:1, y:2};

const result = {
  name:"results",
  ...data

}

result?

result has the values {name:"results", x:1, y:2}

ES2015: Spread Operator

const numbers = [1, 2, 3];

const result = [...numbers, 4,5,6];

 

what is the result?

result: [1, 2, 3, 4, 5, 6]

Crazy Operators

const value = 1;

const result = !!value;

output result?

output result: true

first bang results in a coercion from a number to boolean -> false
second bang negate from false to true

ES2015: Object Desctruturing sample

const {length} = "Word!"

result?

result: {5}

ES2015: Syntax Exercise

const employee = {
  first: "Scott",
  address: {
    state: "Maryland",
    country:"USA"
  },
  numbers: [45, 55, 66]
};

const { first,
             address: {state},
             number:[,second]

           } = employee;

 

answer: {first:"Scott, address:{"Maryland"}, number:55}

ES2015: Object DESTRUCTURING

const address = { state: "Maryland"};

const {state="New York", country="USA"} = address;

 

answer: state:"Maryland"

Object literals on the right side: Object CONSTRUCTION

Object literals on the left side: Object DESTRUCTURING

Es2015: Array Desctructuring

const array1 = [1, 2. 3 ];

const [x,y] = array1;

answer:

brackets on the right side is CONSTRUCTING an array

brackets on the left side is DESCTRUCTURING  an array

Es2015: Make a Template Engine from String Literal syntax

const templateFunction = (x,y) => ` ${x} + ${y} = ${x + y}`;

const four = templateFunction(2,2);

 

output four?

output: 2 + 2 = 4

Es2015: arrow function in jquery callback disables jquery from using bind function

$(".button").on("click", () => this.nae = "clicked");

arrow function does statically bind this and jquery can not change this anymore

Es2015: Return an Object Literal

const numbers = [1, 2, 3];

const result = number.map(n => ({ value: n}):

output?

output: [ {value:1}, {value:2}, {value:3}]

Lernen