[S3L3] this, Constructor, Prototype Flashcards
Was ist an this so besonders in Javascript?
- this is nicht davon abhängig wo es steht
- SONDERN wann und wo es gecallt wird
Erkläre das Beispiel für eine Global Binding von this!
function sayName(name) {
console.log(this);
return name;
sayName(‘Sascha’);
-Im Global Scope/Global Binding ist der Value von this immer die Console/das Window Object
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’);
-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
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();
- Immer wenn eine Constructor Function genutzt wird
- Bezieht sich this auf die Instanz des Objects
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();
- 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
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();
- 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
In welchem Scope ist this in folgendem Code?
console.log(this);
-Global/Window Object Scope
Was ist Object Oriented Programming OOP Paradigma?
- 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
Ist Javascript eine Klassenbasierte Sprache by Default?
- Nein, Klassen sind nur Syntactic Sugar über das Constrcutor Pattern
- Objektorientierung ist nicht direkt in JS eingebaut
Gibt es Klassenvererbung(Inheritance) in JS?
- Nein es gibt aber pseudo-classical inheritance und andere Wege eine Vererbung zu erreichen
- Alles basiert auf dem Constrcutor, dem new Keyword und Prototypes
Was sind Constructor Functions?
- Constrcutors sind auch als Object Creator Functions bekannt
- Ihr Zweck ist es ein Object zu erhalten und ein neues Object zu erschaffen
Werden Constructor Function mit großem Anfangsbuchstaben geschrieben/Capitalized?
- Ja
- function Person()
Wie werden Klassen instanziert?
- Mit den new Keyword
- new Person()
Was geschieht mit this nachdem man new genutzt hat?
-this wird zu dem Object welches von new returned wird
Wie ist eine Constructor Function aufgebaut?
funmction Animal(object) {
this.name = object.name;
}
- Name des Ojects ist capitalized
- Jedem Konstructor wird ein Object übergeben
- this wird als neues Object returned
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}`;
};
}
-jedes Atribut dem Object gesetted
-
Wie sieht ein Konstruktor für eine neue Person aus?
const fred = new Person({
age : 32,
name: 'Fred',
homeTown: 'Bredrock'
});
fred.speak(); //Hello my Name is Fred
Was ist das Object Prototype?
- 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
Was ist ein Beispiel für ein Prototype, dass einem Object eine Methode verlieht?
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};
};
Was bieten Prototypes?
- Man kann Methoden im Prototype definieren und hat diese nicht im Object selbst
- Mann kann Prototypes nutzen um damit zu vererben
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'
});
pebbles. speak(); //Hello, my name is pebbles
Schreibe eine Klasse Fruit, die attribute übernimmt!
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)
Was sind die 4 Methoden für Binding-Techniques in JS?
- Global Binding (window/terminal Obj)
- Implicit Binding (Object)
- New Binding (new Keyword für Instanz vom Object)
- Explicit Binding (call, pass, binding)
Möchte man Global Binding vermeiden und wie würde man es tun?
-Ja, das möchte man
-
