JavaScriptでクラスを定義する3つの方法とは何ですか-フロントエンドQ&A-php.cn

JavaScriptでクラスを定義する3つの方法とは何ですか

WBOY

リリース： 2022-02-21 17:13:53

オリジナル

2580 人が閲覧しました

JavaScript でクラスを定義する 3 つの方法: 1. コンストラクターを使用してクラスを定義します。構文は "function name(){this.name=value;}" です。 2. "Object. create() メソッドクラスを定義します。 3. createNew() メソッドを使用してクラスを定義します。

JavaScriptでクラスを定義する3つの方法とは何ですか

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript でクラスを定義する 3 つの方法とは何ですか

オブジェクト指向プログラミングでは、クラスはオブジェクトのテンプレートであり、同じオブジェクトのグループ (「インスタンス」とも呼ばれます) を定義します。 ) ) 共通のプロパティとメソッド。

JavaScript 言語は「クラス」をサポートしていませんが、いくつかの回避策を使用して「クラス」をシミュレートできます。

1. コンストラクターメソッド

これは古典的なメソッドであり、教科書では必ず教えなければならないメソッドです。コンストラクターを使用して「クラス」をシミュレートし、内部で this キーワードを使用してインスタンスオブジェクトを参照します。

function Cat(){
  this.name = "大毛";
}

ログイン後にコピー

インスタンスを生成するときは、new キーワードを使用します。

var cat1 = new Cat();
alert(cat1.name);   //大毛

ログイン後にコピー

クラスの属性とメソッドは、コンストラクターのプロトタイプオブジェクトで定義することもできます。

Cat.prototype.makeSound = function(){
  alert("喵喵喵");
}

ログイン後にコピー

このメソッドの詳細については、「JavaScript オブジェクト指向プログラミング」シリーズの記事を参照してください。ここでは詳しく説明しません。その主な欠点は、教えるのが複雑で、これとプロトタイプを使用し、書くのも読むのも非常に手間がかかることです。

2. Object.create() メソッド

「コンストラクターメソッド」の欠点を解決し、より便利にオブジェクトを生成するために、 JavaScript 国際標準 ECMAScript の第 5 版 (現在は第 3 版が普及しています) では、新しいメソッド Object.create() が提案されています。

このメソッドを使用すると、「クラス」は関数ではなくオブジェクトになります。

var Cat = {
  name: "大毛",
  makeSound: function(){
    alert("喵喵喵");
  }
};

ログイン後にコピー

次に、new を使用せずに、Object.create() を使用してインスタンスを直接生成します。

var cat1 = Object.create(Cat);
alert(cat1.name);   //大毛
cat1.makeSound();   //喵喵喵

ログイン後にコピー

現在、すべての主要ブラウザ (IE9 を含む) の最新バージョンがこのメソッドを導入しています。古いブラウザを使用している場合は、次のコードを使用して自分でデプロイできます。

if(!Object.create){
  Object.create = function(o){
    function F(){};
    F.prototype = o;
    return new F();
  }
}

ログイン後にコピー

このメソッドは「コンストラクターメソッド」よりも単純ですが、プライベートプロパティやプライベートメソッドを実装できず、インスタンスオブジェクト間でデータを共有することもできず、「クラス」のシミュレーションは十分に包括的ではありません。

3. ミニマリストメソッド

オランダのプログラマー、Gabor de Mooij は、Object.create() メソッドよりも優れた新しいメソッドを提案しました。それを「ミニマリスト・アプローチ」と呼びます。これも私がオススメする方法です。

3.1 カプセル化

この方法はこのプロトタイプには適用されず、コードの展開が非常に簡単であるため、おそらく「ミニマリスト方法」と呼ばれています。

まず、「クラス」をシミュレートするためにオブジェクトも使用します。このクラスでは、インスタンスを生成するコンストラクター caeateNew() を定義します。

var Cat = {
  createNew: function(){
    //some code here
  }
};

ログイン後にコピー

次に、carateNew() でインスタンスオブジェクトを定義し、このインスタンスオブジェクトを戻り値として使用します。

var Cat = {
  createNew: function(){
    var cat = {};
    cat.name = "大毛";
    car.makeSound = function(){
      alert("喵喵喵")；
    }；
  }
}；

ログイン後にコピー

使用する場合は、createNew() メソッドを呼び出してインスタンスオブジェクトを取得します。

var cat1 = Cat.createNew();
cat1.makeSound();   //喵喵喵

ログイン後にコピー

この方法の利点は、理解しやすく、明確で洗練された構造を持ち、従来の「オブジェクト指向プログラミング」構造に準拠しているため、次の機能を簡単に導入できることです。

関連する推奨事項: JavaScript 学習チュートリアル

以上がJavaScriptでクラスを定義する3つの方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。