Objekte und Konstruktoren

Ein Objekt ist eine Menge von Eigenschaften, welche Verbindungen von einem Namen und einem Wert sind. Der Wert kann auch eine Funktion sein, dann ist die Rede von einer Methode. Mittels Punkt- oder Klammer-Notation kann auf Eigenschaften und Methoden zugegriffen werden. JavaScript stellt eine Vielzahl von Operationen zur Verfügung, mit deren Hilfe Objekte bzw. deren Methoden und Eigenschaften, bearbeitet und untersucht werden können.

var person = {
	name : 'Mustermann',
	prename : 'Max',
	age : 25
};

Mittels Punkt- oder Klammer-Notation kann auf Eigenschaften und Methoden zugegriffen werden.

// Punkt-Notation
console.log(person.prename + " " +  person.name);

// Klammer-Notation
console.log(person['prename'] + " " +  person['name']);

Mit Hilfe des in-Operators und hasOwnProperty() kann überprüft werden, ob eine Eigenschaft zu einem Objekt gehört. hasOwnProperty() liefert lediglich true zurück wenn eine Eigenschaft direkt zu einem Objekt gehört.

console.log(person.toString()); // [object Object]
// in Operator
console.log('name' in person && 'toString' in person); // true
// hasOwnProperty()
console.log(person.hasOwnProperty('name') && person.hasOwnProperty('toString')); // false

Beispiel - Objekt

<!DOCTYPE html>
<html>	
	<head>
		<meta charset="UTF-8">
		<title>Objekte Beispiel</title>
	</head>
	<body>
		<h1>Objekte</h1>
		<form method="get" action="#">
			<label>Name: <input type="text" id="name"></input></label><br />
			<label>Prename: <input type="text" id="prename"></input></label><br />
			<label>Age: <input type="text" id="age"></input></label><br />
			<button id="add">Person eintragen</button><br />
		</form>
		<script src="objekte.js"></script>
	</body>
</html>
objekte.html
var person = {
	name : 'Mustermann',
	prename : 'Max',
	age : 25
};

document.querySelector('#add').addEventListener("click", function() {
	document.querySelector('#name').value = person.name;
	document.querySelector('#prename').value = person.prename;
	document.querySelector('#age').value = person.age;
});
objekte.js

Beispiel - Konstruktor

// Konstruktorfunktion
function Person(name, prename, age) {
	this.name = name;
	this.prename = prename;
	this.age = age;
	
	this.printPerson = function() {
		console.log(this.prename + " " + this.name);
	};
}

var persona = new Person("Mustermann", "Max", "25");
var personb = new Person("Musterfrau", "Erika", "45");
persona.printPerson();
personb.printPerson();
konstruktor.js

keyboard_arrow_left

Vorheriger Artikel

JavaScript Grundlagen

Skriptausführung, Datentypen, Referenztypen, Beispiele

Werbung

Mit Programmier-Skills perfekt für die Zukunft aufgestellt! Die Kurse gehen schon bei 11,99 € los!
Top-Online-Kurse in „IT & Software“

Werbung

Maconline
Maconline