JAVASCRIPT Objekt
Vad är ett objekt?
Vi har hittills pratat om heltal, decimaltal, tecken och strängar. Även om variablerna i javascript kan byta mellan olika typer av innehåll så är det dessa typer vi har pratat om och arbetat med. De är fördefinierade typer och det finns inbyggt färdiga funktioner som hjälper oss att hantera dessa typer.
Vi kanske vill spara informationen om en person (namn, ålder). Då måste jag skapa 2 variabler, ska jag dessutom göra en lista på elever så blir det 2 st arrayer(listor). Varför inte lagra all information som hör ihop i en låda, ett objekt (en variabel som innehåller fler värden som kan vara olika typer)?
Vi kan se det som att vi skapar en låda (person) som i sin tur innehåller 2 smålådor(egenskaper, i vårt fall namn, ålder).
Vi kan se egenskaper som variabler kopplade till ett objekt.
Skapa egna objekt
Precis som när vi skapar arrayer så finns det flera olika sätt att skapa objekt. Överhuvudtaget påminner arrayer och objekt om varandra i vissa avseenden.
var personNr1 = {};
//du kommer även se följande om du surfar på nätet
var personNr1 = new Object();
//vi kan även skapa ett objekt på detta sätt
var personNr1 = {
namn: 'Musse Pigg',
alder: '122'
};
Det finns 2 sätt att skapa objekt, antingen genom en objektkonstruktor (de 2 första exemplen ovan) eller med bokstavlig notation(det sista exemplet ovan).
När vi använder en "default"-objektkonstruktorn ser fortsättningen ut så här:
var personNr2 = {};
//vi tilldelar de olika delarna i objektet sina värden, vilket kan ske på två sätt antingen med hakparenteser (precis som när vi jobbar med arrayer)
personNr2["namn"] = "Kalle Anka";
personNr2["alder"]= 102;
//eller med punktnotation ( för att komma till rätt egenskap)
var personNr3 = {};
personNr3.namn = "Långben";
personNr3.alder = 101;
Vi kan också skapa en egen konstruktor som enbart är till för vår nya objektyp.
OBS! För att skilja mellan funktioner och objekt
så använder vi stor bokstav när det är "Objekt".
this.namn=n;
this.alder=a;
}
var personNr4= new Person("Kalle",100);
Ovan har vi sett hur vi tilldelar egenskaper i ett objekt värden. På motsvarande sätt så kan vi också hämta värden ur ett objekt.
this.namn=n;
this.alder=a;
}
var personNr5= new Person("KalleAnka",111);
var text = "Namn: " + personNr5.namn +" Ålder: " + personNr5.alder;
document.getElementById("personinfo").value = text;
Mer om egna objekt. Vad är en metod?
Jo, det är en funktion som tillhör ett objekt. Hur metoden ser ut och vad den gör skrivs inom måsvingarna för objektet.
Mallen för det ser ut så här:
this.someMethod = function() {
};
}
Vi skapar mallen för ett objekt av typen Rektangel.
Vi använder this.length och this.width för att tala om att det är length och width i just detta objekt.
this.length =xlength;
this.width = xwidth;
//beräkna area
this.calcArea = function() {
return this.length * this.width;
};
// beräkna omkrets
this.calcPerimeter = function() {
return 2*this.length + 2*this.width;
};
// skriv ut
this.writeInformation = function() {
document.getElementById("svar").innerHTML="Area="+this.calcArea()+" Omkretsen="this.calcPerimeter();
};
}
Och vi testar att skapa ett objekt samt att ropa på metoderna som tar värdena från objektets egenskaper length och width, gör en beräkning och levererar svaret.
Vi ropar även på metoden som själv skriver ut objektets egenskapers värden.
var area = rect.calcArea();
document.getElementById("area").innerHTML=area;
var perimeter = rect.calcPerimeter();
document.getElementById("perimeter").innerHTML=perimeter;
rect.writeInformation();
En array av objekt
var family = [ ];
family[0] = new Person("Fred", 42);
family[1] = new Person("Wilma", 40);
family[2] = new Person("Pebbles", 8);
// Vår Person-konstruktor
function Person (name, age) {
this.namn = name;
this.alder = age;
}
"Public" och "Private"
I javascript är alla egenskaper i ett objekt automatiskt "public". Med public menas att de kan bli anropade från utsidan av en klass (så som vi gjort på sidan ovanför) till exempel kan vi skriva person1.namn för att komma åt värdet i egenskapen namn i objektet person1. Man kan betrakta alla dessa egenskapers värden som sådana som objektet är villig att dela med sig.
Bra! Men om ett objekt vill hålla en viss information gömd, det vill säga att den inte ska gå att komma åt med punktnotation. Precis som funktioner kan ha lokala variabler (deklarerade i funktionen och enbart synliga i funktionen) så kan objekt ha lokala (privata) variabler (egenskaper i objektet). Privata variabler innehåller sådant som objektet inte vill dela med andra hur som helst. Däremot kan man anropa och använda dessa privata variabler i metoder inuti objektet. Det vill säga vi kan skapa en "public" metod som returnerar värdet på en "private" egenskap(variabel).
Även metoder kan vara "private" i en objektklass.
Vi byter helt enkelt "this" mot "var" .
Om jag försöker komma åt en privat egenskap i en klass utifrån så kommer den inte att synas utan svaret blir "undefined".
Enda sättet att nå en privat metod är att skapa en publik metod som anropar den privata metoden.
var namn = namn;
var alder = alder;
var bankKontoBalans = bkb;
var sparKontoBalans = spk;
var totalBalans = function() {
var balans=bankKontoBalans+sparKontoBalans;
return namn+" Balans: "+balans;
};
this.autoSvarare = function(pass) {
if (pass == 1234) return totalBalans();
else return "Fel lösenord.";
};
}
var person = new Person3('Barack',30,100000,23000);
var text = "Test1: "+person.autoSvarare(1111)+"<br>";
text += "Test2: "+person.autoSvarare(1234);
document.getElementById("jsobjektex5").innerHTML = text+"<br>";
Om jag fösöker anropa totalBalans(), med t ex följande kod: text += "Test3: "+person.totalBalans(); Så får vi följande meddelande i "Console": TypeError: person.totalBalans is not a function
Metoder med objekt som parametrar
Om vi lägger till följande metod i vår konstruktor för objektet Person, som beräknar skillnaden mellan två personers åldrar
return person1.alder - person2.alder;
}
var alice = new Person("Alice", 30);
var billy = new Person("Billy", 25);
// beräkna åldersskillnaden genom att använda metoden
var diff1 = alice.alderDifferens(alice, billy);
var diff2 = billy.alderDifferens(alice, billy);
Fler exempel
Här finns mer kod att titta i. Två statiska och två rörliga exempel
Källor
http://javascript.info/tutorial
Jump Start Javascript, Ara Pehlvanian & Don Nguyen, Sitepoint, 2013