MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Werken met objecten

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

JavaScript is ontworpen op een simpel object-georiënteerde paradigma. Een object is een verzameling eigenschappen, en een eigenschap is een associatie tussen een naam (of een sleutel) en een waarde. De waarde van een eigenschap kan een functie zijn, in welk geval de eigenschap bekend staat als een methode. Naast objecten die zijn gedefinieerd in de browser, kunt u uw eigen objecten definiëren. In dit hoofdstuk wordt beschreven hoe u objecten, eigenschappen, functies en methoden kunt gebruiken en hoe u uw eigen objecten kunt maken.

Objecten overzicht

Objecten in JavaScript, net zoals in veel andere programmeertalen, kunnen worden vergeleken met objecten in het echte leven. Het begrip objecten in JavaScript kan worden begrepen met echte, tastbare objecten.

In JavaScript is een object een zelfstandige entiteit, met eigenschappen en type. Vergelijk het bijvoorbeeld met een kopje. Een kopje is een voorwerp, met eigenschappen. Een kopje heeft een kleur, een ontwerp, gewicht, een materiaal waaruit het bestaat, enz. Op dezelfde wijze kunnen JavaScript objecten eigenschappen hebben die hun karakteristieken definiëren.

Objecten en eigenschappen

Een JavaScript-object heeft eigenschappen die daarmee samenhangen. Een eigenschap van een object kan worden uitgelegd als een variabele die is gekoppeld aan het object. Objecteigenschappen zijn in principe hetzelfde als gewone JavaScript-variabelen, behalve de koppeling bij objecten. De eigenschappen van een object bepalen de karakteristieken van het object. U krijgt toegang tot de eigenschappen van een object met een simpele stip-notatie:

objectName.propertyName

Net als alle JavaScript variabelen, kunnen zowel de objectnaam (die een normale variabele zijn) en eigendomsnaam hoofdlettergevoelig zijn. U kunt een eigenschap definiëren door het toewijzen van een waarde. Laten we bijvoorbeeld een object maken met de naam myCar en geef het de eigenschappen als merk, model en jaar als volgt:

var myCar = new Object();
myCar.make = 'Ford';
myCar.model = 'Mustang';
myCar.year = 1969;

Niet-toegewezen eigenschappen van een object zijn undefined (en niet null).

myCar.color; // undefined

Eigenschappen van JavaScript-objecten kunnen toegankelijk of ingesteld worden met behulp van een haakjes notitie (voor meer details zie toegangsbeheerders). Objecten worden soms associatieve arrays genoemd, aangezien elke eigenschap wordt geassocieerd met een tekenreeks die kan worden gebruikt om toegang te krijgen. Zo kun je bijvoorbeeld de eigenschappen van het myCar-object openen:

myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;

Een object naam eigenschap kan een geldige JavaScript-string zijn, of iets dat kan worden omgezet in een tekenreeks, inclusief de lege tekenreeks. Echter, elke naam eigenschap die geen geldige JavaScript-identificatie is (bijvoor-beeld een naam eigenschap die een spatie of een koppelteken heeft, of dat begint met een nummer), kan alleen worden geopend met behulp van de vierkante haakjes notatie. Deze notatie is ook erg handig wanneer naam eigenschappen dynamisch worden bepaald (wanneer de naam eigenschap niet tot de runtime wordt bepaald). Voorbeelden zijn als volgt:

// four variables are created and assigned in a single go, 
// separated by commas
var myObj = new Object(),
    str = 'myString',
    rand = Math.random(),
    obj = new Object();

myObj.type              = 'Dot syntax';
myObj['date created']   = 'String with space';
myObj[str]              = 'String value';
myObj[rand]             = 'Random Number';
myObj[obj]              = 'Object';
myObj['']               = 'Even an empty string';

console.log(myObj);

