[ESNext]今すぐ勉強します:class

ES 5およびそれ以前
定義＃テイギ＃
ES 5ではクラスの概念はありませんが、すでにタイプの概念があります.
その時、私たちはタイプを作成したいと思っていました.

function MyClass() {
   alert(this instanceof MyClass);
}

このように,タイプを定義したが,同時に関数でもある.
異なる呼び出し方法で得られた結果を見てみましょう.

MyClass(); // false
new MyClass(); // true

最初の文の直接呼び出しはfalseを出力します.関数内コンテキスト(context)はwindowを指すため、windowのprototypeにMyClassのプロトタイプが存在するかどうかを検出します(つまり、MyClassから継承されているかどうか).答えは明らかだ.
newを使ってオブジェクトを作成してMyClassにリンクすると、newから出てきたオブジェクトprototypeはMyClassのプロトタイプが存在します.また、実行時に彼のコンテキストはnewで作成されたこのオブジェクトを指すので、thisは(new MyClassで作成されたオブジェクトを指す)instanceof MyClassが成立します.
 
継承
前述したように継承について言及しましたが、クラスがない場合はどのように継承しますか?
このとき、プロトタイプの概念がある以上、プロトタイプにプロトタイプを加えてプロトタイプチェーンを形成してこの効果を実現できるのではないかと考える人もいます.
すると、こんな書き方が出てきました.

function A() {
    this.text = "father";
}

A.prototype.Print = function () {
    alert(this.text);
};

function B() {
    this.text = "son";
}

B.prototype = new A();
B.prototype.constructor = B;

var a = new A();
a.Print();

var b = new B();
b.Print();

初めて見たのは霧の水ではないでしょうか.誰が親ですか.誰が子ですか.this.textはいったい誰を指しているのか.B.prototype = new A(); 何の鬼だ?直接=Aはどうしてだめなの?
B.prototype.constructorはなぜBに等しいのですか?だめじゃないの?などなどの質問～
一歩一歩解析してみよう～
まず,Aは親,Bは子である.
this.textは主にnewから出てきたオブジェクトがAによって作成されたかBによって作成されたかを示す.
B.prototypeがAに直接等しい場合、B.prototypeの下の内容を修正すると、Aの内容を直接修正することに相当しますが、私たちが実際に修正したいのはAが作成したコピーオブジェクトです.
B.prototype.constructorはデフォルトではBのコンストラクタを指しますが、B.prototypeが変更されているため、再指し示す必要があります.そうしないと、コンストラクタ関連の操作エラーの指し示しAが発生し、エラーが発生します.
わぁ～ここを見て気づいたんだけど、なんでそんなに面倒くさいんだろう.ただ、BにAのものを引き継いでもらいたいだけなんだ.
そう、ES 5以前には簡単に書くことも理解することもできなかった簡単なことです.
 
プライベート関数、プライベート変数
この二つは本当にできないので、仕方がありません.文法、解析、可能な書き方からしても、できません.
何?関数と変数の前に下線はプライベートを表しますか?
それは私が勝手にあなたのライブラリに論理を注入したり、秘密データを切り取ったりすることができることを意味していますか?
 
ES 6時代
定義＃テイギ＃
ES 6時代にはclassキーワードとその概念があった.
この場合、タイプを定義するのは簡単です.

class MyClass {
    constructor() {
        console.dir(this);
    }
}

注意:constructorは必須ではありません.newでパラメータを入力したり、何かをしたりしたいときだけ必要です.ここではプレゼンテーションのために.
なぜこのプレゼンテーションコードにthis instanceof MyClassを書かないのですか?
この時、私たちが直接MyClass()を呼び出すと、もう間違っていますから.この書き方は検査上関数と一定の違いがある.
Uncaught TypeError: Class constructor MyClass cannot be invoked without 'new',
ただしtypeof MyClassはfunctionを出力していることに注意してください.
それでも、私たちに与えるメリットはたくさんあります.上のほうは一つです.
また、thisコンテキストでは、誤呼び出しによる指向性の問題は発生しません.ここで特に、あなたが使用する場合、私は「誤呼び出し」に重点を置いています.コールかapply呼び出しオブジェクト内関数はコンテキストを強制的に変更することができます.
 
