ES6 classコマンド浅い知識

クラスのES6は、それはテンプレートオブジェクトなどの伝統的な書き言葉、クラス（クラス）の導入コンセプトに、より近い提供し、プロトタイプベースの継承のシンタックスシュガーです。クラスを定義するクラスのキーワードが、仕事をしていることで、クラスでは、ES5はまた、唯一のクラスを介して行うことができます、私たちは私たちの仕事を楽にすることができます。

次のように私たちのJavaScript言語では、伝統的な方法は、コンストラクタによってオブジェクトのインスタンスを生成します。

機能の点（x、y）{
   この .X =のX。
  この .Y = Y。
} 

Point.prototype.toString = 関数（）{
   リターン '（' + この .X + '' + この .Y + '）' 。
}。

VARの P = 新しいポイント（1、2）;

しかし、我々は、この次のコードに上記のコマンドを完了した後ES6classとき

点{クラス
  コンストラクタ（X、Y）{ 
    この .X = X;
     この .Y = Y; 
  } 

  のtoString（）{ 
    リターン '（' + この .X + '' + この .Y + '）; 
  } 
} 

// ES5文言に相当

ポイント。= {プロトタイプ
　　コンストラクタ（）{}、
　　のtoString（）{} 

} 
//注意：クラスで定義されたすべてのメソッドがクラスであるprototype上記の属性。

新しいclassオブジェクト指向プログラミングの構文のような文言明確プロトタイプオブジェクトを、作成する文言。また、関数Statementクラスは、関数宣言を強化しません。

まず、クラスを作成し、インスタンス化

constructorデフォルトのクラスメソッドである、でnewコマンドオブジェクトのインスタンスを生成する、方法が自動的に呼び出されます。クラスが存在しなければならないconstructor明示的な定義は、空の場合、メソッドconstructorの方法は、デフォルトでは追加されません。

スター{クラス
            コンストラクタ（のuname、年齢）{ 
                この .uname =のuname; // this.unameポイントが作成されたインスタンス
                この .age = ;年齢
　　　　　　　　　　this.btn = document.querySelector（]ボタンを'）; 
　　　　　　　　　　this.btn.onclick = this.say; 
　　　　　　　　//   this.btn.onclick = this.say（）;の代わりに、すぐに呼び出します



            } 
　　　　　　　セイ（）{ 
　　　　　　　　　　　　にconsole.log（this.uname）; //この時点未定義BTNからである。
　　　　　　　　
　　　　　　　　　　} 
        } 
        
        Varの   LDH = 新しい新しいスター（ 'アンディ'、18である）; 
        にconsole.log（LDH）。

それはそれを注目に値します。

1.、我々はまだ大文字で定義するために使用されるクラス名classキーワードによってクラスを作成し
、あなたがそれに渡されたパラメータを受け入れることができ、コンストラクタ関数内の2クラスを、そしてオブジェクトのインスタンスを返し
、新世代のインスタンス限り3.コンストラクタ関数をあなたは自動的に呼び出します書いていない場合は自動的に呼び出し、この関数、
クラス、バック括弧なしのクラス名を作成する4.;、インスタンスを生成するクラスの後ろに括弧を追加し、コンストラクタは、機能を追加する必要はありません。

可変クラスが改善されない、それはクラスオブジェクトによってインスタンス化することができ、クラスを定義する必要があります。

6.これを使用するために添加されなければならないクラスの共通プロパティとメソッド

第二に、総クラスのメソッドを追加します

クラスポリゴン{ 
  コンストラクタ（高さ、幅）{ 
    this.height =高; 
    this.width =幅; 
  } 
  
  面積を得る（）{ 
    this.calcArea（）を返します。
  } 

  石灰沈着（）{ 
    this.height * this.widthを返します。
  } 
} 

CONST平方=新たなポリゴン（20、20）。
constのSSS =新しいポリゴン（10250）; 
console.log（square._proto_ === sss._proto_）。//真
にconsole.log（square.area）。// 400 
にconsole.log（sss.area）。// 2500