Houd er rekening mee dat alle toetsen in de notatie van de vierkante haakjes worden geconverteerd naar String type, omdat objecten in JavaScript alleen String type kunnen hebben als sleutel type. Bijvoorbeeld, in de bovenstaande code, wanneer de sleutel obj aan de myObj wordt toegevoegd, roept JavaScript de methode obj.toString () op en gebruikt u deze resultaatreeks als de nieuwe sleutel.

U kunt ook eigenschappen krijgen door een stringwaarde te gebruiken die in een variabele is opgeslagen:

var propertyName = 'make';
myCar[propertyName] = 'Ford';

propertyName = 'model';
myCar[propertyName] = 'Mustang';

U kunt de notitie van de haakjes gebruiken voor ... om te herhalen over alle optelbare eigenschappen van een object. Om te illustreren hoe dit werkt, geeft de volgende functie de eigenschappen van het object weer wanneer u het object en de objectnaam als argumenten voor de functie doorstuurt:

function showProps(obj, objName) {
  var result = '';
  for (var i in obj) {
    // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain
    if (obj.hasOwnProperty(i)) {
      result += objName + '.' + i + ' = ' + obj[i] + '\n';
    }
  }
  return result;
}

Dus, de de functie aanroep showProps(myCar, "myCar") Zout  het volgende retourneren:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 1969

Som de eigenschappen van een object op

Uitgaande van ECMAScript 5 zijn er drie manieren om objecteigenschappen te kunnen bekijken/doorlopen:

  • for...in loops
  • Deze methode traceert alle berekenbare eigenschappen van een object en zijn prototype-keten
  • Object.keys(o)
    Deze methode retourneert een array met alle eigen (niet in de prototype-keten) opsombare naam eigenschappen ("keys") van een object o.
  • Object.getOwnPropertyNames(o)
    Deze methode retourneert een array met al zijn naam eigenschappen (opsomming of niet) van een object o.

Vóór ECMAScript 5 was er geen native manier om alle eigenschappen van een object te vermelden. Dit kan echter worden bereikt met de volgende functie:

function listAllProperties(o) {
	var objectToInspect;     
	var result = [];
	
	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {  
      result = result.concat(Object.getOwnPropertyNames(objectToInspect));  
	}
	
	return result; 
}

Dit kan handig zijn om 'verborgen' eigenschappen te onthullen (eigenschappen in de prototype-keten die niet door het object toegankelijk zijn, omdat een andere eigenschap eerder in de prototype-keten dezelfde naam heeft). Door duplicaten in een array te verwijderen. Kan gemakkelijk een lijst van toegankelijke eigenschappen worden gemaakt. 

Nieuwe objecten maken

JavaScript heeft een aantal voorgedefinieerde objecten. Daarnaast kunt u uw eigen objecten maken. U kunt een object maken met een objectinitiator. Als alternatief kunt u eerst een constructorfunctie maken en vervolgens een object oproepen die de functie in combinatie met de nieuwe operator invult.

Object initialiseerders gebruiken 

Naast het maken van objecten die een constructorfunctie gebruiken, kunt u objecten maken met behulp van een objectinitiator. Het gebruik van objectinitialisatoren wordt soms aangeduid als het maken van objecten met letterlijke notatie. "Object initializer" is consistent met de terminologie die door C ++ wordt gebruikt.

De syntaxis voor een object met een objectinitialiseerder is:

var obj = { property_1:   value_1,   // property_# may be an identifier...
            2:            value_2,   // or a number...
            // ...,
            'property n': value_n }; // or a string

Waar obj de naam van het nieuwe object is, is elke eigenschap_i een identificatie (een naam, een getal of een tekenreeks) en elke waarde_i is een uitdrukking waarvan de waarde is toegewezen aan het property_i. De obj en de opdracht zijn optioneel; Als u niet elders naar het object hoeft te verwijzen, hoeft u het niet toe te wijzen aan een variabele. (Houd er echter rekening mee dat u het object letterlijk tussen haakjes moet kunnen wikkelen wanneer het object verschijnt waar een verklaring wordt verwacht, om niet letterlijk te verwarren met een blokverklaring.)

