JavaScript-objekt


Innehållsförteckning

    Visa innehållsförteckning


I JavaScript är objekt kung. Om du förstår objekt förstår du JavaScript.


I JavaScript är nästan "allt" ett objekt.

  • Boolean kan vara objekt (om de definieras med nyckelordet new)

  • Siffror kan vara objekt (om de definieras med nyckelordet new)

  • Strängar kan vara objekt (om de definieras med nyckelordet new)

  • Datum är alltid objekt

  • Matematik är alltid objekt

  • Reguljära uttryck är alltid objekt

  • Arrayer är alltid objekt

  • Funktioner är alltid objekt

  • Objekt är alltid objekt

Alla JavaScript-värden, utom primitiver, är objekt.


JavaScript-primitiver

Ett primitivt värde är ett värde som inte har några egenskaper eller metoder.

3.14 är ett primitivt värde

En primitiv datatyp är data som har ett primitivt värde.

JavaScript definierar 7 typer av primitiva datatyper:

Exempel

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

Oföränderlig

Primitiva värden är oföränderliga (de är hårdkodade och kan inte ändras).

om x=3,14 kan du ändra värdet på x, men du kan inte ändra värdet på 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

Objekt är variabler

JavaScript-variabler kan innehålla enskilda värden:

Exempel

let person = "John Doe";

Prova själv →

<!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 också innehålla många värden.

Objekt är också variabler. Men föremål kan innehålla många värden.

Objektvärden skrivs som namn : värde-par (namn och värde separerade med a kolon).

Exempel

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

Prova själv →

<!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>

Ett JavaScript-objekt är en samling namngivna värden

Det är vanligt att deklarera objekt med nyckelordet const.

Exempel

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

Prova själv →

<!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>


Objektegenskaper

De namngivna värdena, i JavaScript-objekt, kallas egenskaper.

firstName

John

lastName

Hind

age

50

eyeColor

blå

Objekt skrivna som namnvärdespar liknar:

  • Associativa arrayer i PHP

  • Ordböcker i Python

  • Hashtabeller i C

  • Hash-kartor i Java

  • Hashes i Ruby och Perl


Objektmetoder

Metoder är åtgärder som kan utföras på objekt.

Objektegenskaper kan vara både primitiva värden, andra objekt och funktioner.

En objektmetod är en objektegenskap som innehåller en funktion definition.

firstName

John

lastName

Hind

age

50

eyeColor

blå

fullName

function() {return this.firstName + " " + this.lastName;}

JavaScript-objekt är behållare för namngivna värden, kallade egenskaper och metoder.

Du kommer att lära dig mer om metoder i nästa kapitel.


Skapa ett JavaScript-objekt

Med JavaScript kan du definiera och skapa dina egna objekt.

Det finns olika sätt att skapa nya objekt:

  • Skapa ett enda objekt med hjälp av ett objekt bokstavligt.

  • Skapa ett enda objekt med nyckelordet new.

  • Definiera en objektkonstruktor och skapa sedan objekt av den konstruerade typen.

  • Skapa ett objekt med Object.create().


Använda ett objekt bokstavligt

Detta är det enklaste sättet att skapa ett JavaScript-objekt.

Genom att använda ett objekt literal både definierar och skapar du ett objekt i ett påstående.

En bokstavlig objekt är en lista med namn:värde-par (som ålder:50) innanför hängslen {}.

Följande exempel skapar ett nytt JavaScript-objekt med fyra egenskaper:

Exempel

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

Prova själv →

<!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>

Mellanslag och radbrytningar är inte viktiga. En objektdefinition kan sträcka sig över flera rader:

Exempel

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

Prova själv →

<!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>

Detta exempel skapar ett tomt JavaScript-objekt, och lägger sedan till 4 egenskaper:

Exempel

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

Prova själv →

<!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>

Använda JavaScript-nyckelordet nytt

Följande exempel skapar ett nytt JavaScript-objekt med new Object(), och lägger sedan till 4 egenskaper:

Exempel

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

Prova själv →

<!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>

Exemplen ovan gör exakt samma sak.

Men det finns inget behov av att använda new Object().

För läsbarhet, enkelhet och exekveringshastighet, använd metoden object literal.


JavaScript-objekt är föränderliga

Objekt är föränderliga: De adresseras genom referens, inte genom värde.

Om person är ett objekt, kommer följande uttalande inte att skapa en kopia av person:

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

Objektet x är inte en kopia av person. Det är person. Både x och person är samma objekt.

Alla ändringar av x kommer också att ändra person, eftersom x och person är samma objekt.

Exempel

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

Prova själv →

<!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>