[S3L3] this, Constructor, Prototype

Question 1

Was ist an this so besonders in Javascript?

Answer 1

• this is nicht davon abhängig wo es steht

- SONDERN wann und wo es gecallt wird

Question 2

Erkläre das Beispiel für eine Global Binding von this!

function sayName(name) {
console.log(this);
return name;

sayName(‘Sascha’);

Answer 2

-Im Global Scope/Global Binding ist der Value von this immer die Console/das Window Object

Question 3

Erkläre das Beispiel für eine implicit Binding von this!

const myObj = {
greeting: 'Hello',
sayHello: function (name) {
console.log(`${this.greeting} ${name}!`);
console.log(this);
}
};

myObjs.sayhello(‘Sascha’);

Answer 3

-Mann kann auf die SayHello Method referenzieren (Functions in Objekten werden Methods genannt!)

• console.log(this) zeigt auf das Objekt
• Denn immer wenn eine Function mit einem PUNKT Functionname gecallt wird bezieht sich this implicit auf das worauf es gecallt wird

Question 4

Erkläre das Beispiel für eine New Binding von this!

const Person(greeter) = {
this.greeting = 'Hello',;
this.greeter = greeter;
this.speak = function() {
console.log(this.greeting + this.greeter);
console.log(this);
};
}

const jerry = new Person('jerry ');
const sascha= new Person('sascha');

jerry. speak();
sascha. speak();

Answer 4

• Immer wenn eine Constructor Function genutzt wird

- Bezieht sich this auf die Instanz des Objects

Question 5

Erkläre das Beispiel für eine New Binding von this!

const Person(greeter) = {
this.greeting = 'Hello',;
this.greeter = greeter;
this.speak = function() {
console.log(this.greeting + this.greeter);
console.log(this);
};
}

const jerry = new Person('jerry ');
const sascha= new Person('sascha');

jerry. speak();
sascha. speak();

Answer 5

• Immer wenn eine Constructor Function genutzt wird
• Bezieht sich this auf die spezifische Instanz des Objects welche durch den Konstruktor erstellt und returned ist
• Erst durch das Aufrufen mit new weiß this auf was es sich beziehen soll

Question 6

Erkläre das Beispiel für eine Explicit Binding von this!

const Person(greeter) = {
this.greeting = 'Hello',;
this.greeter = greeter;
this.speak = function() {
console.log(this.greeting + this.greeter);
console.log(this);
};
}

const jerry = new Person('jerry ');
const sascha= new Person('sascha');

jerry. speak.call(sascha);
sascha. speak.apply(jerry);

sascha. speak();
jerry. speak();

Answer 6

• Durch .call, .bind oder .apply überschreibt man Objekte und kann sie zusammenbinden
• Man kann die Objekte vertauschen und das this damit auf andere Objekte beziehen lassen
• Immer wenn die call, apply oder bind Methode genutzt wird ist this explicitly definiert

Question 7

In welchem Scope ist this in folgendem Code?

console.log(this);

Answer 7

-Global/Window Object Scope

Question 8

Was ist Object Oriented Programming OOP Paradigma?

Answer 8

• Ein Paradigma, welches Objekte über Funktionen bevorzugt
• Daten werden der Logik bevorzugt
• Eine logische Prozedur, welche Daten als Input nimmt und sie verarbeitet und als Output zurückgibt.
• Oftmals in Java oder Python

Question 9

Ist Javascript eine Klassenbasierte Sprache by Default?

Answer 9

• Nein, Klassen sind nur Syntactic Sugar über das Constrcutor Pattern
• Objektorientierung ist nicht direkt in JS eingebaut

Question 10

Gibt es Klassenvererbung(Inheritance) in JS?

Answer 10

• Nein es gibt aber pseudo-classical inheritance und andere Wege eine Vererbung zu erreichen
• Alles basiert auf dem Constrcutor, dem new Keyword und Prototypes

Question 11

Was sind Constructor Functions?

Answer 11

• Constrcutors sind auch als Object Creator Functions bekannt
• Ihr Zweck ist es ein Object zu erhalten und ein neues Object zu erschaffen

Question 12

Werden Constructor Function mit großem Anfangsbuchstaben geschrieben/Capitalized?

Answer 12

• Ja

- function Person()

Question 13

Wie werden Klassen instanziert?

Answer 13

• Mit den new Keyword

- new Person()

Question 14

Was geschieht mit this nachdem man new genutzt hat?

Answer 14

-this wird zu dem Object welches von new returned wird

Question 15

Wie ist eine Constructor Function aufgebaut?

Answer 15

funmction Animal(object) {
this.name = object.name;
}

• Name des Ojects ist capitalized
• Jedem Konstructor wird ein Object übergeben
• this wird als neues Object returned

Question 16

Was geschieht in dieser Constructor Function?

function Person(attributes) {
this.age = attributes.age;
this.name = attributes.name;
this.homeTown = attributes.homeTown;
this.speak = function () {
return `Hello, I am ${this.name}`;
};
}

Answer 16

-jedes Atribut dem Object gesetted

-

Question 17

Wie sieht ein Konstruktor für eine neue Person aus?

Answer 17

const fred = new Person({
age : 32,
name: 'Fred',
homeTown: 'Bredrock'
});

fred.speak(); //Hello my Name is Fred

Question 18

Was ist das Object Prototype?

Answer 18

• Ist in jedes Object in Javascript eingebaut
• Erlaubt es Object Eigenschaften deliberately zu modifizieren
• Hilft bei Speicheroptimierung
• Erlaubt es Eigenschaften eines Objects auf ein anderes zu übertragen
• Muss mit Vorsicht genutzt werden, kann Methoden eines anderen Objects überschreiben

Question 19

Was ist ein Beispiel für ein Prototype, dass einem Object eine Methode verlieht?

Answer 19

function Person(attributes) {
this.age = attributes.age;
this.name = attributes.name;
this.homeTown = attributes.homeTown;
}

Person.prototype.speak = function () {
return Hello, my name is ${this.name};
};

Question 20

Was bieten Prototypes?

Answer 20

• Man kann Methoden im Prototype definieren und hat diese nicht im Object selbst
• Mann kann Prototypes nutzen um damit zu vererben

Question 21

Erkläre das Beispiel für eine Überschreibung via Prototype!

function Child (childAttributes {
Person. call(this, childAttributes); //Binding this to Person
this.isChild = childAtributes .isChild //this will be a special atribute to child
}

Child. prototype = Object . create (Person.prototype);
const pebbles = new   Child ({
age: 3, 
name: 'Pebbles',
homeTown: 'Bedrock'
});

Answer 21

pebbles. speak(); //Hello, my name is pebbles

Question 22

Schreibe eine Klasse Fruit, die attribute übernimmt!

Answer 22

function Fruit(attrs) {
this.type = attrs.type;
this.name = attrs.name; 
this.isRipe = attrrs.isRipe;
this.calories = attrs.calories;
}

Fruit.prototype.shipped = function(destination) {
console.log(Shipping ${this.name} to $[destination});
};

Fruit.prototype.calculateCals = function() {
console.log(Calories in ${this.name} are $[this.calories * 200});
};

const banana = new Fruit({
type: 'tree',
name: Banana',
isRipe: true;
calories: 100
});

console.log(banana.shipped(‘Hawaii’);

function Banana(bannaAttrs) {
Fruit.call(this, bananaAttrx)
this.doMonkeysLikeIt = bananaAttrs.doMoneysLikeIt;
}

Banana.prototype.checkIfMonkeysLikeIt = function() {
if (this.doMonkeysLLikeIt) {
return true; 
} else {
return false;
}
};

const newBanana = new Banana({
doMonkeysLikeIt: true, 
type: 'Tree',
name: 'Banana',
isRipe: false, 
calories: 0.1
});

console.log(newBanana)

Question 23

Was sind die 4 Methoden für Binding-Techniques in JS?

Answer 23

• Global Binding (window/terminal Obj)
• Implicit Binding (Object)
• New Binding (new Keyword für Instanz vom Object)
• Explicit Binding (call, pass, binding)

Question 24

Möchte man Global Binding vermeiden und wie würde man es tun?

Answer 24

-Ja, das möchte man

-

Question 25

Wie benutzt man ein explicites Binding?

Answer 25

testHello.call(myObj, 'Rosie');

Question 26

Was ist der Unterschied zwischen .bind und .call?

Answer 26

-bind hält die functions um sie später zu nutzen, aber führt diese nicht aus

Question 27

Was ist der Spread Operator?

Answer 27

``` const yourObject = { name: 'Dan Levy', city: 'Denver', favoriteFood: '🍕' } ``` const thingsYouEnjoy = ['Hiking', 'JavaScript', 'Teaching'] // Using yourObject and thingsYouEnjoy array, set the context of this on tellUsAboutYourself and call the function. ``` function tellUsAboutYourself(thing1, thing2, thing3){ return `Hi! My name is ${this.name}, I live in ${this.city}, and I enjoy ${thing1}, ${thing2}, and ${thing3}. I love to eat ${this.favoriteFood}.` } ``` /tellUsAboutYourself.call(yourObject, thingsYouEnjoy[0], thingsYouEnjoy[1], thingsYouEnjoy[2]); tellUsAboutYourself.call(yourObject, ...thingsYouEnjoy); Er lädt ein Array in eine Function als Argumente hinein.

Question 28

Warum benutzt man inheritance?

Answer 28

- Weil es gut für den Memoryload ist | - Weil man einfach Dinge zwischen Klassen austauschen kann

Question 29

Was bedeutet Prototype?

Answer 29

-Blueprint

Question 30

Was ist eine Constructor Function?

Answer 30

``` function Person(name) { this.name = name } ``` - Setzt Attribute für this - Hat kein Return

Question 31

Wie kann man eine Function einem Object zuordnen?

Answer 31

``` function Person(name) { this.name = name } ``` Person.prototype.sayName = function sayName() { console.log(`My name is ${this.name}`); ``` const dan = new Person('Dan') const cat = new Person('Rosie') ``` console. log(dan.name); //Dan cat. sayName(); //My name is Rosie

Question 32

Ist es für this this Keyword wichtig wo es steht oder wie es invoked wurde?

Answer 32

-Wie es invoked wurde!

Question 33

test

Answer 33

test