Maison > interface Web > js tutoriel > Comment fonctionne l'opérateur « nouveau » en JavaScript en interne et quelles sont les étapes clés impliquées dans la création d'objets à l'aide de cet opérateur ?

Comment fonctionne l'opérateur « nouveau » en JavaScript en interne et quelles sont les étapes clés impliquées dans la création d'objets à l'aide de cet opérateur ?

DDD
Libérer: 2024-10-28 16:49:30
original
637 Les gens l'ont consulté

How does the

Comprendre le fonctionnement interne du « nouvel » opérateur en JavaScript

Considéré comme l'un des aspects énigmatiques de JavaScript, le « nouvel » opérateur a fasciné les développeurs pour son rôle dans la création d'objets. Cet article explore le mécanisme complexe du « nouvel » opérateur, révélant son essence à travers une implémentation alternative.

La fonction derrière le « nouvel » opérateur

Le « nouveau » L’opérateur appelle en interne la méthode [[Construct]] de la fonction qui la suit. Cette méthode joue un rôle central dans le processus de création d'objet :

  1. Initialisation de l'objet :

    • Il initialise un objet JavaScript natif et vierge. .
  2. Lien de prototype :

    • Il établit une connexion entre la propriété interne [[Prototype]] de l'objet nouvellement créé et la propriété prototype de la fonction.
    • Si la propriété prototype de la fonction n'est pas un objet, elle opte plutôt pour Object.prototype.
  3. Invocation de fonction  :

    • La fonction associée à l'opérateur "nouveau" est exécutée, en utilisant l'objet nouvellement créé comme valeur "ceci".

L'énigme de la valeur de retour

Le résultat du "nouvel" opérateur dépend de la valeur de retour de la fonction invoquée :

  • Retour primitif Valeur : Si la fonction renvoie une valeur primitive (par exemple, Number, String), l'objet créé en interne est renvoyé.
  • Object Return Value : Si la fonction renvoie un objet, l'objet interne est supprimé et l'objet renvoyé est prioritaire.

Une implémentation alternative

Pour comprendre le fonctionnement interne du "nouvel" opérateur, commençons explorer une implémentation alternative qui imite son comportement :

<code class="javascript">function NEW(f) {
  var obj, ret, proto;

  proto = Object(f.prototype) === f.prototype ? f.prototype : Object.prototype;
  obj = Object.create(proto);
  ret = f.apply(obj, Array.prototype.slice.call(arguments, 1));

  if (Object(ret) === ret) {
    return ret;
  }
  return obj;
}</code>
Copier après la connexion

Exemple d'utilisation :

<code class="javascript">function Foo (arg) {
  this.prop = arg;
}

Foo.prototype.inherited = 'baz';

var obj = NEW(Foo, 'bar');

console.log(obj.prop);          // 'bar'
console.log(obj.inherited);     // 'baz'
console.log(obj instanceof Foo); // true</code>
Copier après la connexion

Conclusion

Par Grâce à cette implémentation alternative, nous avons acquis une compréhension globale du rôle vital du « nouvel » opérateur dans la création d'objets et l'établissement de la chaîne de prototypes. Son mécanisme complexe, une fois compris, permet aux développeurs d'exploiter la puissance des capacités de programmation orientée objet de JavaScript.

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!

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