JavaScript にはクラスを定義する方法がありますか?

JavaScript にはクラスを定義するメソッドがあります。方法: 1. コンストラクターを使用してクラスを定義します。構文は "function name() {this.name = "...";}"; 2. "Object.create()" メソッドを使用してクラスを定義します。 、構文は "var name = Object.create(...);"; 3. クラスでコンストラクターを定義し、関数でインスタンス オブジェクトを定義してから、関数を再度呼び出してクラスを定義します。

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

JavaScript にはクラスを定義する方法がありますか?

JavaScript にはクラスを定義する方法があります

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

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

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

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

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

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

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

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

その主な欠点は、比較的複雑で、これとプロトタイプを使用し、書くのも読むのも非常に手間がかかることです。

2. Object.create() メソッド「コンストラクター メソッド」の欠点を解決し、より便利にオブジェクトを生成するために、 Javascript 国際標準 ECMAScript の第 5 版では、新しいメソッド 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 カプセル化

このメソッドは this とプロトタイプを使用せず、コードのデプロイが非常に簡単であるため、おそらく「ミニマリストメソッド」と呼ばれています。 。

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

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

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

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

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

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

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

3.2 継承

あるクラスに別のクラスを継承させると、実装が非常に便利になります。前者の createNew() メソッド内で後者の createNew() メソッドを呼び出すだけです。

まず、Animal クラスを定義します。

　　var Animal = {
　　　　createNew: function(){
　　　　　　var animal = {};
　　　　　　animal.sleep = function(){ alert("睡懒觉"); };
　　　　　　return animal;
　　　　}
　　};

次に、Cat の createNew() メソッドで、Animal の createNew() メソッドを呼び出します。

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

この方法で取得した Cat インスタンスは、Cat クラスと Animal クラスの両方を継承します。

　　var cat1 = Cat.createNew();
　　cat1.sleep(); // 睡懒觉

3.3 プライベート プロパティとプライベート メソッド

createNew() メソッドでは、メソッドとプロパティが cat オブジェクトで定義されていない限り、プライベートです。 。

　　var Cat = {
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　var sound = "喵喵喵";
　　　　　　cat.makeSound = function(){ alert(sound); };
　　　　　　return cat;
　　　　}
　　}

上の例の内部変数 sound は外部から読み込むことができず、cat の public メソッド makeSound() を介してのみ読み込むことができます。

　　var cat1 = Cat.createNew();
　　alert(cat1.sound); // undefined

3.4 データ共有

すべてのインスタンス オブジェクトが同じ内部データを読み書きできるようにする必要がある場合があります。この時点では、内部データをクラス オブジェクト内および createNew() メソッドの外にカプセル化するだけです。

　　var Cat = {
　　　　sound : "喵喵喵",
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　cat.makeSound = function(){ alert(Cat.sound); };
　　　　　　cat.changeSound = function(x){ Cat.sound = x; };
　　　　　　return cat;
　　　　}
　　};

次に、2 つのインスタンス オブジェクトが生成されます。

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

このとき、一方のインスタンス オブジェクトが共有データを変更すると、もう一方のインスタンス オブジェクトも影響を受けます。

　　cat2.changeSound("啦啦啦");
　　cat1.makeSound(); // 啦啦啦

【関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロントエンド ]

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