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

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() );

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( '必须用new实例化' );
   }
  }
  // Person( 'ghostwu' ); //报错
  console.log( new Person( 'ghostwu' ).userName ); //ghostwu

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( '必须用new实例化' );
   }
  }
  
  // Person( 'ghostwu' ); //报错
  console.log( new Person( 'ghostwu' ).userName ); //ghostwu

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

  // Person( 'ghostwu' ); //报错
  console.log( new Person( 'ghostwu' ).userName ); //ghostwu

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!