JavaScriptクラスの書き方

私たちは知っていますように、JavaScriptではクラスの概念はありません。クラスのすべてのインスタンスオブジェクトは同じプロトタイプオブジェクトから属性を継承しますので、プロトタイプオブジェクトはクラスの核心です。

クラスはオブジェクトの抽象であり、オブジェクトはクラスの具体的なインスタンスです。クラスは抽象的であり、メモリを占有しませんが、オブジェクトは具体的であり、ストレージ空間を占有します。———百度百科

初期のJavaScriptのニーズは基本的にシンプルで、機能は関数で書かれ、その後、プロセス指向の書き方に移行し、その後、徐々にオブジェクト指向の開発思想が導入され、最終的にはクラスの書き方に移行しました。

JavaScriptでは、クラスの本質は基本的に構造関数です+プロトタイプ。以下では、JavaScriptのクラスの書き方について説明します：

構造関数法

/**
* Personクラス：name属性とgetNameメソッドを持つ人を定義
  */
<script>
  function Person(name) {
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }
  //ここでいくつかのオブジェクトをインスタンス化しています
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");
  console.log(p1 instanceof Person);//true
  console.log(p2 instanceof Person);//true
</script>

上記のコントロールターミナルの出力結果から、p1とp2確かにPersonクラスのインスタンスオブジェクトです。instanceof演算子の左側は検出するオブジェクトのクラス、右側は定義するクラスのコンストラクタです。ここでは、instanceofを使用してオブジェクトp1Personクラスに属しているかどうか。

この方法の利点は、パラメータに基づいて異なるオブジェクトのインスタンスを構築できることです。欠点は、インスタンスを構築するたびにgetNameメソッドが生成され、メモリの無駄が発生することです。

外部関数を使ってクラスメソッドを置き換えることで、各オブジェクトが同じメソッドを共有できるようにします。書き換えたクラスは以下のようになります：

//外部関数
<script>
  function getName() {
    return this.name;
  }
  function Person(name) {
    this.name = name;
    this.getName = getName;//
  }
</script>

プロトタイプ方式

<script>
  function Person() {};
  Person.prototype.name = "trigkit"4";//クラスの属性はすべてprototypeに置かれます
  Person.prototype.getName = function() {
    return " I'm " + this.name;
  }
  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.name);//trigkit4
  console.log(p2.getName());//I'm trigkit4
</script>

プロトタイプ方式の欠点は、オブジェクトのインスタンスをパラメータで構築することができません（一般的に、各オブジェクトの属性は異なりますが）、すべてのオブジェクトのインスタンスがgetNameメソッドを共有するため、メモリの無駄が発生しません（構造関数方式に比べて）。

コンストラクタ+プロトタイプ方式
前两者的利点を取り入れます：
a、コンストラクタでクラスの属性（フィールド）を定義します。
b、プロトタイプ方式でクラスのメソッドを定義します。

<script>
  function Person(name) {
    this.name = name;
  }
  //プロトタイプの特性により、getNameメソッドをオブジェクトのインスタンスが共有できます
  Person.prototype.getName = function() {
    return " I'm " + this.name;
  }
</script>

これにより、異なる属性を持つオブジェクトを構築することもでき、オブジェクトのインスタンスがメソッドを共有することもでき、メモリの無駄が発生しません。

JavaScriptのコードスタイルをよりコンパクトにするために、prototypeメソッドのコードをfunction Personの大括号内に移動させます。

<script>
  function Person(name) {
    this.name = name;
    Person.prototype.getName = function() {
      return name;//this.nameは使用しない方が良い
    }
  }
  var p1 = new Person('trigkit4);
  console.log(p1.getName());//trigkit4
</script>

ここでは、上記のコンストラクタ以外に知る必要があるいくつかのクラスの定義方法があります：

Object.create()メソッド
このメソッドを使うと、"クラス"は関数ではなくオブジェクトです。

 var Person = {
    name : "trigkit"4"
    age : 21,
    function run() {
      alert("I like running");
    }
  }

その後、Object.create()を使用して直接インスタンスを生成し、newを使用する必要はありません。

var p1 = Object.create(Person);
  alert(p1.age);//21
  p1.run();//I like running

この方法は"構造関数法"よりもシンプルですが、プライベートプロパティやプライベートメソッドを実現できず、インスタンスオブジェクト間でデータを共有することができません。クラスのシミュレーションは十分に全面的ではありません。

createNew()メソッド
この方法はthisやprototypeを使用する必要がなく、オブジェクトを使用してクラスをシミュレートし、そのクラスの中で構造関数createNew()を定義し、createNew()の中でインスタンスオブジェクトを定義し、そのインスタンスオブジェクトを返値として返します。

<script>
  var Person = {
    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("I like running");
      };
      return person;
    }
  }
</script>

使用する際には、createNew()メソッドを呼び出すことで、インスタンスオブジェクトを取得できます。

 var p1 = Person.createNew();
  p1.run();//I like running

この書き方は実際にはオブジェクトリテラルの書き方と非常に似ていますが、一つはカンマで区切られ、もう一つはセミコロンで区切られています。

これでこの記事はすべて終わりです。皆様の学習に役立つことを願っています。また、ナイアラチュートリアルを多くのサポートをお願いします。

声明：この記事の内容はインターネットから収集され、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードしたものであり、このサイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害の可能性のある内容が見つかった場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、このサイトは即座に侵害する可能性のあるコンテンツを削除します。）