In diesem Tutorial lernen Sie anhand von Beispielen die JavaScript-Konstruktorfunktion kennen.
In JavaScript wird eine Konstruktorfunktion zum Erstellen von Objekten verwendet. Beispielsweise,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
Im obigen Beispiel function Person()handelt es sich um eine Objektkonstruktorfunktion.
Um ein Objekt aus einer Konstruktorfunktion zu erstellen, verwenden wir das newSchlüsselwort.
Hinweis : Es wird empfohlen, den ersten Buchstaben Ihrer Konstruktorfunktion in Großbuchstaben zu schreiben.
Erstellen Sie mehrere Objekte mit der Konstruktorfunktion
In JavaScript können Sie mehrere Objekte aus einer Konstruktorfunktion erstellen. Beispielsweise,
// constructor function function Person () ( this.name = 'John', this.age = 23, this.greet = function () ( console.log('hello'); ) ) // create objects const person1 = new Person(); const person2 = new Person(); // access properties console.log(person1.name); // John console.log(person2.name); // John
Im obigen Programm werden zwei Objekte mit derselben Konstruktorfunktion erstellt.
JavaScript dieses Schlüsselwort
Wenn in JavaScript das thisSchlüsselwort in einer Konstruktorfunktion verwendet wird, thisbezieht es sich auf das Objekt, wenn das Objekt erstellt wird. Beispielsweise,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Wenn ein Objekt auf die Eigenschaften zugreift, kann es daher direkt auf die Eigenschaft als zugreifen person1.name.
Funktionsparameter des JavaScript-Konstruktors
Sie können auch eine Konstruktorfunktion mit Parametern erstellen. Beispielsweise,
// constructor function function Person (person_name, person_age, person_gender) ( // assigning parameter values to the calling object this.name = person_name, this.age = person_age, this.gender = person_gender, this.greet = function () ( return ('Hi' + ' ' + this.name); ) ) // creating objects const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'female'); // accessing properties console.log(person1.name); // "John" console.log(person2.name); // "Sam"
Im obigen Beispiel haben wir während der Erstellung des Objekts Argumente an die Konstruktorfunktion übergeben.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Dadurch kann jedes Objekt unterschiedliche Eigenschaften haben. Wie oben gezeigt,
console.log(person1.name); gibt John
console.log(person2.name); gibt Sam
Objekte erstellen: Konstruktorfunktion gegen Objektliteral
- Objektliteral wird im Allgemeinen verwendet, um ein einzelnes Objekt zu erstellen. Die Konstruktorfunktion ist nützlich, wenn Sie mehrere Objekte erstellen möchten. Beispielsweise,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- Jedes aus der Konstruktorfunktion erstellte Objekt ist eindeutig. Sie können dieselben Eigenschaften wie die Konstruktorfunktion haben oder einem bestimmten Objekt eine neue Eigenschaft hinzufügen. Beispielsweise,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Jetzt ist diese ageEigenschaft für person1Objekte eindeutig und für Objekte nicht verfügbar person2.
Wenn jedoch ein Objekt mit einem Objektliteral erstellt wird und eine Variable mit diesem Objektwert definiert wird, ändern Änderungen des Variablenwerts das ursprüngliche Objekt. Beispielsweise,
// using object lateral let person = ( name: 'Sam' ) console.log(person.name); // Sam let student = person; // changes the property of an object student.name = 'John'; // changes the origins object property console.log(person.name); // John
Wenn ein Objekt mit einem Objektliteral erstellt wird, fungiert jede von diesem Objekt abgeleitete Objektvariable als Klon des ursprünglichen Objekts. Daher wird jede Änderung, die Sie an einem Objekt vornehmen, auch im anderen Objekt wiedergegeben.
Hinzufügen von Eigenschaften und Methoden zu einem Objekt
Sie können einem Objekt wie folgt Eigenschaften oder Methoden hinzufügen:
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding property to person1 object person1.gender = 'male'; // adding method to person1 object person1.greet = function () ( console.log('hello'); ) person1.greet(); // hello // Error code // person2 doesn't have greet() method person2.greet();
Ausgabe
Hallo Ungefangener TypeError: person2.greet ist keine Funktion
Im obigen Beispiel werden dem Objekt eine neue Eigenschaft genderund eine neue Methode greet()hinzugefügt person1.
Diese neue Eigenschaft und Methode wird jedoch nur hinzugefügt person1. Sie können nicht zugreifen genderoder greet()von person2. Daher gibt das Programm einen Fehler aus, wenn wir versuchen, darauf zuzugreifenperson2.greet();
JavaScript-Objektprototyp
Sie können einer Konstruktorfunktion mithilfe eines Prototyps auch Eigenschaften und Methoden hinzufügen . Beispielsweise,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding new property to constructor function Person.prototype.gender = 'Male'; console.log(person1.gender); // Male console.log(person2.gender); // Male
Weitere Informationen zu Prototypen finden Sie unter JavaScript Prototype.
Integrierte JavaScript-Konstruktoren
In JavaScript sind auch Konstruktoren integriert. Einige von ihnen sind:
let a = new Object(); // A new Object object let b = new String(); // A new String object let c = new Number(); // A new Number object let d = new Boolean(); // A new Boolean object
In JavaScript können Zeichenfolgen als Objekte erstellt werden durch:
const name = new String ('John'); console.log(name); // "John"
In JavaScript können Zahlen als Objekte erstellt werden durch:
const number = new Number (57); console.log(number); // 57
In JavaScript können Boolesche Werte als Objekte erstellt werden durch:
const count = new Boolean(true); console.log(count); // true
Hinweis : Es wird empfohlen, primitive Datentypen zu verwenden , und erstellen Sie sie in einer normalen Art und Weise, wie const name = 'John';, const number = 57;undconst count = true;
Sie sollten Zeichenfolgen, Zahlen und boolesche Werte nicht als Objekte deklarieren, da sie das Programm verlangsamen.
Hinweis : In JavaScript wurde das Schlüsselwort classin ES6 (ES2015) eingeführt, mit dem wir auch Objekte erstellen können. Klassen ähneln Konstruktorfunktionen in JavaScript. Weitere Informationen finden Sie unter JavaScript-Klassen.