Objectinitialisatoren zijn expressies, en elke objectinitialiser resulteert in een nieuw object dat wordt gemaakt, wanneer de statement waarin het verschijnt is uitgevoerd. Identieke objectinitializers maken onderscheidende objecten die niet gelijk zijn aan elkaar. Objecten worden gecreëerd als een oproep naar een nieuw object () is gemaakt; Dat wil zeggen, objecten gemaakt van object letterlijke expressies zijn instances van object.

De volgende statement maakt een object en wijst deze toe aan de variabele x als en alleen als de uitdrukkings cond waar is:

if (cond) var x = {greeting: 'hi there'};

Het volgende voorbeeld maakt myHonda met drie eigenschappen. Merk op dat de motoreigenschap ook een object is met eigen eigenschappen.

var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};

U kunt ook objectinitieringen gebruiken om arrays te maken. Zie array literals.

Gebruik van een constructor functie

Alternatief voor het maken van een object met deze twee stappen:

  1. Definieer het objecttype door een constructorfunctie te schrijven. Er is een sterke conventie, met goede reden, om een hoofdletter te gebruiken.
  2. Creer een instance van het object met new.

Om een objecttype te definiëren, creëer een functie voor het objecttype dat zijn naam, eigenschappen en methoden specificeert. Stel bijvoorbeeld dat u een objecttype voor auto's wilt maken. U wilt dat dit type object een auto wordt genoemd, en u wilt dat het eigenschappen voor make, model en jaar heeft. Om dit te doen, zou u de volgende functie schrijven:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Let op de manier om waarden aan de eigenschappen van het object toe te wijzen op basis van de waarden die aan de functie zijn overgedragen.

Nu kunt u als volgt een object genaamd mycar maken:

var mycar = new Car('Eagle', 'Talon TSi', 1993);

Deze verklaring maakt mycar en wijst de opgegeven waarden toe voor zijn eigenschappen. Dan is de waarde van mycar.make de string "Eagle", mijncar.jaar is het geheel getal 1993, enzovoort.

U kunt elk gewenst aantal car objecten maken door het aanroepen van new. Bijvoorbeeld,

var kenscar = new Car('Nissan', '300ZX', 1992);
var vpgscar = new Car('Mazda', 'Miata', 1990);

Een object kan een eigenschap hebben dat zelf een ander object is. Stel bijvoorbeeld dat u een object genaamd person als volgt definieert:

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

En installeer dan twee nieuwe persoon objecten als volgt:

var rand = new Person('Rand McKinnon', 33, 'M');
var ken = new Person('Ken Jones', 39, 'M');

Vervolgens kunt u de definitie van de auto omschrijven om een eigendom van een persoon die een persoon object heeft, als volgt te omvatten:

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

Om de nieuwe objecten te instantiëren, gebruik dan het volgende:

var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
var car2 = new Car('Nissan', '300ZX', 1992, ken);

Merk op dat in plaats van een letterlijke tekenreeks of integerwaarde bij het maken van nieuwe objecten de bovengenoemde uitspraken de voorwerpen rand overbrengen en kenmerken als de argumenten voor de eigenaren. Dan als u de naam van de eigenaar van car2 wilt ontdekken, kunt u toegang hebben tot de volgende accommodatie:

car2.owner.name

Houd er rekening mee dat u altijd een eigenschap kunt toevoegen aan een eerder gedefinieerd object. Bijvoorbeeld de verklaring

car1.color = 'black';

Voegt een kleureigenschap toe aan car1, en geeft het een waarde van 'black' toe. Dit heeft echter geen invloed op andere objecten. Om de nieuwe eigenschap toe te voegen aan alle objecten van hetzelfde type, moet u de eigenschap toevoegen aan de definitie van het type auto-object.

