Javascript Object: objecten maken en ermee werken. Objectgeoriënteerd programmeren

Een object is een ongeordende verzameling eigenschappen. Een eigenschap is een onderdeel van een object dat een variabele simuleert. Een eigenschap bestaat uit een naam en een waarde.

Er zijn drie categorieën objecten in JavaScript:

• Basistype-objecten zijn objecten die zijn gedefinieerd in de ECMAScript-specificatie. Objecten van het type Array, Function, Date of RegExp zijn bijvoorbeeld objecten van het basistype.
• Runtime-objecten zijn objecten die zijn gedefinieerd in de runtime-omgeving (zoals een browser). Objecten van het type HTMLElement zijn bijvoorbeeld runtime-objecten.
• Gebruikersobjecten zijn elk object dat is gemaakt door de uitvoering van JavaScript-code.

Een object kan worden gemaakt met behulp van een objectletterlijk of de new-operator met een constructor.

Een letterlijk object is een door komma's gescheiden lijst van nul of meer eigenschappen (naam: waardeparen) tussen accolades. De eigenschapsnaam kan elke geldige identificatie zijn, een letterlijke tekenreeks (de lege tekenreeks is toegestaan) of een getal. Numerieke eigenschapsnamen worden automatisch geconverteerd naar tekenreeksen. De eigenschapswaarde kan een waarde van elk type of een expressie zijn (de eigenschapswaarde is in dit geval het resultaat van het evalueren van de expressie):

// Maak een leeg object var o = (); // Maak een object met drie eigenschappen var user = (naam: "Homer", "leeftijd": 45, 1: true );

Een object maken met de nieuwe operator:

Var o = nieuw object();

De belangrijkste bewerkingen die met objecten worden uitgevoerd, zijn het toevoegen van nieuwe eigenschappen, het wijzigen van bestaande eigenschappen, het verwijderen van eigenschappen en het openen van eigenschappen.

U kunt een nieuwe eigenschap aan een object toevoegen door een waarde aan de eigenschap toe te kennen. Om een ​​waarde aan een eigenschap toe te kennen, moet deze worden geopend. Om toegang te krijgen tot een eigendom, gebruikt u een van de toegangsoperatoren: . (punt) of (vierkante haakjes):

Toegang krijgen tot een eigenschap en de waarde ervan wijzigen gebeurt op precies dezelfde manier (met behulp van toegangsoperatoren):

Varo = (x:5); alert(o.x); // Toegang tot de eigendomswaarschuwing(o["x"]); // Toegang tot de eigenschap o.x = 10; // Wijzig de waarde

Het verwijderen van een eigenschap gebeurt met behulp van de verwijderoperator:

Varo = (x:5); alert("x" in o); // waar verwijder o.x; alert("x" in o); // vals

Gebruik een for-in-lus om de eigenschappen van een object te doorlopen:

Var obj = (x: 5, y: 10, str: "Hallo!"); voor (var prop in obj) ( alert(prop); )

Een eigenschap waarvan de waarde een functie is, wordt een methode genoemd. Het aanroepen van een methode gaat op precies dezelfde manier als het aanroepen reguliere functie– via de operator () (operator bellen):

Var o = ( zeg Hallo: function() ( alert("Hallo!"); ) ); o.sayHi(); // "Hallo!"

Gebruik het trefwoord this om toegang te krijgen tot de eigenschappen van een object binnen een methode. Het bevat een verwijzing naar het object waarmee de methode is aangeroepen:

Var o = ( naam: "Homer", zegNaam: function() ( alert(this.name); ) ); o.sayName(); // "Homerus"

In plaats van het trefwoord this kunt u de naam van het object rechtstreeks gebruiken, maar dit is niet erg handig, omdat als de naam van het object verandert, u de naam ook in de methoden moet wijzigen:

Var o = ( naam: "Homer", zegNaam: function() ( alert(o.name); ) ); o.sayName(); // "Homerus"

Groeten aan iedereen die leest deze publicatie. Vandaag wil ik het met je hebben over sleutel gereedschap taal - JavaScript-objecten. Laat me je eraan herinneren dat js cross-browser is en op alle besturingssystemen werkt (Windows, Mac OS, enz.). In tegenstelling tot objectgeoriënteerde programmeertalen verschilt de implementatie van objecten in js aanzienlijk van de gebruikelijke functionaliteit en variaties in het gebruik van instances, bijvoorbeeld in C#.

Daarom leert u na het lezen van het huidige artikel de belangrijkste onderscheidende kenmerken van scriptobjecten en leert u op welke manieren ze kunnen worden gemaakt, bijgewerkt en verwijderd. Ik zal ook ingaan op het onderwerp eigenschappen, methoden en constructors, en erover praten nuttige commando's en natuurlijk een beetje over erfenis. Ik denk dat het tijd is om te beginnen met leren!

In js zijn objecten eenvoudige associatieve arrays (ze worden ook hashes genoemd).

Wat is een associatieve array?

Dit is een datastructuur die een bepaalde hoeveelheid informatie opslaat die betrekking heeft op en beschrijft specifiek onderdeel. Alle gegevens zijn gestructureerd en met elkaar verbonden als “sleutel => waarde”.

U moet bijvoorbeeld auto's beschrijven. Vervolgens maakt u een auto-object en beschrijft u de kenmerken ervan in een array. Ik besloot het merk van de auto (naam), de kleur (kleur) en de kosten (prijs) te beschrijven. Hieronder heb ik de code voor het implementeren van de beschreven taak bijgevoegd.

var avto = (naam: "BMW 116i", kleur: "zwart", prijs: 588000 );

Hier zie je een manier om een ​​object te maken met de naam “avto”. Naam, kleur en prijs zijn sleutels die gebruikt kunnen worden tijdens het schrijven van de aanvraag.

Ik liep op mezelf vooruit met dit voorbeeld, dus laten we nu alles in volgorde bekijken.

U kunt op verschillende manieren een object maken:

var auto = (); of var auto = nieuw Object();

In beide gevallen wordt een leeg object met een bekende naam gemaakt, maar de eerste optie wordt veel vaker gebruikt, omdat het korter en handiger is om te schrijven.

Nu moet je het lege object met parameters vullen. Om dit te doen, moet je eigenschappen toevoegen, die ik hierboven ook sleutels noemde. Nogmaals, er zijn twee manieren om eigenschappen te declareren.

Ik zou willen opmerken dat JavaScript geen strikt raamwerk heeft voor het maken en initialiseren van dergelijke parameters. Nieuwe eigenschappen kunnen in de hele code verschijnen, net zoals ze kunnen worden verwijderd en bijgewerkt.

U kunt dus alle sleutels in één keer aanmaken of declareren zodra ze beschikbaar komen. En zelfs als je tijdens het schrijven van het programma naar niet- bestaande sleutels, er zal geen fout optreden. In dit geval wordt “ungedefinieerd” geretourneerd.

Eerste manier.

Eigenschappen maken en openen met behulp van een punt. Om deze optie te implementeren, moet u de naam van het object schrijven en vervolgens de naam van de sleutel eraan toevoegen via een punt en vervolgens een waarde toewijzen via het gelijkteken:

avto.name = “BMW 116i”

Maar bij deze methode voeg je nog een element toe aan de bestaande sleutels:

Deze methode wordt gebruikt als de naam van de woning al bekend is en moet worden gedaan bepaalde acties met betekenissen.

Tweede manier.

Niet anders dan de eerste, als je hun doeleinden vergelijkt. Deze methode heeft echter een klein voordeel. Voor deze optie worden vierkante haken gebruikt:

avto[“naam”] = “BMW 116i”

Een leuke toevoeging is de mogelijkheid om eigenschapsnamen in de vorm van een willekeurige string te maken. Bijvoorbeeld,

avto[“naam van de auto”] = “BMW 116i”

Het werken met sleutels tussen vierkante haken wordt gebruikt wanneer bepaalde parameters door de gebruiker worden ingevoerd en in variabelen worden opgeslagen of wanneer de namen van eigenschappen vooraf onbekend zijn. Een gebruiker vraagt ​​bijvoorbeeld de prijs op van een geselecteerde auto. Het aangeroepen element wordt naar de variabele geschreven en als antwoord wordt de prijs verzonden:

var auto = (); avto.name = "BMW_116i"; avto.prijs = 588000; var-sleutel = "prijs"; // de prijs van de auto werd opgevraagd alert(avto);

Laten we nu verder gaan met het verwijderen van eigenschappen. Alles is hier heel eenvoudig. Gebruik het verwijdercommando om te verwijderen. Dus als je de volgende twee regels toevoegt aan het laatste voorbeeld hieronder:

verwijder auto.prijs;

waarschuwing(automatisch);

Wanneer u vervolgens de waarschuwing voor de tweede keer oproept, wordt in het dialoogvenster 'ongedefinieerd' weergegeven.

In de huidige fase heb ik je verteld hoe je een object kunt maken en de eigenschappen ervan kunt beschrijven. Ik heb hier testgevallen aan gekoppeld, maar de meest oplettende onder jullie, beste lezers, hebben dat bij de eerste opgemerkt programmacode enigszins anders dan alle anderen.

En dat allemaal omdat het gebruik maakt van een compacte datarepresentatie. Dit is een zeer populaire methode voor het declareren van sleutels, omdat het korter is om te schrijven en visueel gemakkelijker te begrijpen is.

In JavaScript kunt u snel de gemaakte eigenschappen doorlopen. Hiervoor werd een speciaal mechanisme voorzien, beter bekend als een cyclus.

Als u bekend bent met andere programmeertalen, weet u dat loops meestal worden gemaakt met het woord for en vervolgens in haakjes de voorwaarde voor het opsommen van elementen is gespecificeerd.

In js lijkt het qua uiterlijk op foreach lus uit de C#-taal. Uitchecken algemeen beeld ontwerpen:

