ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptでクラスを定義する3つの方法とは何ですか

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

WBOY
WBOYオリジナル
2022-02-21 17:13:532574ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。