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.
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:
string
number
boolean
null
undefined
symbol
bigint
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.
Value | Type | Comment |
---|---|---|
"Hello" | string | "Hello" is always "Hello" |
3.14 | number | 3.14 is always 3.14 |
true | boolean | true is always true |
false | boolean | false is always false |
null | null (object) | null is always null |
undefined | undefined | undefined is always undefined |
JavaScript-variabler kan innehålla enskilda värden:
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).
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
.
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>
De namngivna värdena, i JavaScript-objekt, kallas egenskaper.
John
Hind
50
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
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.
John
Hind
50
blå
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.
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()
.
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:
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:
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:
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>
Följande exempel skapar ett nytt JavaScript-objekt med new Object()
, och lägger sedan till 4 egenskaper:
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.
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.
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>