JavaScript - klasy
Opublikowano ptk 15 maja 2020 w javascript • 2 min read
Klasy pozwalają na przypisanie metod bezpośrednio do (prototypów) obiektów przy pomocy jednego bloku (od ES6)
class Droid {
constructor(name, occupation) {
this.name = name;
this.occupation = occupation;
}
logDroid() {
return `this is ${this.name} a ${this.occupation} // metoda prototypowa -> __proto__: Object
}
}
const c3po = new Droid('C-3PO', 'Protocol droid');
const r2d2 = new Droid('R2-D2', 'Astromech droid');
console.log(c3po)
>> Droid {
name:"C-3PO",
occupation:"Protocol droid"
}
W ramach klasy można również przypisać metody statyczne - takie, które nie wymagają wprowadzenie danych do funkcji konstruktora, muszą być jednak poprzedzone słowem kluczem static
class Droid {
constructor(name, occupation) {
this.name = name;
this.occupation = occupation;
}
logDroid() {
return `this is ${this.name} a ${this.occupation}`
}
static greetings(stranger="you"){
return `Hey ${stranger}`;
}
}
console.log(Droid.greetings("IG-88"))
>> Hey IG-88
Pod-klasy/ sub-classes
Podklasy wprowadzone od ES6 są klasami stworzonymi na podstawie istniejących już klas i od nich dziedziczą podstawowe właściwości (jest to klonowanie istniejącej klasy z dodaniem nowych właściwości)
class Droid { // klasa wyjściowa => "rodzic"
constructor(name, occupation) {
this.name = name;
this.occupation = occupation;
}
logDroid() {
return `this is ${this.name} a ${this.occupation}`
}
static greetings(stranger="you"){
return `Hey ${stranger}`;
}
}
Słowo kluczowe super
Słowo kluczowe super uruchamia przy dziedziczeniu funkcjonalność prototypu/klasy -> używamy argumenty, które znajdują się u rodzica = super(name, occupation) ponieważ u rodzica constructor(name, occupation) i to znajdzie się wewnątrz konstruktora dziecka, które również zawiera argumenty dla rodzica jako argumenty konstruktora = constructor(name, occupation, height, homeWorld). To nie jest jednak wymagane w momencie gdy klasie dziedziczącej nie są przypisywane nowe właściwości np. kiedy przypisywane są jedynie nowe metody ("funkcje") - wówczas nowa klasa wykorzystuje konstruktor rodzica.
Jeśli chcemy odwołać się do dziedziczonej funkcji, wówczas poprzedzamy ją słowem kluczowym super np. super.logDroid()
Rozszerzenie klasy Droid klasą ProtocolDroid // tworzącym tym samym pod klasę klasy Droid
class ProtocolDroid extends Droid {
constructor(name, occupation, height, homeWorld) {
super(name, occupation); // odwołanie się do konstruktora rodzica
this.height = height;
this.homeWorld = homeWorld;
}
}
const c3po = new ProtocolDroid('C-3PO', 'Protocol droid', '1.75', 'Tatooine');
const me8d9 = new ProtocolDroid('ME-8D9', 'Protocol droid', '1.72', 'Takodana');
console.log(me8d9);
>> ProtocolDroid {
name:"ME-8D9",
occupation:"Protocol droid",
height:"1.72",
homeWorld:"Takodana"
} // __proto__ : Droid
console.log(me8d9.logDroid()) // odwołanie się do metody rodzica - dziedziczenie metod
>> this is ME-8D9 a Protocol droid
```JavaScript
class ProtocolDroid extends Droid {
constructor(name, occupation, height, homeWorld) {
super(name, occupation); // odwołanie się do konstruktora rodzica
this.height = height;
this.homeWorld = homeWorld;
}
// DO SPRAWDZENIA
talkToMe() {
return "talk to me! - " + super.logDroid()
}
static learnNewLanguage() { // stworzenie nowej własnej metody statycznej
return `I am unable to learn new languages`
}
}
console.log(ProtocolDroid.learnNewLanguage())
>> `I am unable to learn new languages`
```
Istnieje możliwość odwołania się do dziedziczonej metody statycznej np.
console.log(ProtocolDroid.greetings("IG-88"))
>> Hey IG-88
Klasy abstrakcyjne
Klasa na podstawie, której nie można tworzyć nowych obiektów - taką klasę wykorzystuje się jako początkowy plan dla zbioru klas dziedziczących ("dzieci") składającego się z więcej niż jednej klasy.
więcej na ten temat można poczytać w tym poście ze StackOverflow How do I create an abstract base class in JavaScript?
Źródła:
http://kursjs.pl/kurs/es6/class.php
https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Classes