Maison  >  Article  >  interface Web  >  Explication détaillée des connaissances Javascript constructor_basic

Explication détaillée des connaissances Javascript constructor_basic

WBOY
WBOYoriginal
2016-05-16 16:33:071410parcourir

1. Qu'est-ce qu'un constructeur

Dans certains langages orientés objet, tels que Java, C et PHP, les constructeurs sont très courants. En Javascript, le constructeur est d'abord une fonction ordinaire, qui peut être appelée à l'aide de l'opérateur new et génère un objet d'un type spécial.

Copier le code Le code est le suivant :

// "Benjamin" est un constructeur
var benjamin = new Benjamin("zuojj", "male");

Dans l'exemple ci-dessus, benjamin est un objet Benjamin, alors comment est-il instancié ?

Copier le code Le code est le suivant :

function Benjamin(nom d'utilisateur, sexe) {
This.username = nom d'utilisateur;
This.sex = sexe;
>
var benjamin = new Benjamin("zuojj", "male");
//Sorties : Benjamin{sexe : "male", nom d'utilisateur : "zuojj">
console.log(benjamin);

Comme nous pouvons le voir, le constructeur "Benjamin" reçoit simplement les paramètres transmis et les affecte à l'objet this. En effet, lorsque le constructeur est appelé par l'opérateur new, l'objet this du constructeur se voit attribuer l'objet renvoyé par la nouvelle opération.
Cela signifie que le code ci-dessus est équivalent à :

Copier le code Le code est le suivant :

benjamin = {
"nom d'utilisateur": "zuojj",
"sexe": "masculin"
>

2. Pourquoi utiliser le constructeur

Il y a plusieurs raisons pour lesquelles les constructeurs sont utilisés :
1. Utiliser des constructeurs signifie que tous ces objets peuvent être créés en utilisant la même structure de base
2. Utiliser un constructeur signifie que l'objet "benjamin" est explicitement marqué comme une instance de la fonction "Benjamin"

Copier le code Le code est le suivant :

function Benjamin(nom d'utilisateur, sexe) {
This.username = nom d'utilisateur;
This.sex = sexe;
>
var benjamin = new Benjamin("zuojj", "male");
var ben = {
"nom d'utilisateur": "zuojj",
"sexe": "masculin"
>
//Sorties : vrai
console.log (instance benjamin de Benjamin);
//Sorties : false
console.log(ben instanceof Benjamin);

3. Utiliser des constructeurs signifie que nous pouvons définir des méthodes publiques sur le prototype pour un partage par plusieurs instances

Copier le code Le code est le suivant :

function Benjamin(nom d'utilisateur, sexe) {
This.username = nom d'utilisateur;
This.sex = sexe;
>
Benjamin.prototype.getName = function() {
renvoie this.username;
>
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("citron", "femelle");
//Sorties : zuojj
console.log(benjamin.getName());
//Sorties : citron
console.log(ben.getName());

3. Précautions

1.nouveau mot-clé
N'oubliez pas d'utiliser le mot-clé new lors de l'instanciation du constructeur. L'utilisation ou non du mot-clé new a un grand impact sur l'objet this. Sans le mot-clé new, l'objet this pointera vers l'objet global (fenêtre dans le navigateur et global dans). nœud). Par conséquent, lors de la définition d’un constructeur, il est recommandé que la première lettre du nom de la fonction soit en majuscule.
2. Si la fonction appelée n'a pas d'expression de retour explicite, elle renverra implicitement l'objet this - c'est-à-dire l'objet nouvellement créé. Sinon, cela affectera le résultat renvoyé, mais seulement s'il renvoie un objet

.

Copier le code Le code est le suivant :

fonction Barre() {
Retour 2 ;
>
var barre = nouvelle barre();
//Renvoie l'objet nouvellement créé
//Sorties : Barre {}
console.log(bar);
fonction Test() {
Cette.valeur = 2;
Retour {
foo : 1
};
>
var test = nouveau Test();
//Objet retourné
//Sorties : Objet {foo: 1}
console.log(test);

Ce à quoi nous devons prêter attention est :
a) new Bar() renvoie l'objet nouvellement créé, pas la valeur littérale du nombre 2. Donc new Bar().constructor === Bar, mais si un objet numérique est renvoyé, le résultat est différent ;
b) Le new Test() obtenu ici est l'objet renvoyé par la fonction, et non l'objet nouvellement créé via le new mot-clé, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

fonction Barre() {
Retour 2 ;
>
var barre = nouvelle barre();
fonction BarN() {
renvoyer un nouveau numéro (2);
>
var grange = new BarN();
//Sorties : vrai
console.log(bar.constructor === Bar);
//Sorties : Nombre {}
console.log(grange);
//Sorties : false
console.log(barn.constructor === BarN);
//Sorties : vrai
console.log(barn.constructor === Nombre);
/*--------------------------------------------- */
fonction Test() {
Cette.valeur = 2;
Retour {
foo : 1
};
>
var test = nouveau Test();
//Sorties : non définies
console.log(test.value);
//Sorties : 1
console.log(test.foo);

Ce qui précède est un résumé de la fonction constructeur. J'espère que cela sera utile aux débutants. S'il y a quelque chose d'inapproprié dans l'article, j'espère que vous le critiquerez et le corrigerez.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn