Abend 4: 01.06.2016 - Engineering mit JavaScript (2)
Engineering mit JavaScript (2)
Engineering mit JavaScript (2)
Fichier Détails
| Cartes-fiches | 23 |
|---|---|
| Langue | Deutsch |
| Catégorie | Informatique |
| Niveau | Université |
| Crée / Actualisé | 12.11.2016 / 17.01.2018 |
| Lien de web |
https://card2brain.ch/box/abend_4_01_06_2016_engineering_mit_javascript_2
|
| Intégrer |
<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>
|
Créer ou copier des fichiers d'apprentissage
Avec un upgrade tu peux créer ou copier des fichiers d'apprentissage sans limite et utiliser de nombreuses fonctions supplémentaires.
Connecte-toi pour voir toutes les cartes.
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}]
-
- 1 / 23
-
