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 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.
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 {{jsxref("undefined")}} (en niet {{jsxref("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
Uitgaande van ECMAScript 5 zijn er drie manieren om objecteigenschappen te kunnen bekijken/doorlopen:
for...in loopso terug.o terug.Vóór ECMAScript 5 was er geen native manier om alle eigenschappen van een object te overlopen. 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). Op deze manier kan er gemakkelijk een lijst van toegankelijke eigenschappen worden gemaakt.
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.
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.
Alternatief voor het maken van een object met deze twee stappen:
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.
Object.create methodeObjecten kunnen ook worden gemaakt met de methode {{jsxref ("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
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.
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.
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.
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();
this voor object referentiesJavaScript 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>
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 — een nummero.b — een getter die o.a teruggeeft met 1 erbij geteldo.c — een setter die de waarde van o.a instelt op de helft van de waarde van o.cHoud 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 {{jsxref ("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
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.
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;
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.
// Twee variabelen, twee verschillende object met de dezelfde eigenschappen
var fruit = {name: 'apple'};
var fruitbear = {name: 'apple'};
fruit == fruitbear; // geeft false
fruit === fruitbear; // geeft false
// Twee variabelen, één object
var fruit = {name: 'apple'};
var fruitbear = fruit; // wijs referentie van fruit object referentie toe aan fruitbear
// hier verwijzen fruit en fruitbear naar hetzelfde object
fruit == fruitbear; // return true
fruit === fruitbear; // return true
fruit.name = 'grape';
console.log(fruitbear); // geeft { name: "grape" } terug ipv { name: "apple" }
Voor meer informatie over vergelijkingsoperators, bekijk Comparison operators.
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}