Gebruik van de  Object.create methode

Objecten kunnen ook worden gemaakt met de methode Object.create (). Deze methode kan erg handig zijn, omdat u het prototype object voor het object kunt maken dat u wilt maken zonder dat u een constructor function.type moet definiëren.

// Animal properties and method encapsulation
var Animal = {
  type: 'Invertebrates', // Default value of properties
  displayType: function() {  // Method which will display type of Animal
    console.log(this.type);
  }
};

// Create new animal type called animal1 
var animal1 = Object.create(Animal);
animal1.displayType(); // Output:Invertebrates

// Create new animal type called Fishes
var fish = Object.create(Animal);
fish.type = 'Fishes';
fish.displayType(); // Output:Fishes

Overerving

Alle objecten in JavaScript overerven van ten minste één ander object. Het object dat wordt geërfd is bekend als het prototype, en de geërfde eigenschappen zijn te vinden in het prototype object van de constructor. Zie Inheritance and the prototype chain voor meer informatie.

Objecteigenschappen indexeren

U kunt verwijzen naar een eigenschap van een object, hetzij door zijn eigendomsnaam of door zijn ordinale index. Als u voor het eerst een eigenschap definieert, moet u het altijd bij zijn naam noemen, en als u eerst een eigenschap definieert met een index, moet u het altijd door de index refereren.

Deze beperking is van toepassing wanneer u een object en zijn eigenschappen maakt met een constructorfunctie(zoals eerder met het Car-object type) en wanneer u afzonderlijke eigenschappen expliciet definieert(bijvoorbeeld, myCar.color = "red"). Als u eerst een objecteigenschap definieert met een index, zoals myCar[5] = "25 mpg", verwijst u vervolgens alleen naar de eigenschap als myCar[5].

De uitzondering op deze regel zijn objecten die uit HTML worden gereflecteerd, zoals de formulier array. U kunt altijd naar objecten in deze arrays verwijzen door hun ordernummer (op basis van waar ze in het document verschijnen) of hun naam (indien gedefinieerd). ). Als de tweede <FORM> -code in een document bijvoorbeeld een NAME-kenmerk van "myForm" heeft, kunt u verwijzen naar het formulier als document.forms[1] of document.forms["myForm"] of document.forms.myForm.

Defining properties for an object type

U kunt een eigenschap toevoegen aan een eerder gedefinieerd objecttype door het eigenschap prototype te gebruiken. Dit definieert een eigenschap die wordt gedeeld door alle objecten van het opgegeven type, in plaats van door slechts één instantie van het object. De volgende code voegt een kleureigenschap toe aan alle objecten van het type auto, en geeft vervolgens een waarde toe aan de kleureigenschap van het object car1.

Car.prototype.color = null;
car1.color = 'black';

Zie het prototype property van het Functieobject in de JavaScript reference voor meer informatie.

Methoden definiëren

Een method is een functie die geassocieerd wordt met een object, of, simpel gezegd, een methode is een eigen-schap van een object dat een functie is. Methoden worden gedefinieerd zoals de normale functies zijn ge-definieerd, behalve dat ze als eigendom van een object moeten worden toegewezen. Zie ook method definitions voor meer details. Een voorbeeld is:

objectName.methodname = function_name;

var myObj = {
  myMethod: function(params) {
    // ...do something
  }

  // OR THIS WORKS TOO

  myOtherMethod(params) {
    // ...do something else
  }
};

Waar objectnaam een bestaand object is, methodname is de naam die u aan de methode toewijst en functienaam is de naam van de functie.

U kunt dan de methode in de context van het object als volgt noemen:

object.methodname(params);

U kunt methoden voor een objecttype definiëren door een methode-definitie in de objectconstructorfunctie op te nemen. U kunt een functie definiëren die de eigenschappen van de eerder gedefinieerde autoobjecten wilt opmaken en weergeven; bijvoorbeeld,:

