Datakurser
Aktuell vecka: 48

Tillbaka till toppen

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.

//bästa sättet att skapa ett objekt, både enklare och säkrare
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:

//vi skapa objektet
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".

function Person (n,a) {
   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.

function Person (n,a) {
   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:

function someObject() {

   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.

function Rectangle(xlength, xwidth) {
   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 rect = new Rectangle(7,3);
var area = rect.calcArea();
document.getElementById("area").innerHTML=area;
var perimeter = rect.calcPerimeter();
document.getElementById("perimeter").innerHTML=perimeter;
rect.writeInformation();

 

En array av objekt

// Vi kan lätt skapa en array av personer
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;
}

document.getElementById("family").innerHTML=family[2].namn+" "+family[1].namn+" "+family[0].namn+"<br>";

"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.

function Person3 (namn, alder, bkb, skb) {
   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

this.alderDifferens = function(person1, person2) {
   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

4 st bollar

Rörliga bollar

3 snögubbar

Rörliga snögubbar

Källor

http://www.codecademy.com

http://javascript.info/tutorial

http://www.w3schools.com/js

Jump Start Javascript, Ara Pehlvanian & Don Nguyen, Sitepoint, 2013

Checka din kod

JSHint

Chrome Developer Tool
(F12 eller Ctrl+Shift+I)

Firefox Developer Tool
(F12 eller Ctrl+Shift+K)

En liten film om ovanstående (15 min)

Lösningsförslag

PB

Alrik's