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.
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.
Du definierar (och skapar) ett JavaScript-objekt med ett bokstavligt objekt:
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:
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>
name:values-paren i JavaScript-objekt kallas egenskaper:
John
Hind
50
blå
Du kan komma åt objektegenskaper på två sätt:
objectName.propertyName
eller
objectName["propertyName"]
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>
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.
Objekt kan också ha metoder.
Metoder är åtgärder som kan utföras på objekt.
Metoder lagras i egenskaper som funktion definitioner.
John
Hind
50
blå
function() {return this.firstName + " " + this.lastName;}
En metod är en funktion som lagras som en egenskap.
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.
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.
detta
är inte en variabel. Det är ett nyckelord. Du kan inte ändra värdet på denna
.
JavaScript-handledningen för denna
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.
Du kommer åt en objektmetod med följande syntax:
objectName.methodName()
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:
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>
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.