【29】class継承

上記の章ではJavaScriptの対象モデルは原型に基づいて実現されていることを見ました.特徴は簡単で、欠点は伝統的なクラス・インスタンスモデルより理解が困難で、最大の欠点は継承の実現には大量のコードが必要であり、正確にオリジナルチェーンを実現する必要があります.もっと簡単な書き方がありますか?あります新しいキーワードclassはES 6から正式にJavaScriptに導入されます.クラスの目的は定義クラスを簡単にすることです.まず関数でStudentを実現する方法を振り返ってみます.

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
}

新しいクラスのキーワードでStudentを作成すれば、こう書くことができます.

class Student {
    constructor(name) {
        this.name = name;
    }
    
    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

比較してみると、classの定義には構造関数constructorと原型オブジェクトに定義されている関数hello()が含まれており、Student.prototype.hello=function()という分散コードが避けられていることが分かります.最後に、Studentオブジェクトコードを作成するのは前の章と同じです.

var xiaoming = new Student('  ')；
xiaoming.hello();

クラス継承
クラスで対象を定義するもう一つの大きな利点は継承がより便利になることです.Studentから派生したPrimary Studentのコード量を考えてみます.現在、原型継承の中間対象、原型オブジェクトの構造関数などは考慮する必要がなく、直接extensを通じて実現されます.

class primaryStudent extends Student {
    constructor(name, grade) {
        super(name);  //    super         ！
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

注意Primary Studentの定義もクラスのキーワードで実現されますが、extensはStudentからプロトタイプチェーンのオブジェクトを表します.サブクラスのコンストラクタは、例えば、Primary Studentがnameとgradeの二つのパラメータを必要とし、super(name)を通じて親タイプのコンストラクタを呼び出す必要があります.そうでなければ、親タイプのname属性は正常に初期化できません.Primary Studentはすでに自動的に父種類Studentのハローメソッドを獲得しました.私達はまたサブクラスの中で新しいmyGrade方法を定義しました.ES 6に導入されたクラスと既存のJavaScriptの原型継承にはどのような違いがありますか?実は彼らは何の区別もありません.クラスの役割はJavaScriptエンジンを実現させることです.元々は自分で作成したプロトタイプチェーンコードが必要です.簡単に言えば、classを使うメリットは原型チェーンコードを大幅に簡略化したことです.クラスはこんなに使いやすいですから、今すぐ使ってもいいですか?今はまだ早いです.すべての主流ブラウザがES 6のクラスをサポートしているわけではないからです.必ず今使いたいなら、classコードを伝統的なprototypeコードに変換するツールが必要です.Babelというツールを試してみてもいいです.