継承
定義が変わった以上、継承方式は変わったのだろうか.答えは肯定的で、今回の変更はほとんどの概念と複雑な論理を隠しています.
書き方は以下の通りです.

class A {
    constructor() {
        this.text = "father";
    }

    Print() {
        alert(`father's ${this.text}`);
    }
}

class B extends A {
    constructor() {
        super();

        this.text = "son";
    }

    Print() {
        alert(`son's ${this.text}`);
    }

    PrintA() {
        super.Print();
    }
}

const a = new A();
a.Print();

const b = new B();
b.Print();
b.PrintA();

この例では、class Aを定義し、textをfatherに割り当て、関数Printを定義します.ここではサブクラスを区別するためにfather's接頭辞を付けて出力する.
次にclass Bを定義し、textをsonに割り当てます.注意してください.constructorの最初の行はsuper()でなければなりません.すなわち、子クラスは、自身を構築する前に親クラスを構築する必要があります.そうしないと、thisを操作するときにエラーが発生します.
class Bで関数PrintとPrintAを同時に定義します.
次に、AとBに対してそれぞれnew演算子でオブジェクトを作成します.
a.Print()出力father's fatherを呼び出す
b.Print()出力son's sonを呼び出す
最初から今まで私たちは問題ありません.注意しなければならないのは次の言葉です.
b.PrintA()
など注意が必要ですが、私たちの内部はどのように書かれていますか?
super.Print();
すなわち,継承した親のPrint関数を呼び出し,father's sonを出力する.
この例では、文法の書き方に迷ったり、迷ったりしていません.彼ら二人は混同してこのような問題を話した.
とても簡潔と言えます.
最後に気をつけて!ES 6のclass文法は単一継承のみをサポートする,すなわち,BはA,C,...を同時に継承できない.など、より多くのクラスがあります.この構文は1つの継承のみをサポートします.もちろん、他の方法で解決することができます.これは後の話です.
 
プライベート関数、プライベート変数
文法的に革新されたが,最下位の制限のため,私有変数に私有関数は依然として存在しない.
 
EXNext
ES 6から、EcmaScriptはバージョン番号ではなく年IDに変更されました.
つまり、1年に1回以上アップグレードされます.ESNextと総称します.
定義＃テイギ＃

class A {
    #text = "nivk";

    age = 52;

    get Text() {
        return this.#text;
    }

    Print() {
        alert(`   ${this.Text}，    ${this.age}  。`);
    }
}

class B extends A {
    #text = "dog";

    age = 26;
}

const a = new A();
a.Print();

const b = new B();
b.Print();

Aを定義し、プライベート変数#textを書き、共通変数ageを書き、getアクセサTextと関数Printを書きました.
もう1つのBを定義し、#textプライベート変数と共通変数ageを上書きします.
出力結果は驚くべきものです.
私はnivkと申します.今年52歳です.
私はnivkと申します.今年26歳です.
なにしろ、俺はdogじゃないか～(余談)
なぜageが上書きされているのに#textがないのですか?ここでは、このgetアクセスが機能しているわけではありませんが、text自体がプライベートとして定義されている場合、彼のアクセス性は制限され、textはクラス、外部の任意のコードにアクセスして書き込むことはできません.
プライベート属性またはプライベート関数は、接頭辞#井戸番号で識別されますが、なぜこの記号で識別されますか?これはいくつかの性能の問題に関連しており、興味があればTC 39委員会のGithub倉庫に行って調べてください.
これがプライベート変数です.同様にclassでプライベート変数を次のように定義することもできます(キーコードのみ):

#TestFunction() {
    // balabala....
}

Print() {
    this.#TestFunction();
}

これにより、クラスライブラリを安心して公開でき、誤用や隠れたセキュリティリスクを回避できます.
 
の最後の部分
EcmaScriptの標準はずっと更新されているので、この文はこの文を発表した時の最新の状態を表しているだけで、後で文法、機能の更新があれば私もここで更新します.
素質二連!!～～～～注目、点赞～～～撒花!～