ES 6 classクラスおよび継承

4822 ワード

classクラス


ES 6にはclassクラスという概念が導入されていますが、このclassはいったい何に使われているのでしょうか.初心者の私たちにとって、言いすぎて理解できないことがあるかもしれませんが、例を挙げてみました.
よく先生たちが構造関数の頭文字は大文字で、普通の関数は大文字ではありません.これは構造関数と関数を区別するのに便利です.そしてES 6になると私たちの構造関数はclassと書くことができ、他の言語のクラス概念も導入されました.
次の例は簡単な構造関数ですが、関数と構造関数は表現から見るとあまりにも似ているので、ES 6のclassクラスが呼び出され、より簡単に区別できます.ES 6がどのように次のコードを書いたのか見てみましょう
 function Person(){    //ES5   
            this.name='zzl',
            this.age=18
        }
        Person.prototype.say=function(){
            console.log(this.name+'say hello')
        }
        var p1=new Person();
        p1.say();  //zzlsay hello 
  class Person{    //ES6   
            constructor(){
                this.name='zzl'
                this.age=18
            }
            say(){
                console.log(this.name+'say hello')
            }
        }
        var p1=new Person();
        p1.say();  //zzlsay hello 

ES 6の方法で書き直しましたが、どのような違いがありますか?
constructor():これは特殊なクラスメソッドであり、一般的には静的メソッドでもインスタンスメソッドでもなく、インスタンス化時にのみ呼び出されることを意味します.
注意:1つのclassにはconstructor()メソッドしかありません.そうしないと、エラーが発生します.
constructor()メソッドが定義されていない場合は、デフォルトで追加されます.簡単に言えば、classごとにconstrutorが必要です.
プロトタイプメソッド:ES 5では、プロトタイプメソッドをprtotypeに定義することがよくありますが、ES 6では、プロトタイプメソッドをclassに直接書きます.そのメソッド名の前にfunctionを付ける必要はありません.上記の例のように、他のメソッドとメソッドの間にカンマで区切る必要はありません.そうしないと、エラーが発生します.
ここに覚せい剤があるかどうか聞いたES 6のclassはやはり簡潔ですよ.
ES 6のclassを使用する上で注意しなければならない点:ES 6のclassの事前解析の時に昇格機能がなくて、ES 5は関数として昇格することができて、だからES 6のclassの実例の話の対象の操作は必ずclass類の後ろに置いて書いて、例えば:
 // 
                class Person{
                    constructor(){
                        this.name='zzl'
                        this.age=18
                    }
                    say(){
                        console.log(this.name+'say hello')
                    }
                }
                var p1=new Person();
                p1.say();  //zzlsay hello 
        // 
        var p1=new Person();
        p1.say();  //Uncaught ReferenceError: Person is not defined
         class Person{
            constructor(){
                this.name='zzl'
                this.age=18
            }
            say(){
                console.log(this.name+'say hello')
            }
        }

extends継承:classクラス間の継承を実現するために使用されます.子は親を継承し、家財を継承するのと同じように、親のすべての属性と方法を継承します.そして毎回extendsの後ろには1つの親しかいません.栗を挙げます.
 class  Father{
            constructor(){
                this.name='father'
                this.money=60000
            }
            say(){
                console.log(`${this.name} say hello`)
            }
            mymoney(){
                console.log(`${this.name} has  ${this.money}$ `)
            }
        }
        class Son extends Father{
            constructor(){
                super()    //  
                this.name='son'
                this.money=60000
            }
        }
        var son1=new Son();
        son1.say(); //son say hello
        son1.mymoney(); //son has  60000$ 

上記の例では、子クラスが親クラスのメソッドを完全に継承していることがわかります.最もスマートなのは、子クラスが親クラスのメソッドを使用すると、thisが自動的に子クラスコンストラクタを指します.
注意:サブクラスのsuper()は、その親のconstuctorまたは親のメソッドを呼び出すために使用されます.書かないと誤報になります.

classの静的メソッド:classクラスのメソッドの前にキーワードstaticを付けると、そのメソッドはインスタンスに継承されず、classクラス自体でしか呼び出せないことを示します。これが静的メソッドです。簡単な例を示します。


次の例ではfatherはclassクラスであり、f 1はその例であり、sayメソッドの前にstaticキーワードを追加し、f 1を実行する.say()メソッドが見つからないとエラーを報告し、Fatherを実行します.say()はsayメソッドを呼び出します.説明:静的メソッドはインスタンスに継承できません.クラス自体で呼び出すことができます.
         class  Father{
            constructor(){
                this.name='father'
                this.money=60000
            }
            static  say(){
                console.log(`${this.name} say hello`)
            }
            mymoney(){
                console.log(`${this.name} has  ${this.money}$ `)
            }
        }
        var f1=new Father();
        // f1.say(); //f1.say is not a function
        Father.say();  //Father say hello

また,親クラスの静的メソッドは,クラスに継承される.例:
SonクラスはFatherクラスの静的メソッドを継承し,Sonは直接クラスブック上で継承メソッドを呼び出す.
     class  Father{
            constructor(){
                this.name='father'
                this.money=60000
            }
            static say(){
                console.log(`${this.name} say hello`)
            }
            mymoney(){
                console.log(`${this.name} has  ${this.money}$ `)
            }
        }
        class Son extends Father{
            constructor(){
                super()    //  
                this.name='son'
                this.money=60000
            }
        }
        Son.say(); //Son say hello

もし何か間違いがあったら、伝言を歓迎します.ありがとうございます.