Introduction à Constructor en JavaScript
La méthode constructeur en JavaScript est une méthode spéciale utilisée pour créer et initialiser des objets dans une classe. C'est ce que fait un constructeur dans chaque langage de programmation. Ce qui rend le constructeur JavaScript différent des autres, c'est la liberté en termes de syntaxe. Pour mieux le comprendre, ouvrez simplement les outils de développement du navigateur (Ctrl / Cmd + Shift + C) et accédez à l'onglet Console dans la fenêtre des outils de développement.
Cela ressemble à ceci dans Chrome
C'est le terrain de jeu de la plupart des concepts liés à JavaScript. Nous utiliserions ce terrain de jeu tout au long de cet article.
Types de constructeurs en JavaScript
Il existe deux types de constructeurs en JavaScript
1. Constructeurs intégrés
Ce sont les constructeurs facilement disponibles qui sont fournis avec l'environnement d'exécution. L'utilisateur a simplement besoin de les invoquer et de l'alto, le travail est terminé. Des exemples de constructeurs intégrés sont Array, Date et Object.
2. Constructeurs définis par l'utilisateur
Ce sont les constructeurs déclarés et définis par le programmeur à utiliser dans toute l'application. Un programmeur peut également définir des propriétés et des méthodes de leurs propres types personnalisés. Ils sont également connus sous le nom de constructeurs personnalisés. Par convention, tous les constructeurs JavaScript sont encadrés de phrases. C'est pour dire à la personne qui les utilise que cette fonction doit être invoquée en utilisant le nouveau mot-clé.
Comment les constructeurs fonctionnent-ils en JavaScript?
Avant d'examiner la syntaxe des constructeurs JavaScript, nous devons comprendre un concept très basique de JavaScript -
- La classe Object résume dans le contexte de cet article, chaque objet JavaScript est créé par le constructeur Object. Si la valeur fournie lors de la création de l'objet est nulle ou non définie, le constructeur d'objet créera un objet vide. Sinon, il créera un objet du type défini lors de la création de l'objet.
- Chaque fois qu'un nouvel objet du type classe est déclaré, le nouveau mot clé renvoie une référence à l'objet nouvellement créé. Cet objet est accessible à l'aide de ce mot-clé dans le constructeur pour initialiser les propriétés de l'objet.
- Bien que techniquement, JavaScript n'ait pas de classes, mais possède des constructeurs et des prototypes pour apporter des fonctionnalités similaires. Dans ECMAScript 2015, le concept de classes a été introduit en JavaScript. Il s'agissait simplement d'un ajout syntaxique à l'héritage basé sur un prototype existant et n'ajoutait aucune nouvelle fonctionnalité au langage.
Syntaxe et exemples de constructeur en Javascript
1) Méthode constructeur
Ci-dessous, la méthode constructeur. Cette méthode est utilisée dans le prototype de la classe.
Syntaxe
constructor((arguments))( … )
Code
class Employee(
constructor(id, name)(
this.id = id;
this.name = name;
))
var emp1 = new Employee(123, "John");
console.log(emp1.name);
Production:
2) Constructeur d'objet (constructeurs intégrés)
Le constructeur Object est appelé directement lorsqu'un objet de la classe Object est créé. Cela crée un objet de classe Object si des paramètres nuls ou non définis sont passés comme arguments. Sinon, un objet du type des paramètres donnés est créé.
Syntaxe
new Object(( value ))
Ou
new Array(( value ))
Ou
new Date(( value ))
Ou
new String(( value ))
Ou
new Number(( value ))
Ou
new Boolean(( value ))
Ou
new Function(( value ))
Ou
new Error(( value ))
Ou
new RegExp(( value ))
etc…
Code:
var name = new Object("John");
var age = new Object(28);
console.log("Name : "+name+" & Age : "+age);
Production:
3) Constructeurs de tableaux et de dates
De la même manière, les constructeurs Array et Date peuvent également être utilisés pour créer des objets de types respectifs.
Code:
var alphabets = new Array('Apple', 'Ball', 'Cat');
console.log(alphabets);
Production:
Code:
var now = new Date();
console.log(now);
Production:
Code:
var err = new Error("A user-defined error has occurred.");
console.log(err);
Production:
4) Constructeurs personnalisés
Nous pouvons également déclarer et définir nos propres constructeurs à utiliser tout au long de notre application. Voyons comment cela peut être réalisé.
Syntaxe
function FunctionName((arguments))( … )
Code
function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + book.name + '\' authored by ' + book.author + ' in the year ' + book.year + '.');
)
var book1 = new Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = new Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = new Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);
Production:
Importance du nouveau mot-clé
Vous vous demandez peut-être maintenant si je n'utilise pas le nouveau mot-clé? Puis-je omettre le nouveau mot clé? Eh bien, mon ami, non. L'utilisation du nouveau mot-clé est très essentielle.
- Les constructeurs JavaScript sont des fonctions régulières. Ils sont accompagnés d'un nouveau mot-clé pour indiquer au moteur JavaScript qu'un nouvel objet doit être construit avec les propriétés données. Sans le nouveau mot-clé, vous créeriez simplement de plus en plus d'objets globaux.
- Le nouveau mot-clé renvoie une référence à l'objet nouvellement créé. Nous stockons ensuite cette référence dans une variable. Sans le nouveau mot clé, l'objet est créé, mais aucune référence à l'objet n'est renvoyée. L'objet prend une portée globale. La seule référence à cet objet est via l'objet window.
- Confus? Comprenons mieux avec des exemples. Reprenons l'exemple ci-dessus. Nous avons supprimé le nouveau mot clé des déclarations d'objet. Le résultat a été une exception aux variables non définies. En effet, sans le nouveau mot clé, la référence des objets nouvellement créés n'a pas été retournée et n'a donc pas été stockée dans nos variables book1, book2 et book3. Lorsque nous avons essayé d'accéder à ces variables dans la méthode du livre d'affichage, l'exception est levée.
Code:
function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + book.name + '\' authored by ' + book.author + ' in the year ' + book.year + '.');
)
var book1 = Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);
Production:
Dans le même exemple, si nous modifions la méthode du livre d'affichage pour accéder aux objets via la portée de la fenêtre, nous obtenons une sortie inattendue.
Code:
function Book(name, author, year) (
this.name = name;
this.author = author;
this.year = year;
)
function displayBook(book)(
console.log('\'' + window.name + '\' authored by ' + window.author +' in the year ' + window.year + '.');
)
var book1 = Book('Java - The Complete Reference', 'Herbert Schildt', 2006);
var book2 = Book('Let Us C', 'Yashavant Kanetkar', 2002);
var book3 = Book('Data Structures', 'Seymour Lipschutz', 2005);
displayBook(book1);
displayBook(book2);
displayBook(book3);
Production:
Maintenant, comme exercice, faites un petit remue-méninges pour comprendre pourquoi nous obtenons cette sortie!
Constructeurs Scope-Safe
Les constructeurs intégrés en JavaScript sont des constructeurs à portée sûre. Ils ne créent pas de variables de portée globale lorsqu'ils sont appelés sans nouveau mot clé. Ainsi, ces objets peuvent être créés en toute sécurité avec ou sans nouveau mot-clé.
Code
function SampleFn(argument) (
// if "this" is not an instance of the constructor
// it means it was called without new
if (!(this instanceof SampleFn)) (
// call the constructor again with new
return new SampleFn(argument);
)
// The code to construct properties and methods
)
Oui, vous pouvez également créer des constructeurs définis par l'utilisateur à portée garantie. Continuez, créez un constructeur à portée sûre pour nos livres dans l'exemple ci-dessus.
Conclusion
Cet article a donné une démonstration approfondie des constructeurs JavaScript. Cela aide également à comprendre le fonctionnement de JavaScript. L'essentiel à retenir ici est que bien que techniquement il n'y ait pas de classes en JavaScript, les méthodes et les prototypes fournissent des fonctionnalités similaires à la disposition du développeur. Et oui, le nouveau mot-clé est important.
Articles recommandés
Cela a été un guide pour le constructeur en JavaScript. Ici, nous discutons de ses types et de ses méthodes importantes avec Comment créer un constructeur à portée sûre. Vous pouvez également parcourir nos articles pour en savoir plus-
- Que peut faire Javascript?
- Qu'est-ce que JavaScript?
- Comment installer JavaScript
- Destructeur en Java
- Fonctions Regex en Python (exemple)
- Exemples de ce mot-clé
- Fonctionnement et règles d'instanceOf en Java avec exemple