docJAVAScript – własne klasy i obiekty
download 
Reklamacja Transkrypt
JAVAScript – własne klasy i obiekty
Programowanie obiektowe– ćw.5
JAVAScript – własne klasy i obiekty
Tworzenie własnych klas
Słowo kluczowe this
W JavaScript można tworzyć własne obiekty. Wykorzystuje się tu zapis utworzonej funkcji o nazwie takiej
samej jak klasa, dla której definiujemy właściwości (zmienne proste lub obiektowe) i metody (funkcje wewnętrzne).
Nadając i wykorzystując identyfikatory właściwości i metod korzystamy ze słowa kluczowego this. Rozumiane
jest ono jako obiekt bieżący, właściciel metody lub właściwości. Poniżej prosty przykład:
<HTML>
<HEAD> </HEAD>
<BODY style="font-size:18px">
<P> AKAPIT</P>
<PRE>
<SCRIPT language="JavaScript">
function kolor1( ) {
this.document.bgColor = "red";
}
function kolor2(e) {
e.style.color = "yellow";
}
</SCRIPT>
</PRE>
<INPUT type="button" value="Kolor dla tła okna" onclick="kolor1( )">
<INPUT type="button" value="Kolor dla napisu na przycisku" onclick="kolor2(this)">
</BODY>
</HTML>
W powyższym przykładzie mamy dwie funkcje, w pierwszej o nazwie kolor1 ustalamy kolor tła dla bieżącego
obiektu (this) - którym jest domyślnie window, druga funkcja o nazwie kolor2 zmienia kolor czcionki przekazanego do funkcji obiektu e - wywoływana jest kliknięciem w przycisk z przekazaniem odniesienia do tego właśnie elementu (this), a więc zmienia się kolor napisu na przycisku.
Przykład tworzenia klasy i obiektów klasy
Można utworzyć definicję klasy Pies wykorzystując własną funkcję:
function Pies(imie, rasa, kolor, plec) {
this. imie = imie
this. rasa = rasa
this. kolor = kolor
this. plec = plec
}
Teraz tworzymy dwa egzemplarze w klasie Pies (instancje w klasie):
var piesek1 = new Pies( "Misia", "Labrador", "czekoladowa", "suka" );
var piesek2 = new Pies( "Misiek", "Seter", "rudy", "pies" );
Poniżej dodajemy oprócz właściwości – także metody klasy:
Sposób 1 (jak wyżej)
<PRE>
<SCRIPT language="JavaScript">
function ButelkaAlkoholu(nazwa, pojemnosc, rok_produkcji, kraj_produkcji) {
//...
this.nazwa = nazwa;
this.pelna = true;
this.rok_produkcji = rok_produkcji;
//itd...
this.oproznij = function () {
this.pelna = false;
};
};
//tworzenie instancji klasy
butelka_miodu = new ButelkaAlkoholu("miod", 750, 2009, 'Polska');
document.writeln(butelka_miodu.pelna); // -> true
butelka_miodu.oproznij();
document.writeln(butelka_miodu.pelna); // -> false
</SCRIPT>
</PRE>
Sposób 2:
<PRE>
<SCRIPT language="JavaScript">
//coś w rodzaju zmiennej funkcyjnej
ButelkaAlkoholu = function (nazwa, pojemnosc, rok_produkcji, kraj_produkcji) {
//...
this.nazwa = nazwa;
this.rok_produkcji = rok_produkcji;
this.pelna = true;
this.oproznij = function () {
this.pelna = false;
};
};
//tworzenie instancji klasy
butelka_miodu = new ButelkaAlkoholu("miod", 750, 2009, 'Polska');
document.writeln("Rocznik:",butelka_miodu. rok_produkcji); // -> true
document.writeln(butelka_miodu.pelna); // -> true
butelka_miodu.oproznij();
document.writeln(butelka_miodu.pelna); // -> false
</SCRIPT>
</PRE>
Sposób 3 - najtrudniejszy:
<PRE>
<SCRIPT language="JavaScript">
Alkohol = function (nazwa, ilosc_procentow, kolor) {
//definiowanie obiektu
var obj = {
nazwa: nazwa,
ilosc_procentow: ilosc_procentow,
kolor: kolor,
pelna: true,
oproznij: function () { this.pelna = false; }
};
//funkcja zwraca obiekt
return obj;
};
//tworzenie instancji klasy
var piwo = Alkohol ('piwo Tyskie', 5.6, '#FE3');
document.writeln("Procent:",piwo.ilosc_procentow);
document.writeln(piwo.pelna); // -> true
piwo.oproznij();
document.writeln(piwo.pelna); // -> false
</SCRIPT>
</PRE>
Zadanie
Wykonać powyższe skrypty i zrozumieć ich działanie
Ograniczenia dostępu do pól
Języki stricte obiektowe (np. Java) posiadają modyfikatory dostępu (public, private, protected). Daje to możliwość zastosowania cechu obiektów zwanej hermetyzacją - umożliwienie dostępu do pól tylko przy pomocy
metod.
W JavaScript instancje obiektów posiadają publiczne wszystkie właściwości i metody, czyli jest do nich dostęp
w obrębie całego skryptu. Aby uczynić właściwość prywatną stosujemy zapis:
<PRE>
<SCRIPT language=" JavaScript ">
Towar = function (n1,n2) {
w_pryw= n1; //właściwość prywatna
this.w_pub=n2; //właściwość publiczna
this.podajNazwe1 = function () {return w_pryw; };
this.podajNazwe2 = function () {return this.w_pub; };
};
t = new Towar("prywatna","publiczna");
document.writeln("met1:",t.podajNazwe1());//tylko metoda podaje właściwość prywatną
document.writeln("met2:",t.podajNazwe2());//metoda podaje też właściwość publiczną
document.writeln("w_pryw:",t.w_pryw);//nie ma dostępu do właściwości prywatnej - undefined
document.writeln("w_pub:",t.w_pub);// jest dostęp do właściwości publicznej</SCRIPT>
</PRE>
Zasięg zmiennych – rola słowa kluczowego var
<PRE>
<SCRIPT language="JavaScript">
var x1=5;
x2=6;
function X( ) {
var x1=55;
x2=66;
};
X( );//wykonanie funkcji
document.writeln(x1," " ,x2);
</SCRIPT>
</PRE>
Efekt skryptu: 5 66
Zmienna x1 wewnątrz funkcji (ze słowem var) ma zasięg tylko lokalny, zatem zmiana jej wartości po wykonaniu funkcji nie zmieni wartości zmiennej x1 zdefiniowanej poza funkcją. Zmienna x2 ma zasięg globalny (ta
sama zmienna poza funkcją i w jej wnętrzu).
Przykład skryptu – obiekt typu AUTO
<HTML>
<HEAD> </HEAD>
<BODY style="font-size:18px">
<PRE>
<SCRIPT language="JavaScript">
//tworzymy definicję (funkcję) obiektu Auto (tzw. konstruktor obiektu) – jej argumentem będzie nazwa
auta:
function Auto(n)
{
//dwie właściwości
this.nazwa=n;
this.predkosc = 0;
//teraz trzy metody jako funkcje wewnętrzne
this.start = function (p){
this.predkosc=p;
document.writeln("Prędkość auta ",this.nazwa," wynosi:",this.predkosc);
};
this.stop = function ( ) {
this.predkosc=0;
document.writeln("Prędkość auta ",this.nazwa," wynosi:",this.predkosc);
}
this.dane = function ( ) {
return this.nazwa+"(" + this.predkosc+")";
}
//przy wykorzystaniu konstruktora wykonywana będzie jeszcze dodatkowo instrukcja:
document.writeln("Utworzono auto ",this.nazwa);
}
// teraz wykorzystanie....
//tworzymy nową instancję w klasie Auto
var a1 = new Auto("Fiat");
a1.start(20); //wykorzystujemy metody
a1.dane();
a1.stop();
a1.dane();
a1.start(30);
a1.dane();
a1.start(40);
a1.dane();
a1.stop();
a1.dane();
var a2 = new Auto("Mercedes");
</SCRIPT>
</PRE>
</BODY>
</HTML>
Zadanie
1. Utworzyć skrypt w którym:
a. Stworzone będą dwa obiekty typu Auto.
b. Odpowiednimi instrukcjami sterować będziemy prędkościami aut z wykorzystaniem
zdefiniowanych metod.
c. W dowolnym momencie kliknięcie przycisku pokazywać nam będzie rezultat funkcji
sprawdzającej które auto jest szybsze (można wykorzystać metodę window.
setTimeout( ) do cyklicznego sprawdzania).
