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:
- super(parametri) - apeleaza constructor() din parinte, cu parametri necesari (numai in constructor()).
- super.metoda(parametri) - awpeleaza o metoda din clasa de baza. Returneaza valoarea returnata de metoda din clasa parinte.
- 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 onmouseoutdocument.getElementById("id").onmouseover = function(){
document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POSTif(isset($_GET["id"])) {
echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoeverMarc 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 cuyoVoy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.