JavaScript objekter

Indholdsfortegnelse

    Vis indholdsfortegnelse

I JavaScript er objekter kongen. Hvis du forstår objekter, forstår du JavaScript.

I JavaScript er næsten "alt" et objekt.

  • Boolean kan være objekter (hvis de er defineret med nye nøgleordet)

  • Tal kan være objekter (hvis de er defineret med nye nøgleordet)

  • Strenge kan være objekter (hvis de er defineret med nye nøgleordet)

  • Datoer er altid objekter

  • Matematik er altid objekter

  • Regulære udtryk er altid objekter

  • Arrays er altid objekter

  • Funktioner er altid objekter

  • Objekter er altid objekter

Alle JavaScript-værdier, undtagen primitiver, er objekter.

JavaScript-primitiver

En primitiv værdi er en værdi, der ikke har nogen egenskaber eller metoder.

3.14 er en primitiv værdi

En primitiv datatype er data, der har en primitiv værdi.

JavaScript definerer 7 typer primitive datatyper:

Eksempler

    

  • string
    • 

  • number
    • 

  • boolean
    • 

  • null
    • 

  • undefined
    • 

  • symbol
    • 

  • bigint
    •

Uforanderlig

Primitive værdier er uforanderlige (de er hårdkodede og kan ikke ændres).

hvis x=3,14, kan du ændre værdien af x, men du kan ikke ændre værdien af 3,14.

ValueTypeComment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull (object)null is always null
undefinedundefinedundefined is always undefined

Objekter er variable

JavaScript-variabler kan indeholde enkelte værdier:

Eksempel

let person = "John Doe";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

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

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

</body>
</html>

JavaScript-variabler kan også indeholde mange værdier.

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

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

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Et JavaScript-objekt er en samling af navngivne værdier

Det er almindelig praksis at erklære objekter med const nøgleordet.

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

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

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

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Objektegenskaber

De navngivne værdier i JavaScript-objekter kaldes egenskaber.

firstName

John

lastName

Doe

age

50

eyeColor

blå

Objekter skrevet som navneværdipar ligner:

  • Associative arrays i PHP

  • Ordbøger i Python

  • Hash-tabeller i C

  • Hash-kort i Java

  • Hashes i Ruby og Perl

Objektmetoder

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

Objektegenskaber kan både være primitive værdier, andre objekter og funktioner.

En objektmetode er en objektegenskab, der indeholder en funktion definition.

firstName

John

lastName

Doe

age

50

eyeColor

blå

fullName

function() {return dette.fornavn + " " + dette.efternavn;}

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

Du vil lære mere om metoder i de næste kapitler.

Oprettelse af et JavaScript-objekt

Med JavaScript kan du definere og oprette dine egne objekter.

Der er forskellige måder at oprette nye objekter på:

  • Opret et enkelt objekt ved hjælp af et bogstavligt objekt.

  • Opret et enkelt objekt med søgeordet new.

  • Definer en objektkonstruktør, og opret derefter objekter af den konstruerede type.

  • Opret et objekt ved hjælp af Object.create().

Brug af et objekt-literal

Dette er den nemmeste måde at oprette et JavaScript-objekt på.

Ved at bruge et objekt literal både definerer og opretter du et objekt i ét udmelding.

Et bogstavligt objekt er en liste over navn:værdi-par (som alder:50) inden for krøllede klammeparenteser {}.

Følgende eksempel opretter et nyt JavaScript-objekt med fire egenskaber:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

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

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>Creating a JavaScript Object:</p>

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

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

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Dette eksempel opretter et tomt JavaScript-objekt, og tilføjer derefter 4 egenskaber:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Brug af JavaScript-nøgleordet nyt

Følgende eksempel opretter et nyt JavaScript-objekt ved hjælp af new Object(), og tilføjer derefter 4 egenskaber:

Eksempel

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

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

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Eksemplerne ovenfor gør præcis det samme.

Men der er ingen grund til at bruge new Object().

For at få læsbarhed, enkelhed og udførelseshastighed skal du bruge den bogstavelige objektmetode.

JavaScript-objekter kan ændres

Objekter kan ændres: De adresseres ved reference, ikke efter værdi.

Hvis person er et objekt, vil følgende erklæring ikke oprette en kopi af person:

const x = person;  // Will not create a copy of person.

Objektet x er ikke en kopi af person. Det er person. Både x og person er det samme objekt.

Enhver ændring af x vil også ændre person, fordi x og person er det samme objekt.

Eksempel

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

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

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

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>