JavaScript ES6の新クラス構文実践タブを詳しく解説-jsチュートリアル-php.cn

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

巴扎黑

リリース： 2017-09-04 10:34:11

オリジナル

1592 人が閲覧しました

以下のエディターは、一連の 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( &#39;ghostwu&#39; );
  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( &#39;sayName&#39; 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 サイトの他の関連記事を参照してください。