Klassen und Objekte in JavaScript: Unterschied zwischen den Versionen
Aus Wikizone
| Zeile 12: | Zeile 12: | ||
</pre> | </pre> | ||
| − | === | + | === Kindklassen, Vererbung und Überschreiben von Methoden=== |
<pre> | <pre> | ||
// Define the Student constructor as child of Person | // Define the Student constructor as child of Person | ||
| Zeile 23: | Zeile 23: | ||
this.subject = subject; | this.subject = subject; | ||
}; | }; | ||
| + | </pre> | ||
| + | |||
| + | <pre> | ||
| + | // 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 | ||
</pre> | </pre> | ||
=== Klassen in eigenem Namespace === | === Klassen in eigenem Namespace === | ||
| Zeile 33: | Zeile 67: | ||
</pre> | </pre> | ||
| − | == Eigenschaften in Klassen == | + | === Eigenschaften in Klassen === |
<pre> | <pre> | ||
var Person = function (firstName) { | var Person = function (firstName) { | ||
| Zeile 48: | Zeile 82: | ||
</pre> | </pre> | ||
| − | == Methoden in Klassen == | + | === Methoden in Klassen === |
Mit dem Schlüsselwort prototype kann man Funktionen zur Klasse hinzufügen. | Mit dem Schlüsselwort prototype kann man Funktionen zur Klasse hinzufügen. | ||
<pre> | <pre> | ||
Version vom 5. Dezember 2014, 15:46 Uhr
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
Klassen in JavaScript
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
// 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
Beispiel:
var MyApp = MyApp || function(initObj){
this.config = initObj.config
this.otherstuff = initObj.otherstuff
};
Eigenschaften in Klassen
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
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"
Die Methode ist ein