Sådan oprettes objekter i JavaScript

Vi beskæftiger os alle med objekter på en eller anden måde, mens vi skriver kode på et programmeringssprog. I JavaScript giver objekter en måde for os at gemme, manipulere og sende data over netværket.

Der er mange måder, hvorpå objekter i JavaScript adskiller sig fra objekter i andre almindelige programmeringssprog, som f.eks. Java. Jeg vil forsøge at dække det i et andet emne. Lad os her kun fokusere på de forskellige måder, hvorpå JavaScript giver os mulighed for at oprette objekter.

I JavaScript skal du tænke på objekter som en samling af 'nøgle: værdi'-par. Dette giver os den første og mest populære måde, hvorpå vi opretter objekter i JavaScript.

Lad os komme i gang.

1. Oprettelse af objekter ved hjælp af bogstavelig syntaks

Dette er virkelig simpelt. Alt du skal gøre er at smide dine nøgleværdipar adskilt af ':' inde i et sæt krøllede seler ({}), og dit objekt er klar til at blive serveret (eller forbrugt), som nedenfor:

const person = { firstName: 'testFirstName', lastName: 'testLastName' };

Dette er den enkleste og mest populære måde at oprette objekter i JavaScript på.

2. Oprettelse af objekter ved hjælp af det 'nye' nøgleord

Denne metode til oprettelse af objekter ligner den måde, objekter oprettes på klassebaserede sprog som Java. Forresten, begyndende med ES6, er klasser også native til JavaScript, og vi vil se på at oprette objekter ved at definere klasser mod slutningen af ​​denne artikel. Så for at oprette et objekt ved hjælp af det 'nye' nøgleord skal du have en konstruktørfunktion.

Her er to måder, du kan bruge det 'nye' søgeordsmønster på -

a) Brug af det 'nye' nøgleord med 'den indbyggede objektkonstruktorfunktion

For at oprette et objekt skal du bruge det nye nøgleord med Object()konstruktør, sådan her:

const person = new Object();

For at tilføje egenskaber til dette objekt er vi nødt til at gøre noget som dette:

person.firstName = 'testFirstName'; person.lastName = 'testLastName';

Du har muligvis regnet med, at denne metode er lidt længere at skrive. Også denne praksis anbefales ikke, da der er en rækkeviddeopløsning, der sker bag kulisserne for at finde ud af, om konstruktorfunktionen er indbygget eller brugerdefineret.

b) Brug af 'ny' med brugerdefineret konstruktorfunktion

Det andet problem med tilgangen til at bruge 'Objekt' konstruktorfunktionen skyldes, at hver gang vi opretter et objekt, skal vi manuelt tilføje egenskaberne til det oprettede objekt.

Hvad hvis vi skulle skabe hundreder af personobjekter? Du kan forestille dig smerten nu. Så for at slippe af med manuelt at tilføje egenskaber til objekterne opretter vi brugerdefinerede (eller brugerdefinerede) funktioner. Vi opretter først en konstruktørfunktion og bruger derefter det 'nye' nøgleord til at hente objekter:

function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }

Nu, når som helst du vil have et 'Person' objekt, skal du bare gøre dette:

const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Brug Object.create () til at oprette nye objekter

Dette mønster er meget praktisk, når vi bliver bedt om at oprette objekter fra andre eksisterende objekter og ikke direkte ved hjælp af den 'nye' nøgleordssyntaks. Lad os se, hvordan man bruger dette mønster. Som anført på MDN:

Den Object.create()metode opretter et nyt objekt, ved hjælp af et eksisterende objekt som prototypen på den nyoprettede objekt.

For at forstå Object.createmetoden skal du bare huske at det tager to parametre. Den første parameter er et obligatorisk objekt, der fungerer som prototype på det nye objekt, der skal oprettes. Den anden parameter er et valgfrit objekt, der indeholder de egenskaber, der skal føjes til det nye objekt.

Vi dykker ikke dybt ned i prototyper og arvekæder nu for at holde vores fokus på emnet. Men som et hurtigt punkt kan du tænke på prototyper som objekter, hvor andre objekter kan låne egenskaber / metoder, de har brug for.

Forestil dig, at du har en organisation repræsenteret af orgObject

const orgObject = { company: 'ABC Corp' };

Og du vil oprette medarbejdere til denne organisation. Det er klart, du vil have alle medarbejdernes objekter.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"

4. Brug Object.assign () til at oprette nye objekter

Hvad hvis vi vil oprette et objekt, der skal have egenskaber fra mere end et objekt? Object.assign()kommer til vores hjælp.

Som anført på MDN:

Den metode, der anvendes til at kopiere værdierne af alle enumerable egne egenskaber fra et eller flere kilde objekter til et målobjekt. Det returnerer målobjektet. Object.assign()

Object.assignmetode kan tage et vilkårligt antal objekter som parametre. Den første parameter er det objekt, det vil oprette og returnere. Resten af ​​de objekter, der sendes til den, bruges til at kopiere egenskaberne til det nye objekt. Lad os forstå det ved at udvide det forrige eksempel, vi så.

Antag at du har to objekter som nedenfor:

const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }

Nu vil du have en medarbejderobjekt fra 'ABC Corp', der kører en 'Ford' bil. Du kan gøre det ved hjælp af Object.assignnedenstående:

const employee = Object.assign({}, orgObject, carObject);

Nu får du et employeeobjekt, der har companyog carNamesom dets egenskab.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. Brug af ES6-klasser til at oprette objekter

Du vil bemærke, at denne metode svarer til at bruge 'ny' med brugerdefineret konstruktorfunktion. Konstruktorfunktionerne erstattes nu af klasser, da de understøttes gennem ES6-specifikationer. Lad os se koden nu.

class Person { constructor(fname, lname) { this.firstName = fname; this.lastName = lname; } } const person = new Person('testFirstName', 'testLastName'); console.log(person.firstName); // testFirstName console.log(person.lastName); // testLastName 

Dette er alle de måder, jeg kender til at oprette objekter i JavaScript. Jeg håber, du nød dette indlæg og nu forstår, hvordan du opretter objekter.

Tak for din tid til at læse denne artikel. Hvis du kunne lide dette indlæg, og det var nyttigt for dig, skal du klikke på klappen? knap for at vise din støtte. Bliv ved med at lære mere!