function displayCar() {
  var result = 'A Beautiful ' + this.year + ' ' + this.make
    + ' ' + this.model;
  pretty_print(result);
}

Waar pretty_print een functie is om een horizontale regel en een tekenreeks weer te geven. Let op het gebruik van this verwijzend naar het object waartoe de methode behoort.

Van deze functie car kun je een methode maken door het toevoegen van een statement.

this.displayCar = displayCar;

Naar de objectdefinitie. Dus, de volledige definitie van auto zou nu lijken

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayCar = displayCar;
}

Dan kunt u de displayCar-methode voor elk van de objecten als volgt noemen:

car1.displayCar();
car2.displayCar();

Using this for object references

JavaScript heeft een speciaal zoekwoord, this,  dat u binnen een methode kunt gebruiken om naar het huidige object te verwijzen. Stel bijvoorbeeld dat u een functie heeft genaamd validate, die een object's eigenschaps waarde, gegeven de object's hoge en lage waarde valideert:

function validate(obj, lowval, hival) {
  if ((obj.value < lowval) || (obj.value > hival)) {
    alert('Invalid Value!');
  }
}

Vervolgens kunt u validate in elke form element's onchange event handler aanroepen,  gebruikmakend van this om het element door te geven zoals in het volgende voorbeeld:

<input type="text" name="age" size="3"
  onChange="validate(this, 18, 99)">

In het algemeen verwijst dit naar het aanroepende object in een methode.

In combinatie met de form eigenschap, kan dit verwijzen naar het ouderformulier van het huidige object. In het volgende voorbeeld, bevat het formulier myForm  een Text object en een button. Wanneer de gebruiker op de button klikt, wordt de waarde van het tekstobject ingesteld op de naam van het formulier. De knop onclick event handler gebruikt dit this.form to om te verwijzen naar het ouder formulier, myForm.

<form name="myForm">
<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
<p><input name="button1" type="button" value="Show Form Name"
     onclick="this.form.text1.value = this.form.name">
</p>
</form>

Definitie van getters en setters

Een getter is een methode die de waarde van een specifieke eigenschap krijgt. Een setter is een methode die de waarde van een specifieke eigenschap bepaalt. U kunt getters en setters definiëren op elk voorgedefinieerd kern object of door gebruiker gedefinieerd object dat de toevoeging van nieuwe eigenschappen ondersteunt. De syntaxis voor het definiëren van getters en setters maakt gebruik van de object letterlijke syntaxis.

Het volgende illustreert hoe getters en setters kunnen werken voor een gebruiker gedefinieerd object o.

var o = {
  a: 7,
  get b() { 
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  }
};

console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50;
console.log(o.a); // 25

De o objecten eigenschappen zijn:

  • o.a — a number
  • o.b — a getter that returns o.a plus 1
  • o.c — a setter that sets the value of o.a to half of the value o.c is being set to

Houd er rekening mee dat de functie namen van getters en setters gedefinieerd in een object letterlijk met behulp van "[gs] et property ()" (in tegenstelling tot __define [GS]etter__) niet de namen van de getters zelf zijn, hoewel de "[gs]et Property()" syntax zou ju kunnen misleiden anders te denken. Om een functie te noemen in een getter of setter met behulp van de "[gs]et property () "syntax, definieer u een expliciet genoemde functie met behulp van Object.defineProperty (of de Object.prototype.__defineGetter__ legacy fallback).

De volgende code illustreert hoe getters en setters het Date prototype kunnen uitbreiden om een jaar eigenschap toe te voegen aan alle gevallen van de vooraf gedefinieerde Date class. Het maakt gebruik van de bestaande GetFullYear- en setFullYear-methoden van de Date-klasse om de getter en setter van het jaar te ondersteunen.

Deze uitspraken definiëren een getter en setter voor het jaar eigenschap:

