JavaScript-objekt

Innehållsförteckning

    Visa innehållsförteckning

Verkliga objekt, egenskaper och metoder

I verkliga livet är en bil ett objekt.

En bil har egenskaper som vikt och färg och metoder som start och stopp:

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

Alla bilar har samma egenskaper, men egenskapens värden skiljer sig från bil till bil.

Alla bilar har samma metoder, men metoderna utförs vid olika tidpunkter.

JavaScript-objekt

Du har redan lärt dig att JavaScript-variabler är det behållare för datavärden.

Den här koden tilldelar ett enkelt värde (Fiat) till en bil med variabel namn:

let car = "Fiat";

Prova själv →

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

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

Den här koden tilldelar många värden (Fiat, 500, vit) till en variabel namngiven bil:

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

Prova själv →

<!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ärdena skrivs som namn:värde-par (namn och värde separerade med ett kolon).

Det är vanligt att deklarera objekt med nyckelordet const.

Läs mer om hur du använder const med objekt i kapitlet: JS Const.

Objektdefinition

Du definierar (och skapar) ett JavaScript-objekt med ett bokstavligt objekt:

Exempel

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

Prova själv →

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

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

Objektegenskaper

name:values-paren i JavaScript-objekt kallas egenskaper:

firstName

John

lastName

Hind

age

50

eyeColor

blå

Åtkomst till objektegenskaper

Du kan komma åt objektegenskaper på två sätt:

objectName.propertyName

eller

objectName["propertyName"]

Exempel1

person.lastName;

Prova själv →

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

Exempel 2

person["lastName"];

Prova själv →

<!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-objekt är behållare för namngivna värden kallade egenskaper.

Objektmetoder

Objekt kan också ha metoder.

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

Metoder lagras i egenskaper som funktion definitioner.

firstName

John

lastName

Hind

age

50

eyeColor

blå

fullName

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

En metod är en funktion som lagras som en egenskap.

Exempel

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

I exemplet ovan hänvisar detta till personobjektet.

Dvs. this.firstName betyder egenskapen firstName för this.

Dvs. this.firstName betyder egenskapen firstName för person.

Vad är det här?

I JavaScript hänvisar nyckelordet detta till ett objekt.

Vilket objekt beror på hur detta anropas (används eller anropas).

Nyckelordet detta hänvisar till olika objekt beroende på hur det används:

  • I en objektmetod hänvisar detta till objektet.

  • Enbart hänvisar detta till det globala objektet.

  • I en funktion hänvisar detta till det globala objektet.

  • I en funktion, i strikt läge, är detta odefinierat.

  • I en händelse hänvisar detta till elementet som tog emot händelsen.

  • Metoder som call(), apply() och bind() kan hänvisa detta till alla objekt.

Notera

detta är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna.

Se även:

JavaScript-handledningen för denna

Sökordet detta

I en funktionsdefinition hänvisar detta till funktionens "ägare".

I exemplet ovan är detta personobjektet som "äger" fullnamn funktion.

Med andra ord betyder this.firstName egenskapen firstName för det här objektet.

Läs mer om detta i JavaScript denna handledning.

Åtkomst till objektmetoder

Du kommer åt en objektmetod med följande syntax:

objectName.methodName()

Exempel

name = person.fullName();

Prova själv →

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

Om du kommer åt en metod utan parenteserna() är det returnerar funktionsdefinitionen:

Exempel

name = person.fullName;

Prova själv →

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

Deklarera inte strängar, siffror och booleaner som objekt!

När en JavaScript-variabel deklareras med nyckelordet "new", är variabeln skapad som ett 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

Undvik String-, Number- och booleska-objekt . De komplicerar din kod och saktar ner utförandehastighet.

Du kommer att lära dig mer om objekt senare i denna handledning.