Dans ce didacticiel, vous découvrirez la fonction de constructeur JavaScript à l'aide d'exemples.
En JavaScript, une fonction constructeur est utilisée pour créer des objets. Par exemple,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
Dans l'exemple ci-dessus, function Person()est une fonction de constructeur d'objet.
Pour créer un objet à partir d'une fonction constructeur, nous utilisons le newmot - clé.
Remarque : il est recommandé de mettre en majuscule la première lettre de votre fonction constructeur.
Créer plusieurs objets avec la fonction constructeur
En JavaScript, vous pouvez créer plusieurs objets à partir d'une fonction constructeur. Par exemple,
// 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
Dans le programme ci-dessus, deux objets sont créés à l'aide de la même fonction constructeur.
JavaScript ce mot-clé
En JavaScript, lorsque le thismot-clé est utilisé dans une fonction constructeur, thisfait référence à l'objet lorsque l'objet est créé. Par exemple,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Par conséquent, lorsqu'un objet accède aux propriétés, il peut accéder directement à la propriété en tant que person1.name.
Paramètres de la fonction de constructeur JavaScript
Vous pouvez également créer une fonction constructeur avec des paramètres. Par exemple,
// 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"
Dans l'exemple ci-dessus, nous avons passé des arguments à la fonction constructeur lors de la création de l'objet.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Cela permet à chaque objet d'avoir des propriétés différentes. Comme montré ci-dessus,
console.log(person1.name); donne John
console.log(person2.name); donne Sam
Créer des objets: fonction constructeur contre littéral objet
- Object Literal est généralement utilisé pour créer un seul objet. La fonction constructeur est utile si vous souhaitez créer plusieurs objets. Par exemple,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- Chaque objet créé à partir de la fonction constructeur est unique. Vous pouvez avoir les mêmes propriétés que la fonction constructeur ou ajouter une nouvelle propriété à un objet particulier. Par exemple,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Désormais, cette agepropriété est unique à l' person1objet et n'est pas disponible pour l' person2objet.
Cependant, si un objet est créé avec un littéral d'objet et si une variable est définie avec cette valeur d'objet, toute modification de la valeur de la variable modifiera l'objet d'origine. Par exemple,
// 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
Lorsqu'un objet est créé avec un littéral d'objet, toute variable d'objet dérivée de cet objet agira comme un clone de l'objet d'origine. Par conséquent, toute modification que vous apportez à un objet sera également reflétée dans l'autre objet.
Ajout de propriétés et de méthodes dans un objet
Vous pouvez ajouter des propriétés ou des méthodes dans un objet comme celui-ci:
// 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();
Production
hello Uncaught TypeError: person2.greet n'est pas une fonction
Dans l'exemple ci-dessus, une nouvelle propriété genderet une nouvelle méthode greet()sont ajoutées à l' person1objet.
Cependant, cette nouvelle propriété et méthode n'est ajoutée qu'à person1. Vous ne pouvez pas accéder genderou greet()depuis person2. Par conséquent, le programme donne une erreur lorsque nous essayons d'accéderperson2.greet();
Prototype d'objet JavaScript
Vous pouvez également ajouter des propriétés et des méthodes à une fonction constructeur à l'aide d'un prototype . Par exemple,
// 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
Pour en savoir plus sur les prototypes, visitez Prototype JavaScript.
Constructeurs JavaScript intégrés
JavaScript a également des constructeurs intégrés. Certains d'entre eux sont:
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
En JavaScript, les chaînes peuvent être créées en tant qu'objets par:
const name = new String ('John'); console.log(name); // "John"
En JavaScript, les nombres peuvent être créés sous forme d'objets par:
const number = new Number (57); console.log(number); // 57
En JavaScript, les booléens peuvent être créés en tant qu'objets par:
const count = new Boolean(true); console.log(count); // true
Remarque : Il est recommandé d'utiliser des types de données primitifs et de les créer de manière normale, comme const name = 'John';, const number = 57;etconst count = true;
Vous ne devez pas déclarer des chaînes, des nombres et des valeurs booléennes comme des objets car ils ralentissent le programme.
Remarque : En JavaScript, le mot-clé a classété introduit dans ES6 (ES2015) qui nous permet également de créer des objets. Les classes sont similaires aux fonctions de constructeur en JavaScript. Pour en savoir plus, visitez les classes JavaScript.
