クラス

ES6 では「クラス」という概念が導入されました。あります。これは、 他のプログラミング言語のクラスです。ここでのクラスは、特別な関数であり、 データやプロパティ、プロパティがすでに含まれているオブジェクトを作成するためのテンプレートとして機能 そのデータの操作に関連するメソッドが含まれます。 これらのオブジェクト、プロパティ、メソッドを総称して「メンバー」と呼びます。 クラスです。

クラスを定義するには、class キーワードを使用します。ベスト プラクティスに従い、 JavaScript の組み込みコンストラクタ関数によって確立された規則に従っていて、 次のように大文字で記述します。

class MyClass {}

クラスは、高度な API と API を プロトタイプとコンストラクタ関数の特長は次のとおりです。

class MyClass {}

typeof MyClass;
> "function"

高度な JavaScript を使用するためにクラスが部分的に追加されていたため 魅力的でわかりやすい "構文糖"ただし、 クラスは、ファイルを操作するのに役立つ簡略図を提供するだけではなく、 プロトタイプの継承。 長年にわたる設計に対処するためにクラス構文を活用する機会の紹介 JavaScript の問題を解消できます。1 つ たとえば、クラスの本体内のすべてのコードは常に 厳格モード。

クラスのインスタンスを作成するには、new 演算子を使用します。

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

クラスの本体内で定義された関数は、 作成します。

class MyClass {
    classMethod() {
        console.log( "My class method." );
    }
}

const myClassInstance = new MyClass();

myClassInstance.classMethod();
> "My class method."

クラス内で定義されたメソッドは、 作成されます。データの特性上、 プロトタイプ チェーンでは、 これらのメソッドを結果のオブジェクトに直接適用する必要があります。

class MyClass {
  classMethod() {
    console.log( "My class method." );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { }
    <prototype>: Object { … }
        classMethod: function classMethod()
        constructor: class MyClass { constructor(myPassedValue) }
        <prototype>: Object { … }

myClassInstance.classMethod();
> "My class method."

クラスのインスタンスを作成すると、特別な constructor() メソッドが呼び出されます。 必要な「セットアップ」を行うそのインスタンス用の新しい ID を初期化し、 すべてのプロパティが含まれます。クラスに渡される引数はすべて、 作成されたインスタンスは、constructor() メソッドで使用できます。

class MyClass {
  constructor( myPassedValue ) {
    console.log( myPassedValue );
  }
}

const myClassInstance = new MyClass( "A string." );
> "A string."

クラスの本体内では、this の値はインスタンス自体を参照します。 this で定義されたすべてのプロパティが、 そのクラス:

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProperty = myPassedValue;
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { instanceProperty: "A string." }

これらのプロパティは、クラスの本体内のすべてのメソッドでも使用できます。

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  myMethod() {
    console.log( this.instanceProp );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance.myMethod();
> "A string."

クラスの constructor() を定義しない場合、JavaScript エンジンは 空の「default」がconstructor。各クラスに 1 つの特別な メソッド constructor():

class MyClass {
  constructor() {}
  constructor() {}
}
> Uncaught SyntaxError: A class may only have one constructor

クラスを定義するには、クラス宣言か クラス式。これまでの例はすべてクラス宣言でしたが その場合、new を使用して名前を呼び出す必要があります。クラス式は、名前または値に 「匿名」を作成しますクラスです。

let ClassExpression = class {
    constructor() {}
};

ClassExpression;
> class  {}

匿名クラス式を使用できる関数の一つは、 「その場で」クラスを構築:

function classMaker() {
  return class {
    constructor() {}
  };
}

let MyVariable = classMaker();

MyVariable;
> class  {}

クラス宣言を使用してクラスを再宣言すると、構文エラーが発生します。

class MyClass {
    constructor( ) {
        console.log( "My class." );
    }
};

class MyClass {
    constructor() {
        console.log( "My new class." );
    }
};
> Uncaught SyntaxError: redeclaration of class MyClass

ただし、クラス式ではクラスを再定義できます。

let ClassExpression = class MyClass { };

ClassExpression = class MyOtherClass {
    constructor( myString ) {
        this.myProp = myString;
    }
};

new ClassExpression( "String." );
> MyOtherClass {myProp: 'String.'}

クラスと同じように、名前付きクラスの式を名前で呼び出すことはできません。 宣言します。ただし、クラス式に割り当てられた名前は、 プロパティを定義します。これは主にデバッグを容易にするためのものです。

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

クラス式を使用して変数を初期化する場合、 ホイスティング ルール その変数が想定どおりに追跡されます。クラス宣言は、 同じ「時間的デッドゾーン」が（let と const としてルール）、 現在のスコープの最上位にホイスティングされていないかのように動作します。 つまり、クラス宣言の前にクラスを呼び出すと、エラーが発生します。

{
    let myVar = new MyClass( "Property string." );

    class MyClass {
        myProp;

        constructor( myString ) {
            this.myProp = myString;
        }
    };
};
> Uncaught ReferenceError: Cannot access 'MyClass' before initialization

理解度をチェックする