Klassen und Objekte in JavaScript: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 12: Zeile 12:
 
</pre>
 
</pre>
  
=== Kindklasse ===
+
=== 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