JavaScript-Konstruktoren


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Beispiel

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Anmerkungen

Es gilt als bewährte Praxis, Konstruktorfunktionen mit einem Großbuchstaben als Anfangsbuchstaben zu benennen.

Darüber

In einer Konstruktorfunktion hat this keinen Wert. Es ist ein Ersatz für das neue Objekt. Der Wert von this wird zum neuen Objekt, wenn Es entsteht ein neues Objekt.

Siehe auch:

Das JavaScript dieses Tutorial


Objekttypen (Blaupausen) (Klassen)

Die Beispiele aus den vorherigen Kapiteln sind begrenzt. Sie erstellen nur einzelne Objekte.

Manchmal benötigen wir einen „Bauplan für die Erstellung vieler Objekte desselben „Typs“.

Die Möglichkeit, einen „Objekttyp“ zu erstellen, besteht darin, eine Objektkonstruktorfunktion zu verwenden.

Im obigen Beispiel ist function Person() eine Objektkonstruktorfunktion.

Objekte desselben Typs werden durch Aufrufen der Konstruktorfunktion mit dem Schlüsselwort new erstellt:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");


Was ist das?

In JavaScript bezieht sich das Schlüsselwort this auf ein Objekt.

Welches Objekt hängt davon ab, wie dies aufgerufen (verwendet oder aufgerufen) wird?

Das Schlüsselwort this bezieht sich je nach Verwendung auf unterschiedliche Objekte:

  • In einer Objektmethode bezieht sich this auf das Objekt.

  • Allein dies bezieht sich auf das globale Objekt.

  • In einer Funktion bezieht sich this auf das globale Objekt.

  • In einer Funktion ist im strikten Modus dies undefiniert.

  • In einem Ereignis bezieht sich this auf das Element, das das Ereignis empfangen hat.

  • Methoden wie call(), apply() und bind() kann dies auf jedes Objekt verweisen.

Notiz

dies ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von this nicht ändern.

Siehe auch:

Das JavaScript dieses Tutorial


Hinzufügen einer Eigenschaft zu einem Objekt

Das Hinzufügen einer neuen Eigenschaft zu einem vorhandenen Objekt ist einfach:

Beispiel

myFather.nationality = "English";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add nationality to first object
myFather.nationality = "English";

// Display nationality 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality; 
</script>

</body>
</html>

Die Eigenschaft wird zu myFather hinzugefügt. Nicht zu meiner Mutter. (Nicht gegenüber anderen Personen).


Eine Methode zu einem Objekt hinzufügen

Das Hinzufügen einer neuen Methode zu einem vorhandenen Objekt ist einfach:

Beispiel

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add a name method to first object
myFather.name = function() {
  return this.firstName + " " + this.lastName;
};

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

Die Methode wird zu myFather hinzugefügt. Nicht zu meiner Mutter. (Nicht gegenüber anderen Personen).


Hinzufügen einer Eigenschaft zu einem Konstruktor

Sie können einem Objektkonstruktor nicht auf die gleiche Weise eine neue Eigenschaft hinzufügen Fügen Sie einem vorhandenen Objekt eine neue Eigenschaft hinzu:

Beispiel

Person.nationality = "English";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// You can NOT add a new property to a constructor function
Person.nationality = "English";

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

Um einem Konstruktor eine neue Eigenschaft hinzuzufügen, müssen Sie sie dem hinzufügen Konstruktorfunktion:

Beispiel

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
</script>

</body>
</html>

Auf diese Weise können Objekteigenschaften Standardwerte haben.


Eine Methode zu einem Konstruktor hinzufügen

Ihre Konstruktorfunktion kann auch Methoden definieren:

Beispiel

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
   
this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
}

// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 

</script>

</body>
</html>

Sie können einem Objektkonstruktor nicht auf die gleiche Weise eine neue Methode hinzufügen wie eine neue Methode für ein vorhandenes Objekt.

Das Hinzufügen von Methoden zu einem Objektkonstruktor muss innerhalb des erfolgen Konstruktorfunktion:

Beispiel

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName;  
   
this.lastName = lastName;
   
this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
     
this.lastName = name;
  };
}

Die Funktion „changeName()“ weist der Person den Wert „name“ zu lastName-Eigenschaft.

Jetzt können Sie Folgendes ausprobieren:

myMother.changeName("Doe");

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
// Constructor function for Person objects
function Person(firstName,lastName,age,eyeColor) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  }
}
// Create a Person object
const myMother = new Person("Sally","Rally",48,"green");

// Change last name
myMother.changeName("Doe");

// Display last name
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>

</body>
</html>

JavaScript weiß, welche Person Sie sind darüber reden, indem wir dies durch meine Mutter „ersetzen“.


Integrierte JavaScript-Konstruktoren

JavaScript verfügt über integrierte Konstruktoren für native Objekte:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p id="demo"></p>

<script>
const x1 = new String();   // A new String object
const x2 = new Number();   // A new Number object
const x3 = new Boolean();  // A new Boolean object
const x4 = new Object();   // A new Object object
const x5 = new Array();    // A new Array object
const x6 = new RegExp();   // A new RegExp object
const x7 = new Function(); // A new Function object
const x8 = new Date();     // A new Date object

// Display the type of all objects
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>

<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>

<p>Use literals instead like: myArray = []</p>

</body>
</html>

Das Objekt Math() ist nicht in der Liste. Math ist ein globales Objekt. Das Schlüsselwort new kann nicht verwendet werden Mathe.


Wussten Sie?

Wie Sie oben sehen können, verfügt JavaScript über Objektversionen des Grundelements Datentypen String, Number und Boolean . Es gibt jedoch keinen Grund, komplexe Objekte zu erstellen. Primitive Werte sind viel schneller:

Verwenden Sie Zeichenfolgenliterale " anstelle von new String().

Verwenden Sie Zahlenliterale 50 anstelle von new Number().

Verwenden Sie boolesche Literale true/false anstelle von new Boolean().

Verwenden Sie Objektliterale {} anstelle von new Object().

Verwenden Sie Array-Literale [] anstelle von new Array().

Verwenden Sie Musterliterale /()/ anstelle von new RegExp().

Verwenden Sie Funktionsausdrücke () {} anstelle von new Function().

Beispiel

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
let x1 = "";      // string 
let x2 = 0;       // number
let x3 = false;   // boolean
const x4 = {};    // Object object
const x5 = [];    // Array object
const x6 = /()/;  // RegExp object
const x7 = function(){};  // function

// Display the type of all
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

String-Objekte

Normalerweise werden Zeichenfolgen als Grundelemente erstellt: firstName="John"

Strings können aber auch als Objekte mit dem Schlüsselwort new erstellt werden:
firstName=new String("John")

Erfahren Sie im Kapitel, warum Strings nicht als Objekt erstellt werden sollten JS-Strings.


Nummerierungsobjekte

Normalerweise werden Zahlen als Grundelemente erstellt: x=30

Zahlen können aber auch als Objekte mit dem Schlüsselwort new erstellt werden:
x=neu Nummer(30)

Erfahren Sie im Kapitel, warum Zahlen nicht als Objekt erstellt werden sollten JS-Nummern.


Boolesche Objekte

Normalerweise werden boolesche Werte als Grundelemente erstellt: x = falsch

Boolesche Werte können aber auch als Objekte mit dem Schlüsselwort new erstellt werden:
x=new Boolean(false)

Erfahren Sie in diesem Kapitel, warum Boolesche Werte nicht als Objekt erstellt werden sollten JS Boolesche Werte.