logo

6 måder at oprette et objekt i JavaScript

Et JavaScript-objekt er en samling af nøgleværdi-par kendt som egenskaber. Objekter bruges almindeligvis til at lagre, manipulere og sende data over netværket.

Der er flere måder at oprette et objekt i JavaScript på. Du kan bruge:

  • Objekt Literal
  • Object Konstruktør
  • Konstruktørfunktion
  • Object.create() Metode
  • Object.assign() Metode
  • ES6-klasser

1 — Objekt Literal

Den enkleste og mest populære måde at oprette objekter i JavaScript på er ved at bruge objektets bogstavelige syntaks. Alt du skal gøre er at sætte alle dine nøgleværdi-par adskilt af et kolon (: ) inde i krøllede seler som vist nedenfor:

const fruits = {
    mango: '🥭️',
    apple: '🍎',
    lemon: '🍋',
    cherry: '🍒'
};

2 — Object Konstruktør

Den anden måde at oprette et objekt i JavaScript på er ved at bruge den indbyggede Object() konstruktør. Du kan bruge new nøgleord for at initialisere en forekomst af Object :

const fruits = new Object();

Nu for at tilføje egenskaber til ovenstående objekt, skal du bruge prikken (. ) notation som vist nedenfor:

const fruits = new Object();

fruits.mango = '🥭️';
fruits.apple = '🍎';
fruits.lemon = '🍋';
fruits.cherry = '🍒';

3 — Konstruktørfunktion

new nøgleord kan også bruges med en brugerdefineret konstruktørfunktion til at oprette et objekt. En konstruktørfunktion er intet andet end en simpel JavaScript-funktion, der, når den kaldes med en new nøgleord, fungerer som en konstruktør og returnerer et objekt.

Her er et eksempel:

function User(name, age) {
    this.name = name;
    this.age = age;
};

const user = new User('John Doe', 45);

I ovenstående User funktion, this nøgleord refererer til det objekt, der oprettes, så name og age blive egenskaberne for det nyoprettede objekt.

Denne tilgang er bedre end den indbyggede Object konstruktorinitialisering. Det giver os mulighed for hurtigt at oprette flere objekter af samme type uden manuelt at tilføje egenskaber til hvert objekt.

4 — Object.create() Metode

Object.create() metode giver os mulighed for at oprette et nyt objekt ved at bruge et eksisterende objekt som prototype på det nyoprettede objekt. Denne metode er især nyttig, når du vil oprette et nyt objekt fra et allerede eksisterende objekt.

Object.create() metoden tager op til to parametre. Den første obligatoriske parameter er det objekt, der fungerer som en prototype for det nyoprettede objekt. Den anden parameter er et valgfrit objekt, som indeholder de egenskaber, der skal tilføjes til det nye objekt.

Lad os sige, at du har følgende eksisterende objekt:

const Vehicle = {
    maker: 'BMW',
    color: 'Black'
};

For at oprette et nyt objekt ved at bruge Vehicle 's prototype, kan du gøre følgende:

const vehicle = Object.create(Vehicle);

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red

Du kan også angive yderligere egenskaber for det nye objekt som en anden parameter til Object.create() med attributindstillinger som konfigurerbar , tallige , skrivbar og værdi som vist nedenfor:


const vehicle = Object.create(Vehicle, {
    type: {
        value: 'Electric',
        writable: true,
        configurable: true,
        enumerable: false
    }
});

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red
console.log(vehicle.type); // Electric

Tag et kig på denne MDN-artikel for at lære mere om Object.create() metode.

5 — Object.assign() Metode

Den femte måde at oprette et objekt i JavaScript på er ved at bruge Object.assign() metode. Denne metode tager et eller flere kildeobjekter som input og kopierer alle talrige egne egenskaber til målobjektet.

Du kan sende et hvilket som helst antal objekter til Object.assign() som parametre. Den første parameter er målet objekt. Resten af ​​parametrene er kilde objekter, der indeholder egenskaber, som du vil anvende på målobjektet.

Lad os antage, at du har følgende to objekter:

const car = {
    maker: 'Model X',
    color: 'Black'
};

const maker = {
    name: 'Tesla'
};

Nu vil du kombinere begge car og maker objekter for at oprette en vehicle objekt. Brug bare Object.assign() at flette begge eksisterende objekter for at skabe et nyt objekt som vist nedenfor:

const vehicle = Object.assign({}, maker, car);

console.log(vehicle);

// { name: 'Tesla', maker: 'Model X', color: 'Black' }

Tag et kig på denne guide for at lære mere om Object.assign() metode.

6 — ES6-klasser

ES6 (ECMAScript 2015) introducerede for første gang begrebet klasser i JavaScript. Du kan bruge class nøgleord til at definere en ny klasse i JavaScript i stedet for en funktionskonstruktør, og brug derefter new nøgleord for at oprette en forekomst af det.

Lad os se på følgende eksempel:

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `Hi ${this.name} 👋`;
    }
}

const user = new User('Atta', 30);

console.log(user.sayHi()); // Hi Atta 👋
console.log(user.age); // 30

Konklusion

Det er alle folk til at oprette objekter i JavaScript. Vi lærte om 6 forskellige måder at skabe et objekt, herunder objekts literal syntaks, Object konstruktør, konstruktørfunktioner, Object.create() , Object.assign() , og ES6 klasser.

Alle disse metoder er nyttige i forskellige scenarier. Den metode, der almindeligvis bruges af JavaScript-udviklere til at definere et objekt, er objekt bogstavelig. Det er en enkel og hurtigste måde at definere et objekt med alle nødvendige nøgleværdi-par i JavaScript.