JavaScript objekter

Indholdsfortegnelse

Virkelige genstande, egenskaber og metoder

I det virkelige liv er en bil et objekt.

En bil har egenskaber som vægt og farve og metoder som start og stop:

Object	Properties	Methods
	car.name = Fiat car.model = 500 car.weight = 850kg car.color = white	car.start() car.drive() car.brake() car.stop()

Alle biler har de samme egenskaber, men ejendommens værdier er forskellige fra bil til bil.

Alle biler har de samme metoder, men metoderne udføres på forskellige tidspunkter.

JavaScript objekter

Du har allerede lært, at JavaScript-variabler er beholdere til dataværdier.

Denne kode tildeler en simpel værdi (Fiat) til en bil med variabel navn:

let car = "Fiat";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>

Objekter er også variable. Men objekter kan indeholde mange værdier.

Denne kode tildeler mange værdier (Fiat, 500, hvid) til en variabel navngivet bil:

const car = {type:"Fiat", model:"500", color:"white"};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>

Værdierne skrives som navn:værdi-par (navn og værdi adskilt af et kolon).

Det er almindelig praksis at erklære objekter med søgeordet const.

Lær mere om brug af const med objekter i kapitlet: JS Const.

Objektdefinition

Du definerer (og opretter) et JavaScript-objekt med et bogstaveligt objekt:

Eksempel

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Mellemrum og linjeskift er ikke vigtige. En objektdefinition kan strække sig over flere linjer:

Eksempel

const person = {
    firstName: "John",
    lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Objektegenskaber

navn:værdier-parrene i JavaScript-objekter kaldes egenskaber:

firstName: John
lastName: Doe
age: 50
eyeColor: blå

Adgang til objektegenskaber

Du kan få adgang til objektegenskaber på to måder:

objectName.propertyName

eller

objectName["propertyName"]

Eksempel 1

person.lastName;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

Eksempel 2

person["lastName"];

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

JavaScript-objekter er beholdere for navngivne værdier kaldet egenskaber.

Objektmetoder

Objekter kan også have metoder.

Metoder er handlinger, der kan udføres på objekter.

Metoder gemmes i egenskaber som funktion definitioner.

firstName: John
lastName: Doe
age: 50
eyeColor: blå
fullName: function() {return dette.fornavn + " " + dette.efternavn;}

En metode er en funktion gemt som en egenskab.

Eksempel

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

I eksemplet ovenfor henviser dette til personobjektet.

Dvs. this.firstName betyder firstName-egenskaben for this.

Dvs. this.firstName betyder firstName-egenskaben for person.

Hvad er dette?

I JavaScript refererer dette søgeordet til et objekt.

Hvilket objekt afhænger af, hvordan dette påkaldes (bruges eller kaldes).

dette søgeordet refererer til forskellige objekter afhængigt af hvordan det bruges:

I en objektmetode henviser dette til objektet.
Alene henviser dette til det globale objekt.
I en funktion henviser dette til det globale objekt.
I en funktion, i streng tilstand, er dette udefineret.
I en begivenhed henviser dette til det element, der modtog begivenheden.
Metoder som call(), apply() og bind() kan henvise dette til ethvert objekt.

Bemærk

dette er ikke en variabel. Det er et nøgleord. Du kan ikke ændre værdien af denne.

Se også:

JavaScript denne selvstudium

dette søgeordet

I en funktionsdefinition henviser dette til "ejeren" af funktionen.

I eksemplet ovenfor er dette det personobjekt, der "ejer" fuldnavn funktion.

Med andre ord betyder this.firstName egenskaben firstName for dette objekt.

Lær mere om dette i JavaScript denne vejledning.

Adgang til objektmetoder

Du får adgang til en objektmetode med følgende syntaks:

objectName.methodName()

Eksempel

name = person.fullName();

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Hvis du tilgår en metode uden() parenteser, vil den returnerer funktionsdefinitionen:

Eksempel

name = person.fullName;

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

Erklær ikke strenge, tal og booleaner som objekter!

Når en JavaScript-variabel er erklæret med søgeordet "ny", er variablen oprettet som et objekt:

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Undgå String-, Number- og Booleske-objekter . De komplicerer din kode og bremser udførelseshastighed.

Du vil lære mere om objekter senere i denne øvelse.