Maison >interface Web >js tutoriel >Qu'est-ce qu'un constructeur en Javascript ? Explication détaillée de la façon d'utiliser les instances de constructeur

Qu'est-ce qu'un constructeur en Javascript ? Explication détaillée de la façon d'utiliser les instances de constructeur

伊谢尔伦
伊谢尔伦original
2017-07-25 13:20:392209parcourir

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.

// "Benjamin" is a constructor
var benjamin = new Benjamin("zuojj", "male");

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

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
//Outputs: Benjamin{sex: "male",username: "zuojj"}
console.log(benjamin);

Comme on peut 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 à :

benjamin = {
 "username": "zuojj",
 "sex": "male"
}

Pourquoi utiliser le constructeur

Pourquoi utiliser le constructeur, il y a plusieurs raisons :
1 . Utiliser des constructeurs signifie que tous ces objets peuvent être créés en utilisant la même structure de base
2. Utiliser des constructeurs signifie que l'objet "benjamin" est clairement marqué comme une instance de la fonction "Benjamin"

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = {
 "username": "zuojj",
 "sex": "male"
}
//Outputs: true
console.log(benjamin instanceof Benjamin);
//Outputs: false
console.log(ben instanceof Benjamin);
3. Utiliser des constructeurs signifie que nous pouvons définir des méthodes publiques sur le prototype pour le partage par plusieurs instances

function Benjamin(username, sex) {
    this.username = username;
    this.sex = sex;
}
Benjamin.prototype.getName = function() {
 return this.username;
}
var benjamin = new Benjamin("zuojj", "male");
var ben = new Benjamin("lemon", "female");
//Outputs: zuojj
console.log(benjamin.getName());
//Outputs: lemon
console.log(ben.getName());

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 aura un grand impact sur cet objet. Si le mot-clé new n'est pas utilisé, cet objet pointera vers l'objet global (fenêtre dans. navigateur et global dans le 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 cet objet, c'est-à-dire un objet nouvellement créé, sinon cela affectera le résultat renvoyé, mais seulement si elle renvoie un objet. 🎜>

Ce que nous devons noter est :

a) new Bar() renvoie un objet nouvellement créé, pas la valeur littérale 2 du nombre. Donc new Bar().constructor === Bar, mais si un objet numérique est renvoyé, le résultat sera différent ;
function Bar() {
    return 2;
}
var bar = new Bar();
//返回新创建的对象
//Outputs: Bar {} 
console.log(bar);
function Test() {
    this.value = 2;
    return {
        foo: 1
    };
}
var test = new Test();
//返回的对象
//Outputs: Object {foo: 1} 
console.log(test);
b) Le new Test() obtenu ici est l'objet renvoyé par la fonction, plutôt que new through le nouveau mot clé L'objet créé ressemble à ceci :


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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