for (var obj in object) ( // uitvoeren van de zoekopdracht)

waarbij obj verantwoordelijk is voor de naam van de opgesomde sleutels,

object – vanwege hun waarden.

En nu is hier een concreet voorbeeld voor u.

var avto = (naam: "BMW 116i", kleur: "zwart", prijs: 588000 ); for (var obj in object) ( alert(obj + phore: + object) )

De scripttaal zorgt voor het creëren van methoden. Dit is een absoluut eenvoudig mechanisme waarmee u op elk moment een methode of methoden aan elk object kunt toevoegen die de mogelijkheden van de gemaakte associatieve arrays uitbreiden. Ze worden ook wel functie-eigenschappen genoemd.

Js zelf is tot op zekere hoogte erg dynamisch en verbazingwekkend. Dit is hoe elementen kunnen worden gemaakt verschillende soorten. Wanneer u deze taal leert, hoeft u geen complexe structuren te onthouden, omdat veel verklaringen erg op elkaar lijken.

Om een ​​methode te maken, moet u dus een object declareren en vervolgens een opdracht schrijven die precies hetzelfde is als het maken van eigenschappen. Na “=” wordt echter niet langer de waarde geschreven, maar de trefwoordfunctie (variabele). En dan worden de acties tussen accolades vermeld.

Hier is de implementatie van dit mechanisme:

var avto =() avto.name = “BMV” avto.jaar = 1999 avto.drive = function(k) ( alert(“De auto is gepasseerd”+n+“ km.”)) avto.drive(300) avto. rijden( 450)

Zoals u kunt zien, bevat dit voorbeeld eigenschappen en methoden waarvan de aanroepen aanvankelijk identiek zijn.

Dat klopt! In deze taal wordt alles dat het trefwoord 'nieuw' gebruikt automatisch een constructor. Dus hierboven zag je de declaratie van een leeg object in de vorm: avto = new Object ();. Dit is de constructeur.

Voor de duidelijkheid, bekijk de onderstaande regels.

var bob = nieuw object();

bob.name = "Bob Smit";

Dit is echter niet het hele arsenaal aan mogelijkheden. In js kunt u uw eigen constructors maken en deze vervolgens gebruiken om nieuwe objecten te declareren.

Ik wil dus een custom constructor ‘maken’ voor reeds bestaande auto’s. Houd er rekening mee dat de naam met geschreven moet worden hoofdletters. Dit onderscheidend kenmerk functies. Om dit te doen, schrijf ik de volgende software-implementatie:

functie Auto (naam, prijs) (

deze.naam = naam;

deze.prijs = prijs;

Als u nu een onbeperkt aantal objecten maakt en deze constructor daarop toepast, behoren ze allemaal tot dezelfde klasse. Bijvoorbeeld:

var car1 = nieuwe Avto("BMW", 650000);

var car2 = nieuwe Avto("Audi", 520000);

Daarnaast kunt u methoden binnen de constructor maken.

In veel talen is overerving doorgaans gebaseerd op klassen die van elkaar kunnen erven. Dan hoor je uitdrukkingen als “voorouderklasse”, “kindklasse”, enz.

In js is alles echter anders. Dit is waar objecten worden geërfd.

Alle overerving is gebaseerd op een interne referentie tussen objecten, die bekend staat als een "prototype". Als u “.prototype” aan een methode toevoegt met behulp van een punt en vervolgens de naam van het prototype invoert, worden alle objecten van de geselecteerde methode overgenomen van dit prototype.

Laten we verder gaan met een voorbeeld.

function Transport (naam) ( this.name = naam this.canDrive = true ) var transport = new Transport ("avto") // heeft een transportobject gemaakt functie Bike (name) ( this.name = naam ) Bike.prototype = transport // specificeer dat alle nieuwe objecten van deze klasse transport bike1 = new Bike ("for_sport") bike2= new Bike ("for_child") console.log(bike1.name) console.log(bike2.name) console .log (fiets1.canDrive)

Ik denk dat ik hier eindig. Ik heb je verteld over de fundamentele aspecten van een scripttaal. Dit is echter slechts oppervlakkige kennis. Vervolgens gaan we dieper. Vergeet in de tussentijd niet om je bij mijn abonnees aan te sluiten en de link naar het artikel met je vrienden te delen. Succes!

Tot ziens!

Met vriendelijke groet, Roman Chueshov

Lezen: 97 keer

Probleemtoestand:

1. Er zijn drie objecten (drie auto's): eerste_auto, tweede_auto en derde_auto.

2. Elk van de objecten (auto's) heeft een reeks eigenschappen en de bijbehorende waarden (auto-eigenschappen).

3. Beschouw een van de objecten:

var eerste_auto = (
merk: "VAZ", /* fabrikant */
model: 2106 , /* model */
jaar: 1980 , /* bouwjaar */
kleur: "beige", /* kleur */
passagiers: 5 , /* aantal passagiers */
cabriolet: false, /* cabriokap */
kilometerstand: 80000 /* kilometerstand */
}

De merk- en kleureigenschappen hebben tekenreekswaarden;

De eigenschappen model, jaar, passagiers en kilometerstand zijn numerieke waarden;

De converteerbare eigenschap heeft een Booleaanse waarde.

U moet het volgende doen:

Schrijf een functie die een auto controleert aan de hand van twee parameters (bouwjaar en kilometerstand) en retourneert Booleaanse waarde WAAR of vals.

Details:

1. De functie heeft één parameter auto , die een van de drie objecten ontvangt. De hierboven besproken auto is bijvoorbeeld first_Car.

2. De functie moet met elk soortgelijk object werken.

/* 1e object */
var eerste_auto = (
merk: "VAZ",
model: 2106,
jaar: 1980,
kleur: "beige",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 80000
}

/* 2e object */
var tweede_auto = (
merk: "VW",
model: "Passat b3",
jaar: 1990,
kleur: "Neptunus",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 160000
}

/* 3e object */
var derde_auto = (
merk: "Hyundai",
model: "Solaris",
jaar: 2012,
kleur: "nat asfalt",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 15000
}

functie good_Car(auto) (
if (auto. jaar< 2000 ){
retour vals;
}
anders als (autokilometerstand > 50000 )(
retour vals;
}
anders(
retourneer waar;
}
}

/* Roep een functie op en voer het resultaat uit */
var resultaat = goede_auto (derde_auto);

document. schrijf(resultaat);

Opmerkingen over de oplossing:

• We hebben dus drie objecten (drie auto's), die elk kunnen worden geanalyseerd met behulp van de functie good_Car.
• De functie good_Car heeft één parameter car , die elk van de objecten kan zijn (auto's): eerste_auto, tweede_auto of derde_auto: functie goede_auto(auto) .
• De carrosserie van de good_Car Function bevat een voorwaarde volgens welke:

  Als de waarde van het bouwjaar van het auto-object kleiner is dan 2000 (met andere woorden: als de auto minder dan 2.000 jaar oud is), dan retourneert de functie false;

  Anders, als de waarde van de kilometerstand van het autoobject groter is dan 50.000 (als de kilometerstand van de auto meer dan 50.000 bedraagt), dan retourneert de functie false;

  Anders retourneert de functie waar.

• Vervolgens roepen we de functie aan en specificeren we het object third_Car als parameter (derde auto), die de test met succes doorstaat. Het resultaat van de functie wordt opgeslagen in de resultaatvariabele:
  var resultaat = goede_auto(derde_auto);
• .
• De resultaatvariabele wordt op het scherm weergegeven; Twee andere objecten niet voldoet aan de eisen van de voorwaarden.

Laten we doorgaan met het werken met objecten in JavaScript.

Dus de hierboven besproken functie bij het controleren van objecten (auto's) retourneert waar of onwaar (waar of onwaar).

U kunt de kwaliteit van de perceptie van de oplossing voor het beschouwde probleem enigszins verbeteren, dat wil zeggen, in plaats van waar of onwaar, wat tekst weergeven. Om dit te doen, zullen we een voorwaarde creëren voor het analyseren van het resultaat.

/* 1e object */
var eerste_auto = (
merk: "VAZ",
model: 2106,
jaar: 1980,
kleur: "beige",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 80000
}

/* 2e object */
var tweede_auto = (
merk: "VW",
model: "Passat b3",
jaar: 1990,
kleur: "Neptunus",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 160000
}

/* 3e object */
var derde_auto = (
merk: "Hyundai",
model: "Solaris",
jaar: 2012,
kleur: "nat asfalt",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 15000
}

/* Functie voor het controleren van een object */
functie good_Car(auto) (
if (auto. jaar< 2000 ){
retour vals;
}
anders als (autokilometerstand > 50000 )(
retour vals;
}
anders(
retourneer waar;
}
}

var resultaat = goede_auto (derde_auto);

als(resultaat) (
document. write ("Je hebt een goede auto: " + derde_auto. jaar + " bouwjaar, met kilometerstand " + derde_auto. kilometerstand + " km.");
}
anders(
document. write("We zullen het niet over je auto hebben....");
}

Oplossing met voorwaarde voor het resultaat - Resultaat...

De voorwaarde voor het analyseren van het resultaat is als volgt.

• De if(result)-expressie is een verkorte vorm van de expressie
  if(resultaat == waar) .
• Als het resultaat van de functie good_Car waar is, geven we de zin weer: “Je hebt een goede auto: 2012, met een kilometerstand van 15.000 km”, waarbij

  2012 en 15000 zijn de waarden van het jaar en de kilometerstand van het object third_Car.

• Als de voorwaarde voor het controleren van het resultaat een valse waarde false oplevert, dan zien we: "We praten niet over uw auto...". Dat wil zeggen: het object in kwestie (auto) slaagde niet voor de test.

Maar dat is niet alles. Bekijk het codefragment voor het aanroepen van de functie en het parseren van het resultaat eens goed:

/* Roep de functie op en analyseer het resultaat */
var resultaat = goede_auto(derde_auto);

als(resultaat) (
document.write("Je hebt een goede auto: " + derde_auto .jaar + " bouwjaar, met kilometerstand " + derde_auto .mileage + " km.");
}
anders(
document.write("We zullen niet over uw auto praten....");
}

Hier is het derde_Car-object (derde auto) drie keer aangegeven:

• De eerste keer dat de functie good_Car wordt aangeroepen, wordt deze opgegeven als parameter: good_Car(third_Car) .
• En dan verschijnt het nog twee keer wanneer we er toegang toe krijgen om de eigenschappen ervan aan te geven: third_Car.year en third_Car.mileage .

Ik vond dit niet leuk omdat ik bij het analyseren van een ander object Twee andere objecten we zullen zijn naam ook drie keer moeten vermelden!!!

Om een ​​eenmalige indicatie van het geanalyseerde object te krijgen, heeft u zowel het resultaat van de good_Car-functie als een analyse van dit resultaat nodig (dat wil zeggen, alles) in een andere functie gezet.

/* 1e object */
var eerste_auto = (
merk: "VAZ",
model: 2106,
jaar: 1980,
kleur: "beige",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 80000
}

/* 2e object */
var tweede_auto = (
merk: "VW",
model: "Passat b3",
jaar: 1990,
kleur: "Neptunus",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 160000
}

/* 3e object */
var derde_auto = (
merk: "Hyundai",
model: "Solaris",
jaar: 2012,
kleur: "nat asfalt",
passagiers: 5,
converteerbaar: vals,
kilometerstand: 15000
}

/* Functie voor het controleren van een object */
functie good_Car(auto) (
if (auto .jaar< 2000){
retour vals;
}
else if (auto.kilometerstand > 50000)(
retour vals;
}
anders(
retourneer waar;
}
}

/* Voer het resultaat van de functie good_Car in en analyse van het resultaat in een andere functie */
functie itog(auto )(
var resultaat = goede_auto(auto);

Als(resultaat) (
document.write("Je hebt een goede auto: " + auto .jaar + " bouwjaar, met kilometerstand " + auto .mileage + " km.");
}
anders(
document.write("We zullen niet over uw auto praten....");
}
}

itog( derde_auto);

Oplossing met een andere functie - Resultaat...

Je hebt een goede auto: bouwjaar 2012, met een kilometerstand van 15.000 km.

Objecten vormen de hoeksteen van JavaScript. Veel ingebouwde gegevenstypen worden weergegeven als objecten. Zijn succesvolle ontwikkelaar JavaScript, je moet een duidelijk begrip hebben van hoe ze werken. De bouwstenen van een object worden de velden of JavaScript-objecteigenschappen genoemd. Ze worden gebruikt om elk aspect van een object te beschrijven. De eigenschap kan de lengte van een lijst, de kleur van de lucht of de geboortedatum van een persoon beschrijven. Objecten maken is een eenvoudig proces. De taal biedt een syntaxis die bekend staat als objectletterlijke waarden, die worden aangegeven met accolades.

De taal biedt twee ingangen voor toegang tot eigenschappen. De eerste en meest voorkomende staat bekend als puntnotatie. In puntnotatie kan een bron worden benaderd door de naam van het hostobject op te geven, gevolgd door de punt en de naam van de eigenschap. Als object.foo bijvoorbeeld aanvankelijk op één was ingesteld, wordt de waarde ervan 2 nadat de JavaScript-objecteninstructie is uitgevoerd.

Een alternatieve toegangssyntaxis staat bekend als haakjesnotatie. In de notatie wordt de objectnaam gevolgd door een reeks vierkante haken. Daarin wordt de eigenschapsnaam opgegeven als een tekenreeks:

object["foo"] = object["foo"] + 1.

Het is expressiever dan puntnotatie, omdat het een variabele in staat stelt een eigenschapsnaam geheel of gedeeltelijk te specificeren. Dit is mogelijk omdat de JavaScript-objectinterpreter deze expressie automatisch omzet naar een string en vervolgens de bijbehorende eigenschap verkrijgt. Eigenschapsnamen worden direct gemaakt door de inhoud van de variabele f samen te voegen met de string "oo":

object = "balk".

Dankzij de haakjesnotatie kunnen eigenschapsnamen tekens bevatten die bij puntnotatie verboden zijn. De volgende verklaring is bijvoorbeeld volledig legaal tussen haakjes. Als de gebruiker echter probeert dezelfde eigenschapsnaam in puntnotatie te maken, zal hij een syntaxisfout tegenkomen:

object["!@#$% &*()."] = waar.

Eigenschappen van geneste JavaScript-objecten zijn toegankelijk door punten en/of haakjes aan elkaar te koppelen. Het volgende object bevat bijvoorbeeld een genest object met de naam baz dat een ander object bevat met de naam foo en dat een eigenschap heeft met de naam bar die de waarde vijf bevat:

var object = ( baz: ( foo: ( bar: 5 ) ) ).

De volgende expressies hebben toegang tot de aan de balk gekoppelde eigenschap. De eerste uitdrukking gebruikt puntnotatie, terwijl de tweede uitdrukking vierkante notatie gebruikt. De derde uitdrukking combineert beide vermeldingen om hetzelfde resultaat te bereiken:

• object.baz.foo.bar;
• object["baz"]["foo"]["bar"];
• object["baz"].foo["bar"].

Expressies zoals die in het vorige voorbeeld kunnen prestatieverslechtering veroorzaken als ze verkeerd worden gebruikt en ervoor zorgen dat het JavaScript-object mislukt. Het evalueren van elke punt- of haakjesuitdrukking kost tijd. Als dezelfde eigenschap meerdere keren wordt gebruikt, is het zinvol om de eigenschap één keer te benaderen en de waarde vervolgens op te slaan in een lokale variabele voor al het toekomstige gebruik.

Wanneer een functie als eigenschap van een object wordt gebruikt, wordt deze een methode genoemd. Net als eigenschappen worden ze gespecificeerd in de letterlijke objectnotatie. Bijvoorbeeld:

var object = ( som: functie(foo, bar) ( return foo + bar; ) ).

JavaScript-objectmethoden kunnen worden aangeroepen met behulp van markeringen en haakjes. In het volgende voorbeeld wordt de methode sum() uit het vorige voorbeeld aangeroepen met beide vermeldingen:

• object.sum(1, 2);
• object["som"](1, 2).

Objectletterlijke notatie is handig voor het maken van nieuwe objecten, maar kan geen eigenschappen of methoden aan bestaande toevoegen. Gelukkig is het toevoegen van nieuwe gegevens net zo eenvoudig als het maken van een opdrachtverklaring. Er wordt een leeg object gemaakt. Vervolgens voegen we met behulp van toewijzingsoperatoren twee eigenschappen toe, foo en bar, en de baz-methode:

• var-object = ();
• object.foo = 1;
• object.bar = nul;
• object.baz = function() ( retourneer "hallo van baz()"; ).

Het basisidee van objectgeoriënteerd programmeren is om programma's in kleinere delen te verdelen en elk deel verantwoordelijk te maken voor het beheer van zijn eigen staat. Enige kennis over hoe een deel van een programma werkt, kan dus lokaal zijn voor dat deel. Iemand die aan de rest van het programma werkt, mag het zich niet herinneren of er zelfs maar van weten. Wanneer deze lokale gegevens veranderen, hoeft alleen de code er direct omheen te worden bijgewerkt.

De verschillende onderdelen van zo’n programma communiceren met elkaar via interfaces, beperkte sets functies of bindingen die nuttige functionaliteit bieden op een abstracter niveau, terwijl de exacte implementatie ervan verborgen blijft. Dergelijke delen van een programma worden gemodelleerd met behulp van objecten. Hun interface bestaat uit een specifieke reeks methoden en eigenschappen. Eigenschappen die deel uitmaken van een interface worden openbaar genoemd. De rest, die geen externe code mag aanraken, wordt privé genoemd.

Veel talen bieden de mogelijkheid om onderscheid te maken tussen openbare en privé-eigendommen en staan ​​geen externe code toe om toegang te krijgen tot privé-eigendommen. JavaScript, opnieuw met een minimalistische aanpak, is er nog niet. Er wordt momenteel gewerkt aan het toevoegen van deze taal. Daarom zullen JavaScript-programmeurs dit idee met succes gebruiken. Meestal wordt de beschikbare interface beschreven in documentatie of opmerkingen. Het is ook gebruikelijk om een ​​onderstrepingsteken (_) aan het begin van de namen van eigenschappen te plaatsen om aan te geven dat deze eigenschappen privé zijn. Het scheiden van de interface en de implementatie is een geweldig idee. Dit wordt meestal inkapseling genoemd.

Een object met haakjes (...) wordt een letterlijk object genoemd. Sommige eigenschappen kun je meteen tussen haakjes zetten (...). Combineert bijvoorbeeld “sleutel: waarde enzovoort”:

let user = ( // een objectnaam: "John", // met sleutel "naam" winkelwaarde "John" age: 30 // by key "age" store value 30 }.!}

Een eigenschap heeft een sleutel (ook wel een "naam" of "identifier" genoemd) vóór een dubbele punt : en een waarde rechts ervan. Het gebruikersobject heeft twee eigenschappen. Het resulterende JavaScript-object van de gebruiker met twee ondertekende bestanden met de naam 'naam' en 'leeftijd'. U kunt er op elk gewenst moment bestanden aan toevoegen, verwijderen en lezen. Eigenschapswaarden zijn toegankelijk via puntnotatie. Het kan van elk type zijn. Je kunt toevoegen Booleaanse waarde. Om een ​​eigenschap te verwijderen, gebruikt u delete in de Error-case van een JavaScript-object.

Alle JavaScript-foutobjecten zijn afstammelingen van het Error-object of een overgenomen object:

Om nog dieper te duiken in het begrijpen hoe applicaties omgaan met JavaScript-fouten, maak beter kennis met Airbrake JavaScript - een tool voor het bijhouden van fouten voor realtime waarschuwingen en direct inzicht in wat er mis is gegaan met uw JavaScript-code.

Foutmeldingen die een gebruiker kan ontvangen voordat hij een JavaScript-object verwijdert:

U kunt vierkante haakjes in een letterlijk object gebruiken. Dit worden berekende eigenschappen genoemd. Hieronder vindt u een voorbeeld.

De betekenis van een berekende eigenschap is eenvoudig: het betekent dat de naam van de eigenschap uit fruit moet worden gehaald. Dus als een bezoeker "appel" invoert, wordt de zak (appel: 5). U kunt complexere uitdrukkingen tussen vierkante haken gebruiken:

laat fruit = "appel";

: 5 // zak.appleComputers = 5

Vierkante beugels veel krachtiger dan puntnotaties. Ze staan ​​namen toe en eigenschapsvariabelen. Maar ze zijn ook lastiger om te schrijven. Wanneer de namen van eigenschappen bekend en eenvoudig zijn, wordt dus meestal een punt gebruikt. En als je iets complexers nodig hebt, schakel dan over naar vierkante haken.

Een variabele kan geen naam hebben die gelijk is aan een van de gereserveerde woorden, zoals "for", "let", "return", enz. Maar bij het sorteren van JavaScript-objecten bestaat een dergelijke beperking niet.

In principe is elke naam toegestaan, maar er is een speciale naam: de naam "__proto__" krijgt om historische redenen een speciale behandeling. U kunt het bijvoorbeeld niet instellen op een andere waarde dan een object:

obj.__proto__ = 5;

alert(obj.__proto__); // werkte niet zoals bedoeld

Zoals je uit de code kunt zien, wordt het doel van primitief 5 genegeerd. Dit kan een bron van fouten en zelfs kwetsbaarheden zijn als de operator van plan is willekeurige sleutel-waardeparen in een object op te slaan en de bezoeker in staat te stellen de sleutels te specificeren. In dit geval kan de bezoeker "proto" als sleutel selecteren en JavaScript aan het object toevoegen. Er is een manier om objecten die met __proto__ worden behandeld, als een reguliere eigenschap te maken. Er is ook nog een kaart met datastructuren die willekeurige sleutels ondersteunen.

De term "integer-eigenschap" betekent hier een string die zonder wijziging van een geheel getal kan worden geconverteerd. "49" is bijvoorbeeld een eigenschapsnaam met een geheel getal, omdat deze, wanneer deze wordt geconverteerd naar een geheel getal en weer terug, nog steeds hetzelfde is. Maar “+49” en “1.2” zijn niet zo. Als de sleutels daarentegen geen geheel getal zijn, worden ze vermeld in de volgorde waarin ze zijn gemaakt. Voorbeeld hieronder.

Om het probleem met belcodes op te lossen, kunt u "vals spelen" door de codes onvolledig te maken. Het toevoegen van een "+" (plusteken) vóór elke code is voldoende. Nu zal het werken zoals bedoeld.

Het verschil tussen objecten en primitieven is dat ze “door verwijzing” worden opgeslagen en gekopieerd. Primitieve waarden worden toegewezen en gekopieerd "als een geheel getal". Een variabele slaat een "adres in het geheugen" op in plaats van het object zelf of een "verwijzing" ernaar. U kunt elke variabele gebruiken om de inhoud ervan te openen en te wijzigen.

Het bovenstaande voorbeeld laat zien dat er slechts één object en beheerder is om erop in te loggen. Als later een andere sleutel (gebruiker) wordt gebruikt, zal de gebruiker de wijzigingen opmerken.

De gelijkheidsoperatoren == en strikte gelijkheid === voor objecten werken op dezelfde manier. Twee objecten zijn alleen gelijk als ze hetzelfde object zijn. Voor vergelijkingen zoals obj1 > obj2 of vergelijkingen met de primitieve obj == 5 worden de objecten omgezet in primitieven. Eerlijk gezegd zijn dergelijke vergelijkingen zeer zelden nodig en zijn ze meestal het resultaat van een codeerfout.

Objecten hebben toegang tot elk eigendom. Als het echter helemaal niet bestaat, is er geen sprake van een fout. Alleen toegang tot een niet-bestaande eigenschap retourneert ongedefinieerd. Het biedt een veelgebruikte manier om een ​​eigenschap te testen en te vergelijken met een ongedefinieerde eigenschap. Hieronder ziet u een voorbeeld.

Gebruik "in" voor eigenschappen die ongedefinieerd opslaan. Meestal werkt een strikte "=== ongedefinieerde" vergelijkingscontrole prima. Er is een speciaal geval waarin het mislukt en "in" correct werkt. Dit is wanneer een eigenschap van een object bestaat, maar ongedefinieerd blijft.

In de bovenstaande code bestaat technisch gezien de eigenschap obj.test. Daarom werkt de in-operator correct. Situaties als deze zijn zeer zeldzaam omdat ongedefinieerd meestal niet wordt toegewezen. Meestal worden nul ‘onbekende’ of ‘lege’ waarden gebruikt. De in-operator is dus feitelijk een gast in de code.

Om alle toetsen van object naar object te doorlopen, is er een speciale lusvorm: for..in. Dit is iets heel anders dan de constructie for(;;).

Hieronder ziet u een voorbeeld.

Houd er rekening mee dat u met alle “for”-constructors een lusvariabele binnen een lus als let-sleutel kunt declareren. Als alternatief kunt u in plaats daarvan een andere variabelenaam, sleutel, gebruiken.

For(let prop in obj) wordt bijvoorbeeld ook veel gebruikt.

Er is een alternatief "vierkant haakje" dat met elke string werkt.

Het punt hier vereist dat de sleutels van het JavaScript-object een geldige variabele-ID zijn, wat betekent dat er geen spaties of andere beperkingen zijn. Er moet op worden gelet dat de lijn tussen de haakjes correct wordt vermeld. Vierkante haakjes bieden ook een manier om de eigenschapsnaam uit het resultaat van een expressie te halen, in tegenstelling tot een letterlijke tekenreeks uit een variabele:

let key = "houdt van vogels";

// hetzelfde als gebruiker["houdt van vogels"] = waar;

gebruiker = waar.

Hier kan de sleutelvariabele tijdens runtime worden berekend en is afhankelijk van gebruikersinvoer en vervolgens gebruikt om toegang te krijgen tot de eigenschap. Dit geeft programmeurs meer flexibiliteit. Puntnotatie kan niet op een vergelijkbare manier worden gebruikt, omdat deze over het JavaScript-object zou itereren. Hieronder ziet u een voorbeeld.

Een gedeclareerd const-object kan worden gewijzigd. Hieronder vindt u een voorbeeld.

Het lijkt misschien alsof het JavaScript-object in regel (*) een fout genereert, maar dat is niet het geval. Dit komt omdat const de waarde van de gebruiker zelf vastlegt. En hier behoudt de gebruiker voortdurend een verwijzing naar hetzelfde object. De lijn (*) gaat binnen het object en wordt niet opnieuw toegewezen aan de gebruiker. Const geeft een foutmelding als u de gebruiker en iets anders probeert in te stellen. Door te klonen en samen te voegen, creëert Object.assign een nieuwe verwijzing naar hetzelfde object als het moet worden gedupliceerd. Dit is ook mogelijk, maar iets moeilijker omdat JavaScript geen ingebouwde methode heeft. In feite is dit zelden nodig. Kopiëren door middel van verwijzing wordt in de meeste gevallen gebruikt. Maar als je dit echt nodig hebt, moet je een JavaScript-object maken en de structuur van een bestaand object repliceren, waarbij je de eigenschappen ervan op een primitief niveau kopieert. Hieronder ziet u een voorbeeld.

En hiervoor kun je ook de Object.assign-methode gebruiken. De argumenten dest en src1, ..., srcN zijn objecten. Het kopieert de eigenschappen van alle objecten src1, ..., srcNINTO dest. Met andere woorden: de eigenschappen van alle argumenten, beginnend bij de tweede, worden gekopieerd naar de eerste. Daarna keert het terug naar de bestemming. U kunt het bijvoorbeeld gebruiken om meerdere objecten tot één te combineren.

En u kunt Object.assign ook gebruiken om de eenvoudige kloonlus te vervangen. Het kopieert alle eigenschappen van de gebruiker naar een leeg object en retourneert het, net als een lus, maar dan korter. Tot nu toe werd aangenomen dat alle gebruikerseigenschappen primitief zijn. Maar eigenschappen kunnen verwijzingen naar andere objecten zijn.

Om dit op te lossen, moet u een kloonlus gebruiken die elke gebruikerswaarde controleert en, als het een object is, vervolgens de structuur ervan repliceert. Dit wordt 'diep klonen' genoemd.

Er is een standaard algoritme voor diep klonen dat bovenstaande gevallen afhandelt, en meer complexe gevallen, het gestructureerde klonenalgoritme. Om te voorkomen dat u het wiel opnieuw uitvindt, kunt u een werkende implementatie uit de lodash JavaScript-bibliotheek gebruiken, de methode heet _.cloneDeep(obj).

Als een programmeur een object doorloopt en alle eigenschappen in dezelfde volgorde wil hebben waarin ze zijn toegevoegd, kan hij vertrouwen op een 'speciale volgorde', waarbij eigenschappen van gehele getallen worden gesorteerd en andere worden gevormd in de volgorde waarin het JavaScript-object is gemaakt. .

Geavanceerde objectmethoden behandelen concepten die zelden worden gebruikt bij JavaScript. Dit komt omdat in normale scenario's deze krachtige functies niet nodig zijn. Sommige van deze methoden werken mogelijk niet in oudere browsers, zoals vroege versies van Netscape 4.

Het prototype zou kunnen worden gebruikt om JavaScript-objecten en alle mycircle-methoden te maken, niet alleen de nieuwe. Dit heeft een gemengd effect op de prestaties. Ze mogen niet opslaan individuele exemplaren methoden voor elke instantie van het object, dus dit kan nodig zijn minder geheugen, maar om ze te vinden moet de browser zoeken naar het huidige bereik en het bovenliggende bereik. Dit kan resulteren in extreme latentie. Over het algemeen moet de gebruiker gebruiken wat geschikt is voor de code in plaats van die beslissing te baseren op prestaties, tenzij hij te maken heeft met een zeer specifieke gecontroleerde omgeving.

In sommige gevallen kan het nodig zijn dat de eigenschap van een object gebonden is aan het object zelf of ergens in de prototypeketen. In JavaScript gebruiken alle objecten de methode hasOwnProperty, die true retourneert als die eigenschap gebonden is aan een exemplaar van een afzonderlijk object. In dit geval wordt het mogelijk om te controleren of de constructor van een object dezelfde eigenschap heeft met dezelfde waarde als de objectinstantie zelf. Dit kan onjuiste resultaten opleveren als er afzonderlijke JavaScript-objecteigenschappen zijn dezelfde waarde voor zowel de objectinstantie als het circuitprototype. De hasOwnProperty-methode gebruikt één enkele parameter: de eigenschapsnaam als een tekenreeks.

U kunt op een vergelijkbare manier privémethoden maken. Het is eenvoudigweg een functie die binnen een constructorfunctie wordt gemaakt. Dit lijkt voor sommigen misschien verwarrend, maar zo werkt het. Een privéfunctie kan alleen worden aangeroepen door de constructor zelf of door methoden die op de regel zijn gedefinieerd. Ze kunnen worden gebruikt als openbare methoden als ze zijn toegewezen aan een openbare constructor en toegankelijk zijn via open methoden JavaScript-objecten.

functie myob() ( functie cantBeSeen() ( alert(geheimewaarde);

) var geheimeWaarde = "";

this.method1 = function () ( secretValue = "geen verrassingen";!}

deze.methode2 = cantBeSeen;

) var oneOb = nieuwe myob();

oneOb.methode1();

// waarschuwt "geen verrassingen" oneOb.method2();

// waarschuwt "geen verrassingen".

Commandoobjecten maken losjes gekoppelde systemen mogelijk door de systemen die een verzoek indienen te scheiden van de objecten en de systemen die het verzoek daadwerkelijk verwerken. Deze verzoeken worden gebeurtenissen genoemd, en de code die de verzoeken verwerkt, wordt gebeurtenishandlers genoemd.

Stel dat u toepassingen maakt die de klembordacties Knippen, Kopiëren en Plakken ondersteunen. Deze acties kunnen op verschillende manieren in de hele applicatie worden geactiveerd: via het menusysteem, contextmenu, bijvoorbeeld door met de rechtermuisknop op een tekstveld te klikken of een sneltoets te gebruiken. Met opdrachtobjecten kunt u de verwerking van deze acties centraliseren, één voor elke bewerking, wanneer er slechts één opdracht nodig is om alle knipverzoeken te verwerken, één voor alle kopieerverzoeken en één voor alle plakverzoeken.

Omdat teams alle verwerkingen centraliseren, zijn ze ook vaak betrokken bij het afhandelen van ongedaan maken-functies voor de hele applicatie. Aanzienlijke verbeteringen kan worden bereikt door het gebruik van modern JavaScript-methoden Dit resulteert in efficiëntere, betrouwbaardere en onderhoudbare applicaties.

Om te leren hoe u dit kunt doen, kunt u JavaScript + jQuery-sjablonen gebruiken. Dit unieke pakket bevat geoptimaliseerd JavaScript voor alle GoF-sjablonen met behulp van meer geavanceerde functies zoals naamruimten, prototypes, modules, functieobjecten, afsluitingen, anonieme functies en meer. Als gebruikers de nieuwste tools en technieken nodig hebben voor JavaScript-sjablonen, jQuery-sjablonen en sjabloonarchitecturen, dan is dit de beste use-case. Dit pakket bevat waardevolle, actuele informatie Voor JavaScript-ontwikkelaars. Dit is inbegrepen:

De voorgestelde basisprincipes van JavaScript-objectsyntaxis zijn erg belangrijk voor beginnende programmeurs. Je moet eerst objecten begrijpen, daarna is er kennis van objectgeoriënteerd programmeren. Het is van cruciaal belang om een ​​diep begrip van dit materiaal te hebben, aangezien het als basis dient voor de rest van de JavaScript-taal.

Pas na enige tijd begon ik te begrijpen dat het onderwerp veel complexer was dan ik dacht. En toen begon ik informatie te bestuderen verschillende bronnen. Sommigen gaven een goed beeld van het onderwerp, maar ik kon niet meteen het hele plaatje overzien.

In dit bericht heb ik geprobeerd alle aspecten van het werken met objecten in JS te behandelen, zonder te diep in te gaan op specifieke details, maar ook zonder belangrijke details weg te laten die je zullen helpen het onderwerp te begrijpen en je zelfverzekerder te voelen als je het verder bestudeert.

Laten we dus beginnen met de basis.

obj["een"]

• Houd er rekening mee dat haakjes moeten worden gebruikt als de sleutel is:
• is geen geldige JavaScript-ID (het bevat een spatie, een streepje, begint met een cijfer...)

Een van de eigenschappen die objecten in JS ontvangen wanneer ze worden gemaakt, wordt aangeroepen is een manier om eigendomsovererving in JavaScript af te dwingen. Op deze manier kunt u functionaliteit delen zonder code in het geheugen te dupliceren. De methode werkt door een verbinding tussen twee objecten te creëren.

Simpel gezegd creëert Prototype een aanwijzer van het ene object naar het andere.

Prototype ketting

Telkens wanneer JS naar een eigenschap in een object zoekt en deze niet rechtstreeks op het object zelf vindt, controleert het de aanwezigheid van de eigenschap in het prototypeobject. Als er geen eigenschap in zit, dan blijft JS kijken in het prototype van het bijbehorende object. Dit gaat door totdat JS een geschikt pand vindt of het einde van de keten bereikt.

Laten we eens kijken naar een voorbeeld:

Var nadelen = functie () ( this.a = 1; this.b = 2; ) var obj = new cons(); nadelen.prototype.b = 3; nadelen.prototype.c = 4;
nadelen is een constructor (eenvoudigweg een functie die kan worden aangeroepen met de operator nieuw).

Op de vijfde regel maken we een nieuw object - nieuw exemplaar nadelen. Direct na creatie obj krijgt ook de eigenschap prototype.

En nu voegen we eigenschappen toe ( "b", "c") object-prototype nadelen.
Laten we eens overwegen obj:

obj.a // 1 - alles is hier hetzelfde, U kunt toegang krijgen tot de toetsen met behulp van een punt ( is nog steeds 1.
obj.c? obj- j geen eigendom C obj! Zoals eerder vermeld, zal JS er nu echter naar zoeken in het prototype

en retourneert de waarde 4. Laten we nu eens nadenken over wat de betekenis is obj.b Laten we nu eens nadenken over wat de betekenis is?

en hoe het zal zijn als we verwijderen Obj.b is gelijk aan 2. Wij hebben de woning toegewezen B nadelen, maar we deden het voor een prototype Laten we nu eens nadenken over wat de betekenis is, dus als we het controleren Laten we nu eens nadenken over wat de betekenis is, dan krijgen we er nog steeds 2. Echter direct na het verwijderen is gelijk aan 2. Wij hebben de woning toegewezen JS zal het niet meer kunnen vinden jij o bj

is het prototype van het object, en tevens het einde van de prototypeketen. Object.create():
var newObj = Object.create(obj); U nieuwObj er zal de volgende reeks prototypes zijn:

newObj ---> obj ---> Object.prototype ---> null nieuw Constructeur. Net als in het bovenstaande voorbeeld is de constructor eenvoudigweg een JS-functie waarmee we kunnen profiteren van de operator

om er nieuwe exemplaren van te maken.

ES6-klassen:
Klasse rechthoek ( constructor(hoogte, breedte) ( this.height = hoogte; this.width = breedte; ) getArea() ( return this.height * this.width; ) ) let square = nieuwe rechthoek(2, 2); Vierkant - constructorinstantie rechthoek , en dus kunnen we bellen, square.getArea() //4 vierkante breedte Zoals je kunt raden,.

Welke manier is beter? Als u van plan bent meerdere exemplaren te maken, kunt u ES6 of de ontwerper gebruiken. Als u van plan bent het object één keer te maken, is het beter om een ​​letterlijke waarde op te geven, aangezien dit de eenvoudigste manier is.

En nu we er meer over hebben geleerd prototype en nu we vertrouwd zijn geraakt met alle manieren om nieuwe objecten te maken, kunnen we verdergaan met het bespreken van een van de meest verwarrende aspecten die verband houden met objecten.

Wanneer we een object maken Een object creëren Letterlijk object:, variabel obj krijgt het geheugenadres van het object, maar niet de waarde ervan! Het is uiterst belangrijk om dit verschil te begrijpen, anders kunnen er fouten optreden. Wanneer we een ander object maken laat newObj = obj, creëren we feitelijk een verwijzing naar een bepaald geheugengebied obj, en geen compleet nieuw object.

Dit betekent dat door te doen nieuweObj.a = 2, we veranderen eigenlijk obj op zo'n manier dat U kunt toegang krijgen tot de toetsen met behulp van een punt ( wordt gelijk aan 2!

Deze aanpak leidt gemakkelijk tot bugs, en daarom werken veel bedrijven met onveranderlijke objecten. In plaats van een reeds gemaakt object te wijzigen, zult u opnieuw een nieuw object moeten maken (een kopie van het origineel) en daarin wijzigingen moeten aanbrengen. Dit is hoe belangrijke bibliotheken zoals Redux werken, en het is een van de kernconcepten van functioneel programmeren in het algemeen. Je kunt meer lezen.

Gelijkwaardigheid

Uit het bovenstaande volgt ook dat twee objecten nooit gelijk kunnen zijn, ook al hebben ze dezelfde eigenschappen. Dit komt door het feit dat JS feitelijk de geheugenlocatie van objecten vergelijkt, en dat twee objecten zich nooit op dezelfde geheugenlocatie bevinden.

// Twee verschillende objecten met de dezelfde eigenschappen zijn niet gelijk var fruit = (naam: "appel"); var fruitbeer = (naam: "appel"); fruit === vruchtbeer; // return false // hier verwijzen fruit en fruitbear naar hetzelfde object var fruit = (naam: "appel"); var vruchtbeer = vrucht; fruit === vruchtbeer; // retourneert waar
Je hebt je dus waarschijnlijk al afgevraagd hoe je objecten kunt vergelijken of hoe je verschillende manipulaties met objecten kunt uitvoeren, gezien de vereiste van hun onveranderlijkheid.

Laten we verschillende mogelijkheden overwegen.

Een object wijzigen

Laten we zeggen dat het duidelijk is dat we objecten eigenlijk niet moeten veranderen, dus willen we een kopie maken van het overeenkomstige object en de eigenschappen ervan wijzigen. Komt te hulp Object.assign().

Var obj = (a: 1, b: 2); var newObj = Object.assign((), obj,(a:2)) // (a: 2, b: 2 )
Als we de waarde van het onroerend goed willen wijzigen A voorwerp obj, je kunt gebruiken object.toewijzen om een ​​kopie te maken obj en de veranderingen ervan.

In het voorbeeld kun je zien dat we eerst een leeg object maken en vervolgens de waarden kopiëren obj en onze wijzigingen aanbrengen, waardoor we uiteindelijk een nieuw en gebruiksklaar object verkrijgen.

Houd er rekening mee dat deze methode niet werkt voor diep kopiëren. Als we het hebben over diep kopiëren, bedoelen we dat we een object met een of meer eigenschappen moeten kopiëren.

Const obj = (a: 1, b: (a: 1)); // b eigenschap is een object
Object.assign() kopieert de eigenschappen van een object, dus als de waarde van de eigenschap een verwijzing naar een object is, wordt alleen de aanwijzer gekopieerd.

Een diepe kopie vereist een recursieve bewerking. Hier kunt u een functie schrijven of gewoon een methode gebruiken _.kloonDiep uit de Lodash-bibliotheek.

Vergelijking van objecten

Er is een coole techniek om met objecten te werken: conversie van tekenreeksen. In het volgende voorbeeld converteren we beide objecten naar strings en vergelijken we ze:

JSON.stringify(obj1) === JSON.stringify(obj2)
Deze aanpak is logisch omdat we uiteindelijk tekenreeksen vergelijken die een verwijzing zijn naar een waardetype. Slecht nieuws- het werkt niet altijd, vooral omdat de ene of andere volgorde van objecteigenschappen niet gegarandeerd is.

Een andere goede oplossing is om de methode te gebruiken _.is gelijk van Lodash, dat diepgaande objectvergelijkingen uitvoert.

En voordat we afsluiten, bespreken we nog enkele veelgestelde vragen over objecten. Hierdoor duik je dieper in het onderwerp en pas je de opgedane kennis toe in de praktijk.

Probeer zelf over de oplossing na te denken voordat je het antwoord leest.

• voor in. Deze methode omvat alle telbare eigenschappen van een object en zijn prototypeketens. We hebben het prototype gezien (en hopelijk het materiaal geleerd), dus het mag duidelijk zijn dat de applicatie voor in zal niet altijd waar zijn voor het verkrijgen van eigenschappen van een object.
• Objectsleutels. Deze methode retourneert een array met de sleutels van alle oorspronkelijke (behorende tot het opgegeven object) teleigenschappen. Deze aanpak is beter omdat we alleen aan de eigenschappen van het object werken, zonder toegang te krijgen tot de eigenschappen prototype. Er zijn echter situaties waarin u een attribuut heeft toegewezen optelbaar een eigenschap is vals, en object.sleutels Uiteindelijk sla je het over en krijg je een onjuist resultaat. Dit gebeurt zelden, maar in dergelijke gevallen kan het van pas komen getOwnPropertyNames.
• getOwnPropertyNames retourneert een array met alle eigen sleutels van het object (zowel telbare als ontelbare).

• Objectwaarden itereert zijn eigen teleigenschappen en retourneert een array met de bijbehorende waarden.
• Objectgegevens itereert zijn eigen teleigenschappen en retourneert een array met de sleutels en hun waarden.

Eén zo'n methode is array.lengte. Het resultaat is dat we gewoon kunnen schrijven

Laat objLength = Object.getOwnPropertyNames(obj).lengte;

• Houd er rekening mee dat objecten van een referentietype zijn, wat betekent dat het aanbevolen is om ermee te werken zonder de originele objecten te wijzigen.
• Maak vrienden met het pand prototype en een keten van prototypes.
• Maak kennis met de tools waarmee u met objecten kunt werken. Onthoud dat je objecten in strings kunt veranderen, een array van hun sleutels kunt krijgen, of eenvoudigweg hun eigenschappen kunt herhalen met behulp van de reeks methoden waarmee we kennis hebben gemaakt.