Constructeurs JavaScript


Table des matières

    Afficher la table des matières


Exemple

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

Remarques

Il est considéré comme une bonne pratique de nommer les fonctions du constructeur avec une première lettre majuscule.

À propos de ça

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éé.

Voir également:

Le didacticiel JavaScript ce


Types d'objets (plans) (classes)

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");


Qu'est-ce que ce ?

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.

Note

ce n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this.

Voir également:

Le didacticiel JavaScript ce


Ajout d'une propriété à un objet

Ajouter une nouvelle propriété à un objet existant est simple :

Exemple

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).


Ajout d'une méthode à un objet

Ajouter une nouvelle méthode à un objet existant est simple :

Exemple

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).


Ajout d'une propriété à un constructeur

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 :

Exemple

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 :

Exemple

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.


Ajout d'une méthode à un constructeur

Votre fonction constructeur peut également définir des méthodes :

Exemple

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 :

Exemple

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.

Vous pouvez maintenant essayer :

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.


Constructeurs JavaScript intégrés

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.


Saviez-vous?

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().

Exemple

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>

Objets chaîne

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.


Objets numériques

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.


Objets booléens

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.