Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de ce que fait new() en Javascript

亚连
Libérer: 2018-05-28 14:25:21
original
1467 Les gens l'ont consulté

En JavaScript, comment fonctionne l'opérateur new ? Comment change-t-il la valeur de retour du constructeur et vers quoi cela pointe-t-il ? L'article suivant vous présentera des informations pertinentes sur ce que fait new() en Javascript. Les amis qui en ont besoin peuvent s'y référer.

Préface

Comme d'autres langages de haut niveau, JavaScript possède également l'opérateur new Nous savons que l'opérateur new est utilisé pour instancier un. classe, allouant ainsi un objet instance en mémoire. Mais en JavaScript, tout est un objet. Pourquoi devons-nous utiliser new pour générer des objets ? Cet article vous amènera à explorer le mystère du new en javascript...

Pour créer une nouvelle instance de Person, vous devez utiliser l'opérateur new.

Appeler le constructeur de cette manière passera en fait par les 4 étapes suivantes :

(1) Créer un nouvel objet

(2) Attribuez la portée du constructeur au nouvel objet (pour que cela pointe vers le nouvel objet)

(3) Exécutez le code dans le constructeur (pour ce nouvel objet) ; L'objet ajoute des attributs);

(4) Renvoie un nouvel objet.

nouvel opérateur

Après l'introduction des concepts de base ci-dessus et l'ajout du nouvel opérateur, nous pouvons compléter l'orientation traditionnelle de la classe d'objet + une nouvelle méthode crée des objets. En JavaScript, nous appelons cette méthode pseudoclassique.

Sur la base de l'exemple ci-dessus, nous exécutons le code suivant

var obj = new Base();
Copier après la connexion

Quel est le résultat de ce code, nous sont dans le moteur Javascript Le modèle objet vu dans est :


Que fait exactement le nouvel opérateur En fait, c'est très simple, il n'en fait que trois ? des choses.

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
Copier après la connexion

Dans la première ligne, on crée un objet obj vide

Dans la deuxième ligne, on crée cet objet vide object Le membre __proto__ pointe vers l'objet membre prototype de l'objet fonction de base

Dans la troisième ligne, nous remplaçons le pointeur this de l'objet fonction de base par obj, puis appelons la fonction de base, nous donnons donc l'objet obj Une variable membre id est attribuée et la valeur de cette variable membre est "base", en ce qui concerne l'utilisation de la fonction d'appel.

Quel sera l'effet si nous ajoutons quelques fonctions à l'objet Base.prototype ?

Par exemple, le code est le suivant :

Base.prototype.toString = function() {
 return this.id;
}
Copier après la connexion

Puis quand on utilise new pour créer un nouvel objet A ce moment, selon les caractéristiques de __proto__, la méthode toString est également accessible en tant que méthode d'un nouvel objet. On voit donc :

Dans le constructeur, nous définissons les variables membres de la 'classe' (par exemple : id dans l'exemple), et dans le prototype de l'objet constructeur, nous définissons les méthodes publiques de la « classe ». Par conséquent, les effets des classes et de l'instanciation de classe sont simulés via des objets de fonction, les membres __proto__ et prototypes uniques de Javascript, ainsi que le nouvel opérateur.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée des composants de vue et réutilisation

Vue utilise vue-i18n pour réaliser le code d'implémentation de l'internationalisation

Méthode de chargement infini vue-infinite-loading dans Vue

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