クラス内ES6は、オブジェクトと継承実現を作成します

ES6で1クラス

ES6は言葉遣いがより多くのオブジェクトのプロトタイプオブジェクト指向言語の書き込みのようなものですので、こと、クラスの概念(クラス)を提案しました。ES6はデフォルトコンストラクタメソッドとカスタムメソッドを持つ、オブジェクトクラスで定義され、クラスに含まれるメソッドを列挙することはできません。

        class Point{
            constructor(){
            this.x=x;
            this.y=y;
            }
        toString(){
            return this.x+this.y;
            }
        }

注:コンストラクタコンストラクタメソッドES5に対応し、クラスメソッドを作成すると、ファンクションキーの使用を必要としない、方法は、カンマで区切られた必要としません。

ES5組合せモードとコンストラクタのプロトタイプモデルを使用しては、モデルコンストラクタが定義された属性オブジェクトのインスタンスを定義するために使用される、プロトタイプモデルは、コンストラクタにメモリを節約するために、共有属性を共有する方法を定義するために使用され、サポートパスパラメータれます。

        function Point (x,y){
            this.x=x;
        this.y=y;
        }
        Point.prototype.toString= function(){
            return this.x+this.y;
        }
        

2 ES5およびES6は、オブジェクトのインスタンスを作成し、比較します

1)コンストラクタ人人ES5およびプロトタイプ・オブジェクト・インスタンスとPERSON1、PERSON2関係:コンストラクタプロトタイプ属性と属性インスタンス__proto__点プロトタイプオブジェクト、コンストラクタへのプロトタイプオブジェクト点のコンストラクタ特性。
画像のキャプション

それは実際に呼び出さプロトタイプのメソッドであり、クラスのメソッドをプロトタイプクラス(プロトタイプ)で定義され、上記のクラスのインスタンスでメソッドを呼び出す:プロトタイプコンストラクタ(プロトタイプ)プロパティは、依然として、この中ES6に存在し、ES5。

    //实例的constructor方法就是类的原型(prototype)的constructor方法
    class B{
      constructor(){}
    }
    let b = new B();
    console.log(b.constructor === B.prototype.constructor);//true

クラス2)ES6は、別の方法コンストラクタ(コンストラクタとES5等価コンストラクタメソッドではない)として見ることができる:クラスはES5、関数型、プロパティプロトタイプオブジェクトコンストラクタクラス自体と向けクラスであります同じ。

        class Point{
          // ...
        }
        console.log(typeof Point) // "function"
        console.log(Point === Point.prototype.constructor) // true

3)クラスを使用して、オブジェクトのインスタンスは、コンストラクタで使用ES5と一致直接クラスに新しいコマンドの使用で作成します。

4)クラス内のメソッドは、これとES5の異なる列挙されていません。
画像のキャプション画像のキャプション

。5)のコンストラクタメソッド
クラスのコンストラクタメソッドを持っている必要があり、添加しない場合は、デフォルトコンストラクタ(){}。クラスは、関数であるが、が、ES5と異なる、直接ではなく、この機能だけであれば、新規および使用一緒に理にかなっていること、エラーの新しいタイプにつながるクラスを呼び出すことによって。
例6)クラス
とES5同じ属性のインスタンスがない限り、明示的にそれ自体の定義された(すなわち、このオブジェクトは)で定義されている、またはプロトタイプに(すなわちクラスで定義)定義されています。

            class Point {
              constructor(x, y) {
                this.x = x;
                this.y = y;
              }
              toString() {
                return '(' + this.x + ', ' + this.y + ')';
              }
            }
            var point = new Point(2, 3);
            point.toString() // (2, 3)
            point.hasOwnProperty('x') // true
            point.hasOwnProperty('y') // true
            point.hasOwnProperty('toString') // false
            point.__proto__.hasOwnProperty('toString') // true

上記のコードで、x及びyは(この変数で定義される)物点独自のプロパティのインスタンス、真hasOwnPropertyをメソッドに戻り、プロトタイプオブジェクトのプロパティであるのtoStringは(ポイントで定義されている)であり、メソッド戻りのhasOwnPropertyを偽。これらは、ES5の行動と一致しています。

ES5とクラスのプロトタイプオブジェクトのすべてのインスタンスの共有など。

        var p1 = new Point(2,3);
        var p2 = new Point(3,2);
        p1.__proto__ === p2.__proto__
        //true

プロトタイプのすべてがそれとES5として、この方法を増加した後、__proto__プロパティは、クラスメソッドのインスタンスを追加することによって減少させることができます。

        var p1 = new Point(2,3);
        var p2 = new Point(3,2);
        p1.__proto__.printName = function () { return 'Oops' };
        p1.printName() // "Oops"
        p2.printName() // "Oops"

7)クラス可変リフト(ホイスト)が存在しない、それは完全に異なるとES5です。

        new Foo(); // ReferenceError
        class Foo {}

クラス宣言ES6、コードの先頭に上昇しないため、上記のコードでは、最初のクラスはFooを使用して、定義した後、これは、与えられています。承継に関連するような条項の理由は、親クラスの後にそのサブクラスの定義を確認する必要があります。

8)strictモード
あなたが操作の使用strictモードを指定する必要はありませんので、内部クラスやモジュール、デフォルトモードでは、厳しいです。限り、あなたは中クラスまたはモジュールでコードを書くように、唯一のstrictモードが利用可能です。将来的にはすべてのコードを考慮して、実際に実際に厳格なモードに全体の言語をアップグレードES6モジュール内となるよう実行されています。

