Explication détaillée du nouvel onglet pratique de syntaxe de classe de JavaScript ES6

L'éditeur suivant vous proposera une série de tutoriels js es6 - nouvel onglet pratique de syntaxe de classe (explication détaillée). 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 pour y jeter un œil

En fait, de nombreux principes et mécanismes orientés objet d'es6 sont toujours ceux d'ES5, mais la syntaxe est modifiée en une syntaxe orientée objet similaire à celle de l'ancien langages back-end​​de php et java.

1. Utilisez es6 pour encapsuler une classe de base

class Person{
   constructor( uName ){
    this.userName = uName;
   }
   sayName(){
    return this.userName;
   }
  }

Est-ce très similaire à PHP et Java ? Classe, en fait, l'essence est la chaîne de prototypes, nous le saurons en regardant en bas

Tout d'abord, parlons du règles grammaticales :

Personne dans la classe Personne est le nom de la classe, qui peut être personnalisé

Constructeur est le constructeur Il s'agit d'un mot-clé Lorsqu'un objet est instancié, ce constructeur sera automatiquement appelé.

let oP = new Person( 'ghostwu' );
  console.log( oP.sayName() ); //ghostwu

  console.log( oP instanceof Person ); //true
  console.log( oP instanceof Object ); //true
 
  console.log( typeof Person ); //function
  console.log( typeof Person.prototype.sayName ); //function
  console.log( oP.__proto__ === Person.prototype ); //true
  console.log( 'sayName' in oP ); //true 
  console.log( Person.prototype );

Lignes 1 et 2 Les méthodes d'instanciation et d'appel de ligne sont toujours les mêmes que celles d'es5

Les lignes 4 et 5 déterminent si l'objet est une instance de classe (Person) et Object. Le résultat est le même que es5. À ce moment-là, nous penserons certainement à Person. Est-ce essentiellement une fonction

La ligne 7 vérifie complètement notre idée. Person est une fonction.

La ligne 8 peut voir que la fonction sayName est en fait ajoutée au prototype de Person. La ligne 9 de

sur l'objet vérifie toujours la fonctionnalité de chaîne de prototype d'es5 : Le prototype implicite de l'objet pointe vers l'objet prototype du constructeur. La ligne 10 de

vérifie que l'objet oP trouve la méthode sayName via la chaîne de prototypes

Ce type de syntaxe est. appelé sucre syntaxique, et son essence est une chaîne prototype

2 Utiliser l'utilisation de classe de base pour encapsuler une opération d'addition

<.>

class Operator{
   constructor( n1 = 1, n2 = 2 ){
    this.num1 = n1;
    this.num2 = n2;
   }
   add( n1 = 10, n2 = 20 ){
    let num1 = n1 || this.num1, num2 = n2 || this.num2;
    return num1 + num2;
   }
  }
  var oper = new Operator();
  console.log( oper.add( 100, 200 ) );

3. Utiliser la syntaxe de classe de base pour encapsuler les onglets classiques

Code CSS :

#tab p {
   width: 200px;
   height: 200px;
   border: 1px solid #000;
   display: none;
  }

  #tab p:nth-of-type(1) {
   display: block;
  }

  .active {
   background: yellow;
  }

Code HTML :

<p id="tab">
  <input type="button" value="点我1" data-target="#p1" class="active">
  <input type="button" value="点我2" data-target="#p2">
  <input type="button" value="点我3" data-target="#p3">
  <input type="button" value="点我4" data-target="#p4">
  <p id="p1">1</p>
  <p id="p2">2</p>
  <p id="p3">3</p>
  <p id="p4">4</p>
 </p>

Code 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!