Ausführliche Erläuterung der praktischen Registerkarte für die neue Klassensyntax von JavaScript ES6

Der folgende Editor bietet Ihnen eine Reihe von js es6-Tutorials – neue praktische Registerkarte zur Klassensyntax (ausführliche Erklärung). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Tatsächlich sind viele der objektorientierten Prinzipien und Mechanismen von es6 immer noch die von ES5, aber die Syntax wurde in eine objektorientierte Syntax geändert, die der in ähnelt alte Back-End-Sprachen von PHP und Java.

1. Verwenden Sie es6, um eine Basisklasse zu kapseln

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

Ist es PHP und Java sehr ähnlich? Tatsächlich ist die Essenz die Prototypenkette, die wir erkennen werden, wenn wir nach unten schauen

Lassen Sie uns zunächst darüber sprechen die grammatikalischen Regeln:

Person in der Klasse Person ist der Klassenname, der angepasst werden kann

Konstruktor ist der Konstruktor Dies ist ein Schlüsselwort, wenn ein Objekt instanziiert wird aufgerufen

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

Zeilen 1 und 2 Zeileninstanziierung und Aufrufmethoden sind immer noch die gleichen wie es5

Zeilen 4 und 5 bestimmen, ob das Objekt ein ist Das Ergebnis ist das gleiche wie bei es5. Ist es im Wesentlichen eine Funktion? Klasse Person ist eine Funktion.

Zeile 8 zeigt, dass die Funktion sayName tatsächlich zum Prototyp von Person hinzugefügt wurde. Zeile 9 von

auf dem Objekt überprüft weiterhin die Prototypkettenfunktion von es5: Der implizite Prototyp des Objekts zeigt auf das Prototypobjekt des Konstruktors. Zeile 10 von

überprüft, ob das oP-Objekt die sayName-Methode über die Prototypkette findet wird als syntaktischer Zucker bezeichnet und ist im Wesentlichen eine Prototypenkette

2. Verwenden Sie die grundlegende Klassenverwendung, um eine Additionsoperation zu kapseln

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

CSS-Code:

HTML-Code:

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

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

  .active {
   background: yellow;
  }

Javascript-Code:

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

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der praktischen Registerkarte für die neue Klassensyntax von JavaScript ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!