Klassen und Objekte in JavaScript

Aus Wikizone
Wechseln zu: Navigation, Suche

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

Klassen in JavaScript[Bearbeiten]

In JS gibt es kein class Schlüsselwort. Stattdessen nimmt man einfach eine Funktion:

var Person = function () {
  console.log('instance created');
};

var person1 = new Person();
var person2 = new Person();

Kindklassen, Vererbung und Überschreiben von Methoden[Bearbeiten]

// Define the Student constructor as child of Person
function Student(firstName, subject) {
  // Call the parent constructor, making sure (using Function#call)
  // that "this" is set correctly during the call
  Person.call(this, firstName);

  // Initialize our Student-specific properties
  this.subject = subject;
};
// Create a Student.prototype object that inherits from Person.prototype.
// Note: A common error here is to use "new Person()" to create the
// Student.prototype. That's incorrect for several reasons, not least 
// that we don't have anything to give Person for the "firstName" 
// argument. The correct place to call Person is above, where we call 
// it from Student.
Student.prototype = Object.create(Person.prototype); // See note below

// Set the "constructor" property to refer to Student
Student.prototype.constructor = Student;

// Replace the "sayHello" method
Student.prototype.sayHello = function(){
  console.log("Hello, I'm " + this.firstName + ". I'm studying "
              + this.subject + ".");
};

// Add a "sayGoodBye" method
Student.prototype.sayGoodBye = function(){
  console.log("Goodbye!");
};

// Example usage:
var student1 = new Student("Janet", "Applied Physics");
student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
student1.walk();       // "I am walking!"
student1.sayGoodBye(); // "Goodbye!"

// Check that instanceof works correctly
console.log(student1 instanceof Person);  // true 
console.log(student1 instanceof Student); // true

Klassen in eigenem Namespace[Bearbeiten]

Beispiel:

var MyApp = MyApp || function(initObj){
	this.config = initObj.config
	this.otherstuff = initObj.otherstuff
};

Eigenschaften in Klassen[Bearbeiten]

var Person = function (firstName) {
  this.firstName = firstName;
  console.log('Person instantiated');
};

var person1 = new Person('Alice');
var person2 = new Person('Bob');

// Show the firstName properties of the objects
console.log('person1 is ' + person1.firstName); // logs "person1 is Alice"
console.log('person2 is ' + person2.firstName); // logs "person2 is Bob"

Methoden in Klassen[Bearbeiten]

Mit dem Schlüsselwort prototype kann man Funktionen zur Klasse hinzufügen.

var Person = function (firstName) {
  this.firstName = firstName;
};

Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.firstName);
};

var person1 = new Person("Alice");
var person2 = new Person("Bob");

// call the Person sayHello method.
person1.sayHello(); // logs "Hello, I'm Alice"
person2.sayHello(); // logs "Hello, I'm Bob"

Methodendefinition in der Klasse selbst:

var myClass = function () {

    this.init = function() {
        this.myInternalMethod();
    }

    this.myInternalMethod = function() {
        console.log("internal");
    }
}

var c = new myClass();

c.init();

Generische Klassen simulieren[Bearbeiten]

In JS gibt es nicht das aus Java bekannte Konzept der generischen Klassen. Im folgenden Beispiel soll die Klasse Animals nur als generische Klasse für Kindklassen (z.B. Mammal) dienen. Es sollen also keine Instanzen von Animal direkt erzeugt werden. Wir können das zwar nicht verhindern, aber wir können eine Warnung ausgeben:

function Animal() {
  alert('You\'re not supposed to instantiate a generic animal!');
}
Animal.prototype = {
  name: 'noname',
  speak: function(food) {
    return 'I would like to eat '+food+'!';
  }
};