JSでES6クラスの使い方をすぐにマスター

1. どのように構築しますか?

es5 でクラスを構築する一般的な方法を確認しましょう。まず、es5 はオブジェクト メソッドにプロトタイプを使用するので、コンストラクターにメソッドを追加しないのはなぜでしょうか。オブジェクトをインスタンス化すると、多数の同一メソッドが繰り返し作成され、リソースが浪費されるためです。したがって、オブジェクトのメソッドを prtotype にマウントする必要があります。

new と this のバインディングの問題に関しては、次のように大まかに簡略化できます。

• まず、newで新しいオブジェクトを作成します。
• 次に、このオブジェクトをコンストラクタのthisにバインドします。
• 次に、この構築されたオブジェクトのプロトタイプオブジェクトをバインドします
• 最後に、このオブジェクトを以前に定義したオブジェクトに戻します。

それでは例を見てみましょう。

関数 Animal(名前,年齢){
  this.name = 名前
  this.age = 年齢
  
  // これはリソースの無駄です // this.eat = function(){
  // console.log("今日は夕食を食べました")
  // }
}

// 正しいアプローチ Animal.prototype.eat=function(){
  console.log("今日は夕食を食べました")
}

次に、この操作が明らかに簡素化される ES6 クラスを使用します。

const dog = new Animal("wangcai",2) // エラーを報告します。悪い習慣を修正するために、ES6 では let や const のようにクラスを昇格しません。

クラス Animal{
  コンストラクター(名前,年齢){
    this.name = 名前 
    this.age = 年齢 
  }
  
    食べる（）{
    console.log("今日は夕食を食べました")
  }
}

cosnt dog = new Animal("wangcai",2) //正しい位置

さらに、このクラスは静的メソッド、set、get などの操作も追加します。

クラス Animal{
  コンストラクター(名前,年齢){
    this.name = 名前 
    this.age = 年齢 
  }
  
    食べる（）{
    console.log("今日は夕食を食べました")
  }
  

 名前(値)を設定する{
    this.tempname = "Lao Tie" + 値
  }
  
  名前を取得する(){
    this.tempname を返す
  }
  
  静的導入(){
    console.log("私は今、動物クラスです")
  }
}

//設定() 取得()
const dog = 新しい動物("giao",2)
dog.name="アギアオ" 
console.log(dog.name) // ラオティアギアオ

// 静的メソッド Animal.introuduce() // これで動物クラスになりました

継承について話す前に、ちょっとした知識を付け加えておきます。クラスのメソッド名は、属性演算を計算することで命名できます。

tempname = "giao" とします
クラス Animal{
   コンストラクター(名前,年齢){
    this.name = 名前 
    this.age = 年齢 
  }
  
  [tempname](){
    console.log("おやつをください")
  }
}

const xiaoagiao = 新しい Animal("giaoge",30)
xiaoagiao.giao() // giaoをください

2. 継承

継承の質問に戻りますが、es5 はどのように継承するのでしょうか?

関数 Animal(名前){
  this.name = 名前
}
動物プロトタイプbreak(){
  console.log("叫べ!")
}

関数 Dog( 名前, 年齢 ){
  動物.call(これ、名前)
  this.age = 年齢
}

Dog.prototype = 新しい動物()
Dog.prototype.constructor = 犬

これはコンポジション継承と呼ばれますが、どのように組み合わせられるのでしょうか?

プロパティの継承は借用継承です。Animal.call(this,name) は、Dog コンストラクターで Animal 関数を 1 回呼び出すことと同じであることがわかります。プロパティはプロトタイプ チェーンでリンクされていませんが、コードは Dog で実行されるため、自然に Animal の name プロパティを継承します。

動物.call(これ、名前)

メソッドの継承はプロトタイプ継承です。ご存知のとおり、関数は作成されるとプロトタイプ オブジェクトを生成します。この関数の prototype プロパティはそのプロトタイプ オブジェクトを指し、プロトタイプ オブジェクトのコンストラクター プロパティはこの関数を指します。 new を使用してこの関数の新しいインスタンスを作成すると、このインスタンスには関数のプロトタイプ オブジェクトを指す __proto__ プロパティが含まれます。したがって、関数インスタンスを借用することで、関数プロトタイプ オブジェクトを指します。継承した関数をインスタンス化し、インスタンス化したオブジェクトを継承したコンストラクターのプロトタイプ プロパティに割り当てて、チェーン構造を形成します。しかし、継承された関数のインスタンス化にはコンストラクター属性がないため、そのコンストラクターを継承されたコンストラクターにポイントする必要があります。

Dog.prototype = 新しい動物()
Dog.prototype.constructor = 犬

したがって、このルーチンに従って、es5 構文を使用して、dog 関数から Animal 関数の name メソッドと break メソッドを継承します。

では、ES6 ではどうやってそれを実現するのでしょうか?

クラス Animal{
  コンストラクタ(名前){
    this.name = 名前 
  }
  
  壊す（）{
    console.log("叫べ!")
    }
}

クラスDogはAnimalを拡張します{
  コンストラクター(名前、年齢){
    スーパー(名前)
    this.age=年齢
  }
}

ここで、Dog クラスを宣言するときに extends Animal を追加し、コンストラクターに super を追加するだけです。

この super(name) は Animal.call(this,name) と同等です。メソッドの問題に関しては、心配する必要はありません。extends 関数が自動的に処理するので、prototype を使用してメソッドを指す必要はありません。

上記は、JS で ES6 クラスの使い方を素早くマスターする方法の詳細な内容です。JS ES6 クラスの使い方の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。