JavaScriptを簡単に学ぶ——第8部:JavaScriptのクラス

ECMAScript 6では、JavaScriptのクラスを作成するためにclassキーワードが導入されています.classプロパティを使用してJavaScriptでクラスを作成できます.ECMA 6の前に、new演算子を使用して関数を呼び出すと、新しいオブジェクトが返されます.したがって、この関数はクラスとして使用され、コンストラクション関数と呼ばれます.このような呼び出し関数がオブジェクトを返す方法は、コンストラクション関数呼び出しモードとも呼ばれる.
ただし、ECMAScript 6ではclassキーを使用してクラスを作成できます.次のコードを見てください.

class Car {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}

上のコードクリップでは、ECMAScript 6 classキーワードを使用してCarというクラスを作成しました.次のようにCarクラスのオブジェクトを作成することもできます.

var car1 = new Car("BMW", 100);
car1.getInfo();
var car2 = new Car("Audi", 150);
car2.getInfo();

JavaScriptクラスは、プロトタイプの継承に基づいた簡略化された構文です.新しいオブジェクトの作成またはプロトタイプの継承方法は提供されず、JavaScriptにオブジェクトまたは継承向けの新しいモデルは導入されません.クラスはオブジェクトを作成する特殊な関数とも言える.
クラス宣言と表現
JavaScriptのclassプロパティも関数であるため、クラス宣言やクラス式を使用して作成することもできます.次のようにクラス宣言を使用してクラスを作成できます.

class Car {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}

クラスはクラス式を使用して作成することもできます.名前付きまたは名前なしのクラス式を作成できます.次に示すように、名前付きクラス式を作成できます.

var Car = class {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
    toString() {
        return `${this.maker} costs : ${this.price}`;
    }
}

未命名のクラス式は、以下のように作成できます.クラス式の名前は、クラスボディのローカル名です.

var Car = class c {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
    toString() {
        return `${this.maker} costs : ${this.price}`;
    }
}

クラスの昇格
前述したように、クラスは宣言としても式としても作成できますが、関数宣言とは異なり、クラス宣言は実行コンテキストの上部に昇格しません.次のコードを見てください.

var car1 = new Car("BMW", 10); // Reference Error  console.log(car1.toString());
class Car {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
    toString() {
        return `${this.maker} costs : ${this.price}`;
    }
}

上のコードは、宣言する前にクラスにアクセスしようとするため、参照エラー(Reference Error)を放出します.したがって,関数宣言は昇格され,クラス宣言は昇格されないという結論を得ることができる.
クラスメソッド
JavaScriptクラスには、次の3つの方法があります.

の構成方法.

静的方法.

プロトタイプ方法.

クラスコンストラクション関数メソッドは、初期化オブジェクトを作成します.1つのクラスには1つの構造方法しかありません.複数のコンストラクション関数メソッドを作成しようとすると、JavaScriptで例外が発生します.次のコードに示すように、キーワードconstructorを使用してコンストラクション関数を作成できます.

class Car {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
}

JavaScriptクラスの静的メソッドは、クラスの特定のオブジェクトではなく、クラスで呼び出されます.クラスのインスタンスで呼び出そうとすると、JavaScriptは例外を放出します.キーワードstaticを使用して、次のように静的メソッドを作成します.

class Car {
    static count() {
        console.log("I am static method");
    }
}
Car.count();
Car.count();

インスタンスで静的メソッドを呼び出そうとすると、JavaScriptはこの関数が存在しないことを示す例外を放出します.また、JavaScriptクラスには静的属性やメンバーがないことを覚えておいてください.これまでは静的メソッドのみがサポートされています.
クラスインスタンスを使用してアクセスする一般的なメソッドは、プロトタイプメソッドと呼ばれます.これらのメソッドは、クラスのオブジェクトを継承および使用できます.

class Car {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}
var car1 = new Car("BMW", 10);
car1.getInfo();

上のコードフラグメントではgetInfo()はCarクラスのプロトタイプメソッドである.ご覧のように、Carクラスのインスタンスを使用しています.プロトタイプメソッドであるため、継承することもできます.なぜこれらの方法がプロトタイプ方法と呼ばれているのかを検討してみましょう.まず、次のコードを考慮します.

class Car {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}
console.log(typeof (Car)); // function

このコードフラグメントでは,Carクラスのタイプを入力し,関数の出力も得た.ご覧のように、このクラスは関数タイプにすぎないので、他の関数と同様にprototypeプロパティもあります.これらの従来の方法はクラスのプロトタイプオブジェクトの方法であるため、プロトタイプ方法と呼ばれている.プロトタイプベースの継承を堅持することによって継承することができます.
この3つの方法のほかに、JavaScriptにはgetterやsetterというものもありますが、ここで理解してください.
結論
この記事では、ECMAScript 2015に導入されたJavaScriptクラスのプロパティについて簡単に説明します.classキーを使用すると、クラスを作成できますが、オブジェクトの作成または継承を導入する新しい方法ではないことを覚えておいてください.逆に、同じオブジェクトとプロトタイプベースの継承では、これはより簡単な構文にすぎません.
学習交流群569772982に参加することを歓迎して、みんなはいっしょに交流を学びます.