function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Il est considéré comme une bonne pratique de nommer les fonctions du constructeur avec une première lettre majuscule.
Dans une fonction constructeur this
n'a pas de valeur. C'est un substitut au nouvel objet. La valeur de this
deviendra le nouvel objet lorsque un nouvel objet est créé.
Le didacticiel JavaScript ce
Les exemples des chapitres précédents sont limités. Ils ne créent que des objets uniques.
Parfois, nous avons besoin d'un "plan" pour créer de nombreux objets du même "type".
La façon de créer un "type d'objet" consiste à utiliser une fonction de constructeur d'objet.
Dans l'exemple ci-dessus, function Person()
est une fonction constructeur d'objet.
Les objets du même type sont créés en appelant la fonction constructeur avec le mot-clé new
:
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
En JavaScript, le mot clé this
fait référence à un objet.
Quel objet dépend de la façon dont ce
est invoqué (utilisé ou appelé).
Le mot-clé this
fait référence à différents objets selon la façon dont il est utilisé :
Dans une méthode objet, this
fait référence à l'objet.
Seul, this
fait référence à l'objet global.
Dans une fonction, this
fait référence à l'objet global.
Dans une fonction, en mode strict, ce
est non défini
.
Dans un événement, this
fait référence à l'élément qui a reçu l'événement.
Des méthodes telles que call()
, apply()
et bind()
peut faire référence à ce
à n'importe quel objet.
ce
n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this
.
Le didacticiel JavaScript ce
Ajouter une nouvelle propriété à un objet existant est simple :
myFather.nationality = "English";
Essayez-le vous-même →
<!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>
La propriété sera ajoutée à myFather. Pas à ma mère. (Aucune autre personne ne s’y oppose).
Ajouter une nouvelle méthode à un objet existant est simple :
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
Essayez-le vous-même →
<!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>
La méthode sera ajoutée à myFather. Pas à ma mère. (Aucune autre personne ne s’y oppose).
Vous ne pouvez pas ajouter une nouvelle propriété à un constructeur d'objet de la même manière ajoutez une nouvelle propriété à un objet existant :
Person.nationality = "English";
Essayez-le vous-même →
<!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>
Pour ajouter une nouvelle propriété à un constructeur, vous devez l'ajouter au fonction constructeur :
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
Essayez-le vous-même →
<!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>
De cette façon, les propriétés des objets peuvent avoir des valeurs par défaut.
Votre fonction constructeur peut également définir des méthodes :
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;
};
}
Essayez-le vous-même →
<!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>
Vous ne pouvez pas ajouter une nouvelle méthode à un constructeur d'objet de la même manière que vous ajoutez un nouvelle méthode à un objet existant.
L'ajout de méthodes à un constructeur d'objet doit être effectué à l'intérieur du fonction constructeur :
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;
};
}
La fonction changeName() attribue la valeur du nom au nom de la personne. propriété lastName.
myMother.changeName("Doe");
Essayez-le vous-même →
<!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 sait quelle personne vous êtes parler en "substituant" ce par ma Mère.
JavaScript a des constructeurs intégrés pour les objets natifs :
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
Essayez-le vous-même →
<!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>
L'objet Math()
n'est pas dans la liste. Math
est un objet global. Le mot clé new
ne peut pas être utilisé sur Mathématiques
.
Comme vous pouvez le voir ci-dessus, JavaScript possède des versions objets de la primitive types de données String
, Number
et Boolean
. Mais il n’y a aucune raison de créer des objets complexes. Valeurs primitives sont beaucoup plus rapides :
Utilisez des chaînes littérales ""
au lieu de new String()
.
Utilisez les littéraux numériques 50
au lieu de new Number()
.
Utilisez les littéraux booléens true/false
au lieu de new Boolean()
.
Utilisez les littéraux d'objet {}
au lieu de new Object()
.
Utilisez les littéraux de tableau []
au lieu de new Array()
.
Utilisez les littéraux de modèle /()/
au lieu de new RegExp()
.
Utilisez les expressions de fonction () {}
au lieu de 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
Essayez-le vous-même →
<!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>
Normalement, les chaînes sont créées sous forme de primitives : firstName="John"
Mais les chaînes peuvent également être créées en tant qu'objets à l'aide du mot-clé new
:
firstName=new String("John")
Découvrez pourquoi les chaînes ne doivent pas être créées en tant qu'objet dans le chapitre Chaînes JS.
Normalement, les nombres sont créés sous forme de primitives : x=30
Mais les nombres peuvent également être créés en tant qu'objets à l'aide du mot-clé new
:
x=nouveau Numéro(30)
Découvrez pourquoi les nombres ne doivent pas être créés en tant qu'objet dans le chapitre Numéros JS.
Normalement, les booléens sont créés sous forme de primitives : x = faux
Mais les booléens peuvent également être créés en tant qu'objets à l'aide du mot-clé new
:
x=new Boolean(false)
Découvrez pourquoi les booléens ne doivent pas être créés en tant qu'objets dans le chapitre Booléens JS.