それは注目に値します。

1.私たちは、関数を記述するために、クラス内のすべての機能を必要としません

2.カンマの間でより多くの機能を追加する必要が

3. 自体（すなわち、このオブジェクト）で定義され、又はプロトタイプディスプレイ上に定義されない限り、属性インスタンス。

第三に、クラスの継承

プロトタイプに対応するクラスの例は、クラスで定義されているすべての方法は、インスタンスが継承されます。達成広がります。

文の基本フォーマット：

クラス父{ 
             // ... 
         } 
 クラス子は父を{拡張
              
          }

次の簡単な例をよりよく理解した上で

//ケース        
クラスの父{ 
             コンストラクタ（）{ 
                 
             } 
             と言う（）{ 
                 リターン'I父'; 
             } 
        } 
         クラス拡張父息子{ 
            言う（）{ 
　　　　　　　　　　はconsole.log（ '私は息子午前'）;　　
　　　　　　　　　　　　} 
         } 
        VARの息子= 新しい新しい息子（）; 
        son.say（）; //私は息子です




//ケース2つのsuperキーワードがアクセスすると、関数は、親オブジェクトを呼び出し、あなたを介して親クラスのコンストラクタを呼び出すことができます、あなたは親クラスの正常な機能を呼び出すことができます

　　　父親{クラス
　　　　コンストラクタ（X、Y）{
　　　　; this.x = Xに
　　　　Y =からthis.y
　　　　}
　　　　SUM（）{
　　　　（+からthis.x this.yにおける）はconsole.log;
　　　　}
　　　　}
　　　クラス延び父息子{
　　　　コンストラクタ（X、 Y）{
　　　　スーパー（X、Y）; //スーパークラスのコンストラクタを呼び出す
　　　　}
　　　　}
　　　　VAR新しい新しいソン=ソン（1,2）;
　　　　son.sum（）。

//ケースIIIサブクラスは、方法はまた、その展開、親クラスのメソッドを継承する

クラス父{ 
　　　　コンストラクタ（X、Y）{ 
　　　　; this.x = Xの
　　　　this.y Yから= 
　　　　} 
　　　　SUM（）{ 
　　　　this.xではconsole.logを（ +からthis.y）; 
　　　　} 
　　　　} 
　　　クラス父親息子{延び
　　　　コンストラクタ（X、Y）{ 
　　　　スーパー（X、Y）; //スーパークラスのコンストラクタを呼び出す
　　　　この前に呼び出されなければならない//スーパーサブクラス
　　　　= this.xにX; 
　　　　; Y =からthis.y 
　　　　} 
　　　　減算（）{ 
　　　　　　（this.xで-からthis.y）にconsole.log; 
　　　　} 
　　　} 
　　　　VAR新しい新しい子が=ソン（5,2）; 
　　　　son.subtract（）; 
　　　　son.sum（） ; 
コンストラクタサブクラスに//息子（5,2）最初の引数、その第1の減算器を取得し、その後、親クラス、メソッドの継承の超構造を通過しました

注意：

1.サブクラスはコンストラクタメソッドでスーパーメソッドを呼び出す必要があります。新しいインスタンスを作成するときにそれ以外の場合はエラーになります。

コンストラクタ2.スーパーサブクラスは、これは目の前に配置する必要があります

第四に、この内部クラスは、問題を指し

作成されたオブジェクトのインスタンスにこの点の内部コンストラクタにおいて

2.発信者を指し、この方法の機能

次のことを確認してください

そのVAR;
VAR that2;
クラススター{
　　コンストラクタ（のuname）{
　　　　その=この;
　　　　
　　}
　　ダンス（）{
that2 =この;
　　　　console.log（この）;
　　}
}
VARのZXY =新しいスター（ '张学友'）。
console.log（その===のZXY）; //真
zxy.dance（）;
console.log（that2 ===のZXY）; //真

おすすめ