function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Es gilt als bewährte Praxis, Konstruktorfunktionen mit einem Großbuchstaben als Anfangsbuchstaben zu benennen.
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.
Das JavaScript dieses Tutorial
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");
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.
dies
ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von this
nicht ändern.
Das JavaScript dieses Tutorial
Das Hinzufügen einer neuen Eigenschaft zu einem vorhandenen Objekt ist einfach:
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).
Das Hinzufügen einer neuen Methode zu einem vorhandenen Objekt ist einfach:
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).
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:
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:
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.
Ihre Konstruktorfunktion kann auch Methoden definieren:
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:
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.
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“.
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
.
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()
.
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>
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.
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.
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.