Maison > interface Web > js tutoriel > Une brève discussion sur les constructeurs JavaScript

Une brève discussion sur les constructeurs JavaScript

PHPz
Libérer: 2017-04-04 10:26:06
original
1698 Les gens l'ont consulté

Quand il s'agit de "ConstructionFonction", la plupart des gens penseront au concept de classes Java JavaScript a également des constructeurs et sa syntaxe d'utilisation. est similaire à celle de Java ou La syntaxe de création d'objets est similaire dans d'autres langages basés sur les classes.

Le constructeur JavaScript est un type spécial de fonction, caractérisé par :

  • Utilisez <a href="http://www.php.cn%20/wiki%20/165.html" target="_blank">nouveau<code><a href="http://www.php.cn/wiki/165.html" target="_blank">new</a>Fonction d'appel de mot clé

  • La première lettre de la fonction est en majuscule

Lors des entretiens, je pose souvent deux questions sur les constructeurs :

  1. Est-ce que la première lettre du constructeur doit être en majuscule ?

  2. Y aura-t-il une erreur si j'exécute le constructeur directement sans utiliser le mot-clé new ? Si aucune erreur ne se produit, quelle est la différence entre appeler le constructeur avec new et sans new ?

En gros, 100 % des étudiants peuvent répondre correctement à la question 1 (majuscules et minuscules), et 20 % des étudiants répondront incorrectement à la question 2, en particulier à la deuxième question.

Alors, voyons ce que fait l'new opérateur  ?

1. Utilisez l'opérateur new pour appeler la fonction

Exemple :

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"
Copier après la connexion

Utilisez new pour appeler le constructeur, les modifications suivantes se produiront à l'intérieur de la fonction. :

Utiliser un pseudo-programme pour démontrer les changements ci-dessus :

function Person(name){
  // 创建this变量,指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this对象
  return this;
}
Copier après la connexion
On peut voir que la plus grande caractéristique de l'utilisation de

pour appeler le constructeur est que l'objet new pointe vers l'objet this généré par le constructeur, donc renverra la person1.say() chaîne  : "Je suis Nicole".

小贴士

如果指定了返回对象,那么,"this"对象可能被丢失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"
Copier après la connexion
2. Appelez la fonction directement

Si la fonction est appelée directement, alors l'objet

pointe vers this, et aucun objet ne sera renvoyé par défaut (sauf si explicitement déclaré pour renvoyer une valeur). window

Prenons la fonction

comme exemple et appelons directement la fonction Person : Person

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole
Copier après la connexion
On voit que le résultat de l'appel direct du constructeur n'est pas ce que nous vouloir.

3. Résumé

Afin d'éviter d'appeler le constructeur parce que vous oubliez d'utiliser le mot-clé

, vous pouvez ajouter des conditions de jugement pour forcer l'appel au mot-clé new. Le code est le suivant : new

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa
Copier après la connexion
 

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal