Föreläsning 5: ObjektME152A

Vad är ett objekt?

Föreläsning 5

• Datastruktur

• Består av attribut:värde par

• Till skillnad från en array som har index:värde

• Vi kan modellera (alt. dölja) komplexitet genom det gränssnitt vi själva definierar

Föreläsning 5

http://eloquentjavascript.net/img/object.jpg

Föreläsning 5

// Tillskillnad från arrayer används // hakparenteser var obj = {};

// Ett objekt kan skapas med // attribut:värden par var dog = { name: "Boo", type: "Pomeranian", age: 11 };

// Eller så kan dessa läggas // till i efterhand var dog = {};

dog.name = "Boo"; dog.type = "Pomeranian"; dog.age = 11;

Attribut Värde

Föreläsning 5

var dog = {};

// Alternativt vis att lägga till attribut dog["name"] = "Boo"; dog["type"] = "Pomeranian"; dog.age = 11;

// Samma sak gäller för att hämta ett värde dog.name; // => "Boo" dog["type"]; // => "Pomeranian" dog.age; // => 11

Föreläsning 5

// Ett objekt, som en array, // kan innehålla alla typer av // värden

var obj = { text: "ABC", number: 1997, bool: true, list: [1, 2, 3, "e"] };

Föreläsning 5

// Arrayer räcker inte till när // vi vill modellera data var person = [ "Jane", "Doe", 31, ["Peter", "Eliza"], true ];

// Objekt passar bra för detta var person = { firstname: "Jane", lastname: "Doe", age: 31, siblings: ["Peter", "Eliza"], anonymous: true };

Föreläsning 5

var box = { width: 15, height: 12 };

"width" in box; // => true "area" in box; // => false

delete box.height;

"height" in box; // => false

Föreläsning 5

if ("width" in box && "height" in box) { console.log("Area: ", box.width * box.height); }

Föreläsning 5

// Arrayer och objekt i kombination var events = [ { day: "Monday", time: "22:00", city: "Stockholm" }, { day: "Friday", time: "18:00", city: "Copenhagen" }, { day: "Thursday", time: "08:00", city: "Berlin" } ];

events[1].day; // => "Friday" events[2].city; // => "Berlin"

var person = { name: "Jane Doe", siblings: [ { name: "Peter", age: 33 }, { name: "Eliza", age: 25 } ] };

person.siblings[0].name; // => "Pete

Föreläsning 5

// Vi kan iterera genom alla attribut var box = { width: 12, height: 16 };

for (var property in box) { console.log("Property:", property); console.log("Value:", box[property]); }

// Skriver ut:

// Property: width // Value: 12 // Property: height // Value: 16

Föreläsning 5

var person = { speak: function() { console.log("Hello!"); } };

person.speak(); // => "Hello!"

var calculator = { sum: function(a, b) { return a + b; } };

calculator.sum(10, 15); // => 25

Föreläsning 5

var person = { firstname: "Jane", lastname: "Doe", fullname: function() { return this.firstname + " " + this.lastname; } };

person.firstname; // => "Jane" person.fullname(); // => "Jane Doe"

“This” - representerar det nuvarande objektet

Föreläsning 5

var x = { name: "Jane", logSelf: function() { console.log(this); }, y: { name: "John", logSelf: function() { console.log(this); } } };

x.logSelf(); // => { name: "Jane", logSelf: [Function], y: [Object] }

x.y.logSelf(); // => { name: "John", logSelf: [Function] }

Föreläsning 5

var x = { name: "Jane", logSelf: function() { console.log(this); }, y: { name: "John", logSelf: function() { console.log(this); } } };

x.logSelf(); // => { name: "Jane", logSelf: [Function], y: [Object] }

x.y.logSelf(); // => { name: "John", logSelf: [Function] }

x

y

Föreläsning 5

// Funktion för att dynamiskt skapa ett objekt // när vi behöver det function createPerson(first, last, age) { return { firstname: first, lastname: last, age: age, fullname: function() { return this.firstname + " " + this.lastname; } }; }

var jane = createPerson("Jane", "Doe", 23);

jane.fullname(); // => "Jane Doe"

Föreläsning 5

// Funktion som tar emot ett objekt och // skriver ut dess attribut i konsollen function logPerson(person) { console.log("Name:", person.name); console.log("Age:", person.age); }

var jane = { name: "Jane Doe", age: 23 };

logPerson(jane);

// Skriver ut

// Name: Jane Doe // Age: 23