ES 6入門——ClassとModule

一、クラス
ES 6はクラスという概念を導入し、対象とするテンプレートです.クラスのキーワードでクラスを定義できます.

    //    
    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クラスを定義しました.中にはconstructor関数があります.これは構造関数です.thisキーワードは、インスタンスオブジェクトを表します.
クラス間では、extendsのキーワードで継承が可能です.

Class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y);  //   super.constructor(x, y)
        this.color = color;
    }

    toString() {
        return this.color + '' + super();
    }
}

二、Moduleの基本的な使い方
1>、exportとimport
ES 6は、モジュール機能を実現し、JavaScriptコードの依存性と展開上の問題を解決するために、既存のcommon JSとAMD仕様を置き換えると、ブラウザとサーバー共通のモジュールソリューションとなります.
モジュールの機能には二つのキーワードがあります.exportとimport.exportはユーザーカスタムモジュールに使用されます.対外インターフェースを規定する.importは、他のモジュールの機能を入力しながら名前空間を作成し、関数名の衝突を防止します.
ES 6は、独立したJSファイルをモジュールとして使用することができます.すなわち、JavaScriptスクリプトファイルを別のスクリプトファイルに呼び出すことができます.最も簡単なモジュールはJSファイルで、中にはexportキーワードを使って変数を出力します.

    //profile.js
    export var firstName = "Pandora";
    export var lastName = "G.Dragon";
    export var year = 1973;

    //export        ，      
    var firstName = "Pandora";
    var lastName = "G.Dragon";
    var year = 1973;
    export({firstName, lastName, year});

export定義モジュールを使用した後、他のJSファイルはimportキーでこのモジュール(ファイル)を読み込むことができます.ロード方法は以下の通りです.

    import {firstName, lastName, year} from './profile';

    function setHeader(element) {
        element.textContent = firstName + '' + lastName;
    }

上のコードセグメントでは、importキーを使用してオブジェクトを受け取ります.他のモジュールから導入する変数を指定します.大かっこ内の変数名は、導入されたモジュールの対外インターフェースの名称と同じでなければなりません.
ただし、入力した属性や方法に名前を付け直す場合は、import文は次のように書きます.

   import {someMethod, another as newName} from './exporter';

2>、モジュール全体のロード
exportキーワードは、変数を出力する以外に、方法やクラスを出力することができます.次のコードを見てください.

    // circle.js

    //   -1:       
    export function area(radius) {
        return Math.PI * radius * radius;  
    }
    //   -2：       
    export function circumference(radius) {
        return 2 * Mathi.PI * radius;
    }

以下では、上記のモジュールを参照するメール・jsファイルを定義します.

    // mian.js
    import {area, circumference} from 'circle';

    console.log("   ： " + area(4));
    console.log("   ： " + circumference(14));

上の書き方は一つ一つ導入する方法を制定することです.しかし、もう一つの書き方があります.moduleキーワードを使って、全体的に導入します.

    // main.js
    module circle from 'circle';

    console.log("   ： " + circle.area(4));
    console.log("   ： " + circle.circumference(14));

moduleキーの後に変数が付いています.導入されたモジュールがその変数に定義されていることを示します.
3>、export default文
入力された名前を属性や方法で指定したくない場合は、export default文を使用します.

    // export-default.js
    export default function foo() { // foo()           
        console.log('foo');
    }

他のモジュールにこのモジュールを導入すると、import文はデフォルトの方法に任意の名前を指定できます.

    // import-default.js
    import customName from './export-default';
    customName(); //'foo'

一つのモジュールは標準的な方法しかないことは明らかです.
デフォルトの属性については、直接export defaultの後に定義すればいいです.下記のコードで示します.

  export default 42;

三、モジュールの継承
モジュール間は継承可能です.
現在、circellPlusモジュールがcirculeモジュールを継承していると仮定します.コードは以下の通りです

    //circleplus.js
    export * from 'circle';  // "export *"    circle          
    export var e = 2.71828;
    export default function(x) {
        return Math.exp( x );
    }

この場合、cicleの属性と方法を名前を変えて出力することができます.

    export {area as circleArea } from 'circle';

ロードモジュールの書き方は以下の通りです.

    //main.js
    module math from 'circleplus';
    import exp from "circleplus";  // "import exp"   circleplus          exp  。
    console.log( exp(math.pi) );