var d = Date.prototype;
Object.defineProperty(d, 'year', {
  get: function() { return this.getFullYear(); },
  set: function(y) { this.setFullYear(y); }
});

Deze statements gebruiken de getter en setter in een Datum object:

var now = new Date();
console.log(now.year); // 2000
now.year = 2001; // 987617605170
console.log(now);
// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001

In principe, getters en setters kunnen beide

  • defined using object initializers, or
  • Later toegevoegd aan een object op elk moment met behulp van een getter of setter toevoegingsmethode.

Bij het definiëren van getters en setters met behulp van object initializers alles wat u hoeft te doen is het prefix van een getter methode met get en een setter methode met set. Natuurlijk mag de getter-methode geen parameter verwachten, terwijl de setter-methode precies een parameter verwacht (de nieuwe waarde die wordt ingesteld). Bijvoorbeeld:

var o = {
  a: 7,
  get b() { return this.a + 1; },
  set c(x) { this.a = x / 2; }
};

Getters en setters kunnen ook op elk moment na creatie aan een object worden toegevoegd met de methode Object.defineProperties. De eerste parameter van deze methode is het object waarop u de getter of setter wilt definiëren. De tweede parameter is een object waarvan de eigenschap namen getter of setter namen zijn en waarvan de eigenschapswaarden objecten zijn om de getter- of setterfuncties te definiëren. Hier is een voorbeeld dat dezelfde getter en setter definieert in het vorige voorbeeld:

var o = { a: 0 };

Object.defineProperties(o, {
    'b': { get: function() { return this.a + 1; } },
    'c': { set: function(x) { this.a = x / 2; } }
});

o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
console.log(o.b); // Runs the getter, which yields a + 1 or 6

Welke van de twee te kiezen vormen hangt af van uw programmeerstijl en taak. Als u gaat voor de objectinitiator wanneer u een prototype definieert, zal u waarschijnlijk meestal de eerste vorm kiezen. Dit formulier is compacter en natuurlijker. Als u later wel getters en setters moet toevoegen, omdat u het prototype of het specifieke object niet hebt geschreven, dan is de tweede vorm het enige mogelijke formulier. De tweede vorm vertegenwoordigt waarschijnlijk het dynamische karakter van JavaScript, maar het kan de code moeilijk lezen en begrijpen.

Verwijderen van eigenschappen

U kunt een niet-overgenomen eigenschap verwijderen door gebruik te maken van de delete operator. De volgende code toont aan hoe u een eigenschap verwijdert.

// Creates a new object, myobj, with two properties, a and b.
var myobj = new Object;
myobj.a = 5;
myobj.b = 12;

// Removes the a property, leaving myobj with only the b property.
delete myobj.a;
console.log ('a' in myobj); // yields "false"

U kunt ook delete gebruiken om een globale variabele te verwijderen als het var sleutelwoord niet gebruikt werd om de variabele te verklaren:

g = 17;
delete g;

Objecten vergelijken

In JavaScript zijn objecten een referentietype. Twee afzonderlijke objecten zijn nooit gelijk, ook al hebben ze dezelfde eigenschappen. Alleen het vergelijken van datzelfde object-referentie met zichzelf geeft waar.

// Two variables, two distinct objects with the same properties
var fruit = {name: 'apple'};
var fruitbear = {name: 'apple'};

fruit == fruitbear; // return false
fruit === fruitbear; // return false
// Two variables, a single object
var fruit = {name: 'apple'};
var fruitbear = fruit;  // assign fruit object reference to fruitbear

// here fruit and fruitbear are pointing to same object
fruit == fruitbear; // return true
fruit === fruitbear; // return true
fruit.name = 'grape';
console.log(fruitbear);    // yields { name: "grape" } instead of { name: "apple" }

Voor meer informatie over vergelijkingsoperators, bekijk Comparison operators.

Bekijk ook

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: jjkaptein
 Laatst bijgewerkt door: jjkaptein,