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 defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Subclase cu extends si Mostenire

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (45665)
  2. Curs PHP MySQL, Tutoriale si Scripturi PHP (20180)
  3. Verbe care schimba baza: o:ue (745)
  4. Coduri pt culori (29103)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (45053)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4951)
  2. Curs HTML gratuit Tutoriale HTML5 (4087)
  3. Curs si Tutoriale JavaScript (3759)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (3594)
  5. Curs CSS Online Tutoriale CSS3 (3509)