Maison > interface Web > js tutoriel > JavaScript transforme la syntaxe de la classe es6 en fonction de l'attribut new.target et es5

JavaScript transforme la syntaxe de la classe es6 en fonction de l'attribut new.target et es5

巴扎黑
Libérer: 2017-09-04 10:31:19
original
1299 Les gens l'ont consulté

L'éditeur suivant vous proposera une série de didacticiels js es6 - transformant la syntaxe de la classe es6 en fonction de l'attribut new.target et es5. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil.

Si le constructeur d'es5 n'est pas appelé avec new et que cela pointe vers la fenêtre, les attributs de l'objet n'obtiendront pas la valeur. Donc dans le passé, nous devions juger. this dans le constructeur. Si le mot-clé new est utilisé pour garantir que les appels de fonction ordinaires peuvent copier des objets dans les propriétés


function Person( uName ){
  if ( this instanceof Person ) {
   this.userName = uName;
  }else {
   return new Person( uName );
  }
 }
 Person.prototype.showUserName = function(){
  return this.userName;
 }
 console.log( Person( 'ghostwu' ).showUserName() );
 console.log( new Person( 'ghostwu' ).showUserName() );
Copier après la connexion

Dans es6, afin d'identifier les appels de fonction, s'il faut utiliser Avec le nouveau mot-clé, un nouvel attribut new.target:

1 est introduit. Si la fonction utilise new, alors new.target est le constructeur

Si la fonction le fait. ne pas utiliser new, Alors new.target n'est pas défini

3 Dans la méthode de classe es6, lors de l'appel, utilisez new et new.target pointe vers la classe elle-même. Si new n'est pas utilisé, elle est indéfinie<🎜. >


function Person( uName ){
   if( new.target !== undefined ){
    this.userName = uName;
   }else {
    throw new Error( &#39;必须用new实例化&#39; );
   }
  }
  // Person( &#39;ghostwu&#39; ); //报错
  console.log( new Person( &#39;ghostwu&#39; ).userName ); //ghostwu
Copier après la connexion
Après avoir utilisé new, new.target est le constructeur de Person, donc l'exemple ci-dessus peut également être écrit de la manière suivante :


function Person( uName ){
   if ( new.target === Person ) {
    this.userName = uName;
   }else {
    throw new Error( &#39;必须用new实例化&#39; );
   }
  }
  
  // Person( &#39;ghostwu&#39; ); //报错
  console.log( new Person( &#39;ghostwu&#39; ).userName ); //ghostwu
Copier après la connexion


class Person{
   constructor( uName ){
    if ( new.target === Person ) {
     this.userName = uName;
    }else {
     throw new Error( &#39;必须要用new关键字&#39; );
    }
   }   
  }

  // Person( &#39;ghostwu&#39; ); //报错
  console.log( new Person( &#39;ghostwu&#39; ).userName ); //ghostwu
Copier après la connexion
Dans l'exemple ci-dessus, lors de l'utilisation de new, new.target est égal à Person

Après avoir maîtrisé new.target, Ensuite, nous utilisons la syntaxe es5 pour réécrire la classe es6 ci-dessus Grammaire


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