Creare subclase cu extends

In JavaScript se pot crea subclase (ca o clasa copil al altei clase, denumita parinte) folosind cuvantul: extends.
Subclasa mosteneste si poate extinde proprietatile si metodele din clasa parinte.
Daca subclasa nu are constructor(), va folosi metoda constructor() din clasa parinte.

- Exemplu:
<div id='ex_res'>Shows response</div>

<script>
//Clasa parinte
class User {
 constructor(name){
 //seteaza proprietate
 this.name = name;
 }

 //metoda
 sayHi(){
 return 'Hello '+ this.name;
 }
}

//Subclasa
class Gamer extends User {
 //metoda foloseste proprietatea name definita in clasa parinte
 sayBye(){
 return 'Goodbye '+ this.name;
 }
}

//Utilizare

//creaza un obiect al subclasei
//transmite un argument deoarece foloseste constructor() din clasa parinte
let ob_gbr = new Gamer('MarPlo');

//apeleaza metoda sayHi() definita in clasa parinte (User)
var hi = ob_gbr.sayHi();

//apeleaza metoda definita in subclasa
var bye = ob_gbr.sayBye();

//adauga valorile de la 'hi' si 'bye' in Div #ex_res
document.getElementById('ex_res').innerHTML ='<h3>'+hi+'<br>'+bye+'</h3>';
</script>

Clase JS - Mostenire, super

Subclasa mosteneste proprietatile si metodele definite in clasa parinte (inclusiv metodele statice).
Daca exista constructor() in subclasa, inainte de a folosi cuvantul "this" se aplica: super().
Pentru a rescrie proprietati si metode din clasa parinte, se definesc iar in subclasa.

- Exemplu:
<div id='ex_res'>Shows response</div>

<script>
//Clasa parinte
class Parent {
 constructor(name){
 //seteaza proprietate
 this.name = name;
 }

 //metoda
 sayHi(){
 return 'Hello '+ this.name;
 }
}

//Subclasa
class Child extends Parent {
 constructor(name){
 //aplica super ca sa includa constructor() din clasa parinte, transmitand argumentul necesar
 super(name);

 //aici se pot rescrie sau adauga proprietati noi

 this.site ='CoursesWeb.net';
 }

 //rescrie metoda din parinte
 sayHi(){
 return 'From Subclass, site: '+ this.site +'<br>Hello '+ this.name;
 }
}

//Utilizare

//creaza un obiect al subclasei Child
let obj = new Child('MarPlo');

//apeleaza metoda sayHi(), rescrisa in clasa copil
var hi = obj.sayHi();

//afisaza valoarea de la 'hi' in Div #ex_res
document.getElementById('ex_res').innerHTML ='<h2>'+hi+'</h2>';
</script>

Metode de clase si super

Cuvantul super se foloseste pentru a apela metodele corespunzatoare din clasa de baza (parinte). Se foloseste cand nu se vrea rescrierea completa a unei metode, ci adaugarea de instructiuni noi la cele deja existente in metoda din clasa de baza.
Clasele furnizeaza cuvantul "super" pentru:
- Exemplu:
<div id='ex_res'>Shows response</div>

<script>
//Clasa parinte
class Parent {
 constructor(name){
 //seteaza proprietate
 this.name = name;
 }

 //metoda
 sayHi(){
 return 'Hello '+ this.name;
 }
}

//Subclasa
class Child extends Parent {
 constructor(name, site){
 //aplica super ca sa includa constructor() din clasa parinte, transmitand argumentul necesar
 super(name);

 //aici se pot rescrie sau adauga proprietati noi
 this.site = site;
 }

 //refoloseste metoda din parinte
 sayHi(){
 var hi = super.sayHi(); //retine datele returnate de metoda

 //aici se pot adauga noi instructiuni

 return hi +'<br>From: '+ this.site;
 }
}

//Utilizare

//creaza un obiect al subclasei Child
let obj = new Child('MarPlo', 'CoursesWeb.net');

//apeleaza metoda sayHi() redefinita in clasa copil
var hi = obj.sayHi();

//afisaza valoarea de la 'hi' in Div #ex_res
document.getElementById('ex_res').innerHTML ='<h2>'+hi+'</h2>';
</script>

super la metode statice

Instructiunea "super" se poate aplica si la metode statice.
- Exemplu:
<script>
//clasa de baza
class Parent {
 //metoda statica
 static sayHi(name){
 alert('Hello '+ name +' de la Parinte');
 }
}

//Subclasa
class Child extends Parent {
 //redefineste metoda statica
 static sayHi(name, name2){
 super.sayHi(name); //include metoda de la parent
 alert('Hello '+ name2 +' de la Subclasa');
 }
}

//apeleaza metoda statica din subclasa
Child.sayHi('MarPlo', 'Gamv');
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag creaza un text ingrosat?
<q> <strong> <em>
<p>Adresa: <strong>http://CoursesWeb.net/</strong> - Tutoriale.</p>
Care din aceste coduri CSS afiseaza textul ingrosat?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
Ce functie JavaScript apeleaza o alta functie, in mod repetat, la un anumit interval de timp?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Clic pe variabila definita corect in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Care din urmatoarele forme ale verbului "travel" (a calatori) e la timpul Prezent Perfect?
have traveled shall travel had traveled
We have traveled in space.
- Noi am calatorit (deja) in spatiu.
Care din urmatoarele forme ale verbului "pintar" (a picta) se foloseste la Trecutul Imperfect?
ir a pintar pintaba pintó
La niña pintaba un arco iris.
- Fetita picta un curcubeu.
Subclase cu extends si Mostenire

Last accessed pages

  1. Gramatica limbii engleze - Prezentare Generala (49627)
  2. Articolul din limba engleza - The article (12281)
  3. Lectii audio-video de limba engleza (5302)
  4. Download carti electronice si programe pentru Limba Engleza (9076)
  5. Viitorul perfect - Exercitii incepatori (684)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3189)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2135)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1402)
  4. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (1030)
  5. Substantivul din limba engleza - The Noun (934)