3つのES6クラスの継承

クラスは継承にキーワードを拡張し、ES5は異なるプロトタイプ継承チェーン(偶然にも、@extendすることによって達成することがSASS継承スタイル)を変更することによって、これを達成することによって達成さ:

        class ColorPoint extends Point{}

サブクラスは、新しいインスタンスを作成するときに、それ以外の場合はエラーになり、コンストラクタメソッドでスーパーメソッドを呼び出す必要があります。サブクラスは、このオブジェクトを所有していないので、これはですが、このオブジェクトは、親クラス、その処理を継承します。あなたはスーパーメソッドを呼び出さない場合は、サブクラスは、このオブジェクトを取得することはありません。

    class ColorPoint extends Point {
      constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
      }
      toString() {
        return this.color + ' ' + super.toString(); // super代表父类原型,调用父类的toString()
      }
    }

上記のコードでは、コンストラクタメソッドtoStringメソッドのうち、出現したスーパーキーワードが親クラスの構造を示し、このオブジェクトが新しい親クラスを作成するために使用されます。
スーパーキーワードは、どちらかの使用の機能として、あなたはまた、ターゲットとして使用することができます。最初のケースでは、スーパー時間関数呼び出しとして、親クラスのコンストラクタを代表して、唯一のコンストラクタサブクラスで使用することができます。ES6請求サブクラスのコンストラクタは、スーパーの機能を実行する必要があります。後者の場合は、スーパーオブジェクトは、プロトタイプの親クラスを代表してオブジェクトを参照するとき。

ES5の継承は、本質的には、(Parent.apply(本))上記のこの親クラスに追加し、このサブクラスのオブジェクトのインスタンスを作成することです。(継承プロトタイプスルーモードES5:サブクラスを作成し、サブクラスはプロトタイプを書き換えると、インスタンスの新しいタイプによって置き換えられている子クラスのプロトタイプ、親クラスのアサインインスタンス)ES6の継承メカニズムは、の本質全く異なっていますこれは、これを修正するサブクラスのコンストラクタを使用し、その後、(あなたが最初のスーパーメソッドを呼び出す必要があります)親クラスを作成するオブジェクトの最初のインスタンスです。

子供がデフォルトで追加されるクラスのコンストラクタメソッドを定義していない場合。コンストラクタサブクラスでは、唯一のスーパー呼び出した後、あなたはそれ以外の場合はエラーになり、このキーワードを使用することができますこれは、サブクラスのインスタンスの構築は、親プロセス・インスタンスに基づいているため、唯一のスーパーメソッドは、親クラスのインスタンスを返すことです。

        class Point {
          constructor(x, y) {
            this.x = x;
            this.y = y;
          }
        }
        
        class ColorPoint extends Point {
          constructor(x, y, color) {
            this.color = color; // ReferenceError
            super(x, y);
            this.color = color; // 正确
          }
        }

そして、サブクラスによって作成されたインスタンスとしてES5は、親クラスとサブクラスのインスタンスであります:

        let cp = new ColorPoint(25, 8, 'green');
        
        cp instanceof ColorPoint // true
        cp instanceof Point // true

4サプリメント

1)プロトタイプのクラス属性と__proto__プロパティ(あまりにも周りに、このことを理解していません。)

ES5は、各オブジェクト属性、コンストラクタに対応する点プロトタイプ性を有する__proto__。ES6同時に2つの継承チェーンがあるなしコンストラクタ、シンタックスシュガーとして、クラスのコンストラクタ、しばらくprototypeプロパティ__proto__プロパティと、。
(1)__proto__属性サブクラスは、継承コンストラクタ、親クラスに常に点を表します。
(2)__proto__プロパティサブクラスプロトタイププロパティは、継承されたメソッドを発現し、プロトタイプのプロパティは、常に親クラスを指します。
この結果、クラスの継承は、以下のモードに応じて実装されているため。

        class A {
        }
        class B {
        }
        // B的实例继承A的实例
        Object.setPrototypeOf(B.prototype, A.prototype);
        const b = new B();
        // B的实例继承A的静态属性
        Object.setPrototypeOf(B, A);
        const b = new B();

この継承二つの鎖は理解することができる:オブジェクトとして、プロトタイプ(__proto__プロパティ)サブクラス(B)は、親クラス(A)であり、コンストラクタとして、原型(プロトタイプ属性)サブクラス(B)であります親クラスの例。

2)Object.getPrototypeOf

Object.getPrototypeOf方法は、親クラスのサブクラスから取得するために使用することができます。

        Object.getPrototypeOf(ColorPoint) === Point
        // true

したがって、この方法を用いることができるクラスが別のクラスを継承するかどうか、判定されます。

実施例の__proto__プロパティ3)

__proto__プロパティ__proto__プロパティサブクラスのインスタンスは、親クラスのインスタンスのポイント__proto__プロパティ。すなわち、サブクラスのインスタンスのプロトタイプのプロトタイプは、親クラスのプロトタイプのインスタンスです。

            
            var p1 = new Point(2, 3);
            var p2 = new ColorPoint(2, 3, 'red');
            p2.__proto__ === p1.__proto__ // false
            p2.__proto__.__proto__ === p1.__proto__ // true

全体的に、ES6はES5の形式を変更することで、真の内容は変更されないまま、本質的には、まだ継承チェーンによってプロトタイプです。

おすすめ

転載: www.cnblogs.com/baimeishaoxia/p/12541268.html