Javascript_javascriptスキルでクラスを定義する3つの方法を詳しく解説

約 20 年前、JavaScript が誕生したとき、それは単なる単純な Web スクリプト言語でした。ユーザー名を入力するのを忘れた場合は、警告がポップアップ表示されます。

現在では、フロントエンドからバックエンドに至るまで、あらゆる種類の信じられないほどの用途があり、ほぼ万能となっています。プログラマーはこれを使用して、ますます大規模なプロジェクトを完了します。

JavaScript コードの複雑さも急増しています。 1 つの Web ページに 10,000 行の Javascript コードが含まれることは長い間一般的でした。 2010 年に、あるエンジニアは Gmail のコードの長さが 443,000 行であることを明らかにしました。

このような複雑なコードを作成して保守するには、モジュール化された戦略が必要です。現在、業界では「オブジェクト指向プログラミング」を採用するアプローチが主流となっています。そのため、JavaScript でオブジェクト指向プログラミングを実装する方法が注目されています。
問題は、JavaScript 構文が「クラス」(クラス) をサポートしていないため、従来のオブジェクト指向プログラミング手法を直接使用できないことです。プログラマーは、JavaScript で「クラス」をシミュレートする方法について多くの研究を行ってきました。この記事では、JavaScript で「クラス」を定義する 3 つの方法を要約し、それぞれの方法の特徴について説明し、私の目から見た最良の方法に焦点を当てます。

==============================================

JavaScript でクラスを定義する 3 つの方法

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

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

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

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

コードをコピー コードは次のとおりです:

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

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

コードをコピー コードは次のとおりです:

var cat1 = 新しい Cat();
alert(cat1.name); // ダ・マオ

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

コードをコピー コードは次のとおりです:

Cat.prototype.makeSound = function(){
alert("ニャーニャーニャー");
}

この方法の詳細については、私が書いた一連の記事「Javascript オブジェクト指向プログラミング」を参照してください。ここでは詳しく説明しません。その主な欠点は、比較的複雑で、this とプロトタイプを使用し、書くのも読むのも非常に手間がかかることです。

2. Object.create() メソッド

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

コードをコピー コードは次のとおりです:

var Cat = {
名前：「大毛」、
makeSound:function(){alert("ニャーニャーニャー"); };

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

コードをコピー コードは次のとおりです:

var cat1 = Object.create(Cat);
alert(cat1.name); // ダ・マオ
cat1.makeSound(); // ニャーニャーニャー

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

コードをコピー コードは次のとおりです:

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

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

3. ミニマリズム手法

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

3.1 梱包

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

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

コードをコピー コードは次のとおりです:

var Cat = {
createNew: function(){
// ここにコードを記載します
}
};

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

コードをコピー コードは次のとおりです:

var Cat = {
createNew: function(){
var cat = {};
cat.name = "大毛";
cat.makeSound = function(){alert("ニャーニャーニャー");
猫を返してください；
}
};

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

コードをコピー コードは次のとおりです:

var cat1 = Cat.createNew();
cat1.makeSound(); // ニャーニャーニャー

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

3.2 継承

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

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

コードをコピー コードは次のとおりです:

var 動物 = {
createNew: function(){
var Animal = {};
動物.sleep = function(){alert("睡眠");
動物を返す;
}
};

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

コードをコピー コードは次のとおりです:

var Cat = {
createNew: function(){
var cat = Animal.createNew();
cat.name = "大毛";
cat.makeSound = function(){alert("ニャーニャーニャー");
猫を返してください；
}
};

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

コードをコピー コードは次のとおりです:

var cat1 = Cat.createNew();
cat1.sleep(); //
で睡眠します。

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

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

コードをコピー コードは次のとおりです:

var Cat = {
createNew: function(){
var cat = {};
var sound = "ニャーニャーニャー";
cat.makeSound = function(){ アラート(サウンド) };
猫を返してください；
}
};

上記の例の内部変数 sound は外部から読み取ることができず、cat の public メソッド makeSound() を通じてのみ読み取ることができます。

コードをコピー コードは次のとおりです:

var cat1 = Cat.createNew();
アラート(cat1.sound); // 未定義

3.4 データ共有

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

コードをコピー コードは次のとおりです:

var Cat = {
音声: 「ニャーニャーニャー」、
createNew: function(){
var cat = {};
cat.makeSound = function(){alert(Cat.sound) };
cat.changeSound = function(x){ Cat.sound = x };
猫を返してください；
}
};

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

コードをコピー コードは次のとおりです:

var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); // ニャーニャーニャー

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

コードをコピー コードは次のとおりです:

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

(終了)