Dziedziczenie prototypowe w JavaScript

Stronę tą wyświetlono już: 239 razy

W JavaScript nie da się dziedziczyć w klasyczny sposób, a jedynie poprzez wykorzystanie prototypów. Oto przykład prostej implementacji takiego dziedziczenia:

Listing 1
  1. function Person(_name, _surname){
  2. this.name = _name;
  3. this.surname = _surname;
  4. this.showPersonData = function(){
  5. alert("Imię: " + this.name + "; nazwisko: " + this.surname);
  6. }
  7. }
  8. function Student(_year_of_study, _field_of_study, _name, _surname){
  9. Person.call(this, _name, _surname); // wywołanie konstruktora klasy bazowej
  10. this.year_of_study = _year_of_study;
  11. this.field_of_study = _field_of_study;
  12. this.showStudentData = function(){
  13. alert("Imię: " + this.name + "; nazwisko: " + this.surname + "; rok studiów: " + this.year_of_study + "; kierunek studiów: " + this.field_of_study);
  14. }
  15. }
  16. Student.prototype = Object.create(Person.prototype); // powiązanie klasy bazowej Person z klasą Student
  17. var student = new Student(3, "Operator Łopaty Dwuręcznej", "Marian", "Paździoch");
  18. student.showStudentData();

Na czym polega prototypowe dziedziczenie? Wszystkie metody klasy bazowej są przepisywane do klasy dziedziczącej. Jeszcze tylko jedna zmiana, która dla mnie jest znacząca ze względu na uporządkowanie kodu, ja wolę aby linijka:

Listing 2
  1. Student.prototype = Object.create(Person.prototype); // powiązanie klasy bazowej Person z klasą Student

Została przeniesiona do ciała deklaracji obiektu, co będzie wyglądało następująco:

Listing 3
  1. function Student(_year_of_study, _field_of_study, _name, _surname){
  2. this.prototype = Object.create(Person.prototype); // ta linijka kodu odpowiada linijce: Student.prototype = Object.create(Person.prototype);
  3. Person.call(this, _name, _surname); // wywołanie konstruktora klasy bazowej
  4. this.year_of_study = _year_of_study;
  5. this.field_of_study = _field_of_study;
  6. this.showStudentData = function(){
  7. alert("Imię: " + this.name + "; nazwisko: " + this.surname + "; rok studiów: " + this.year_of_study + "; kierunek studiów: " + this.field_of_study);
  8. }
  9. }

Komentarze