JavaScript ES6の新クラス構文実践タブを詳しく解説

以下のエディターは、一連の js es6 チュートリアル - 新しいクラス構文の実践タブ (詳細な説明) を提供します。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう

実際、es6 のオブジェクト指向の原則とメカニズムの多くは ES5 のもののままですが、構文は古いバックエンド言語と同様のオブジェクト指向構文に変更されていますphp と java.

1. es6 を使用して基本クラスをカプセル化します

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

実際、本質はまだプロトタイプです?下を見ればわかります

まず、文法規則について話しましょう:

class person in はカスタマイズ可能なクラス名です

constructor はコンストラクターであり、これはキーワードです。オブジェクトがインスタンス化されると、このコンストラクターが自動的に呼び出されます

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

1 行目と 2 行目のインスタンス 変換と呼び出しメソッドは es5 と同じです。 4 行目と 5 行目は、オブジェクトがクラス (person) のインスタンスであるかどうかを決定します。 ) と Object の結果は es5 と同じです。この時点で、パーソン クラスが本質的に関数であるかどうかを検討します

。 8 行目で、sayName 関数が実際に person のプロトタイプ オブジェクトに追加されていることを確認してください

9 行目では、引き続き es5 プロトタイプ チェーンを検証しています。 特徴: オブジェクトの暗黙のプロトタイプが、コンストラクターのプロトタイプ オブジェクトを指しています。

10 行目では、 oP オブジェクトは、プロトタイプ チェーンを通じて SayName メソッドを見つけます

この種の構文は構文シュガーと呼ばれ、その本質は依然としてプロトタイプ チェーンです

2. 加算演算をカプセル化するには、基本的なクラスの使用法を使用します

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. 基本クラス構文を使用してクラシック タブをカプセル化します

css コード:

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

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

  .active {
   background: yellow;
  }

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>

javascript コード:

りー

以上がJavaScript ES6の新クラス構文実践タブを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。