ほぼ20年前、JavaScriptが生まれたとき、それは単なるWebスクリプト言語でした。ユーザー名の入力を忘れた場合、警告が表示されます。
今日、それはほぼ全能になり、フロントエンドからバックエンドまでのあらゆる種類の信じられないほどの用途があります。プログラマーはそれを使用して、ますます大規模なプロジェクトを完了します。
JavaScriptコードの複雑さも急激に増加しています。単一のWebページには、10,000行のJavaScriptコードが含まれています。 2010年、エンジニアは、Gmailのコード長が443,000行であることを明らかにしました!
このような複雑なコードを作成および維持するには、モジュラー戦略を使用する必要があります。現在、業界の主流のアプローチは、「オブジェクト指向のプログラミング」を採用することです。したがって、JavaScriptがオブジェクト指向プログラミングをどのように実装するかは、ホットトピックになりました。
問題は、Javascipt構文が「クラス」(クラス)をサポートしていないことです。これにより、従来のオブジェクト指向のプログラミング方法が直接使用することが不可能になります。プログラマーは、JavaScriptを使用して「クラス」をシミュレートする方法を研究するために多くの調査を行いました。この記事では、「クラス」を定義するJavaScriptの3つの方法を要約し、各方法の特性について説明し、私の目に最適な方法を強調しています。
================================================================================
JavaScriptでクラスを定義する3つの方法
オブジェクト指向プログラミングでは、クラスは、同じオブジェクトのグループ(「インスタンス」とも呼ばれるプロパティとメソッドを定義するオブジェクトのテンプレートです。
JavaScript言語は「クラス」をサポートしていませんが、いくつかの回避策を使用して「クラス」をシミュレートできます。
1。コンストラクターメソッド
これは古典的な方法であり、教科書の必須メソッドです。コンストラクターを使用して「クラス」をシミュレートし、このキーワードを使用して内部のインスタンスオブジェクトを参照します。
コードコピーは次のとおりです。
function cat(){
this.name = "Big Hair";
}
インスタンスを生成するときは、新しいキーワードを使用します。
コードコピーは次のとおりです。
var cat1 = new Cat();
アラート(cat1.name); //大きな髪
クラスのプロパティと方法は、コンストラクターのプロトタイプオブジェクトで定義することもできます。
コードコピーは次のとおりです。
cat.prototype.makesound = function(){
アラート( "Meow Meow");
}
この方法の詳細な紹介については、「JavaScriptオブジェクト指向プログラミング」という一連の記事を参照してください。ここでは説明しません。その主な欠点は、比較的複雑で、これとプロトタイプを使用していることです。これは、書いて読むのが非常に面倒です。
2。object.create()メソッド
「コンストラクター法」の欠点を解決し、より便利にオブジェクトを生成するために、ECMAScriptの第5版であるJavaScriptの国際標準(現在入手可能)は、新しいメソッドObject.create()を提案しました。
この方法を使用すると、「クラス」は機能ではなくオブジェクトです。
コードコピーは次のとおりです。
var cat = {
名前:「大きな髪」、
makeound:function(){alert( "meow meow meow"); }
};
次に、object.create()を直接使用して、newを使用せずにインスタンスを生成します。
コードコピーは次のとおりです。
var cat1 = object.create(cat);
アラート(cat1.name); //大きな髪
cat1.makesound(); // Meow Meow Meow Meow
現在、主要なブラウザ(IE9を含む)の最新バージョンがこの方法を展開しています。古いブラウザに遭遇した場合は、次のコードを使用して自分で展開できます。
コードコピーは次のとおりです。
if(!object.create){
object.create = function(o){
関数f(){}
f.prototype = o;
新しいf()を返します。
};
}
この方法は「コンストラクターメソッド」よりも簡単ですが、プライベート属性やプライベートメソッドを実装することはできず、インスタンスオブジェクト間でデータを共有できないため、「クラス」のシミュレーションは十分に包括的ではありません。
3。ミニマリスト法
オランダのプログラマーGabor de Mooijは、Object.create()よりも優れた新しいアプローチを提案しました。これも私がお勧めする方法です。
3.1パッケージ
この方法はこれとプロトタイプを使用しておらず、コードは非常に簡単に展開できます。これがおそらく「ミニマリスト法」と呼ばれる理由です。
まず、オブジェクトを使用して「クラス」をシミュレートします。このクラスでは、コンストラクターCreateNew()を定義してインスタンスを生成します。
コードコピーは次のとおりです。
var cat = {
createNew:function(){
//ここにいくつかのコード
}
};
次に、createNew()で、インスタンスオブジェクトを定義し、このインスタンスオブジェクトを戻り値として使用します。
コードコピーは次のとおりです。
var cat = {
createNew:function(){
var cat = {};
cat.name = "Big Hair";
cat.makesound = function(){alert( "meow meow"); };
猫を返します。
}
};
使用するときは、createNew()メソッドを呼び出してインスタンスオブジェクトを取得します。
コードコピーは次のとおりです。
var cat1 = cat.createNew();
cat1.makesound(); // Meow Meow Meow Meow
このアプローチの利点は、理解しやすく、明確でエレガントな構造を持ち、従来の「オブジェクト指向プログラミング」構造に沿っているため、次の機能を簡単に展開できることです。
3.2継承
次のクラスに1つのクラスを実装するのは非常に便利です。 createNew()メソッドで後者のcreateNew()メソッドを呼び出すだけです。
最初に動物のクラスを定義します。
コードコピーは次のとおりです。
var Animal = {
createNew:function(){
var Animal = {};
animal.sleep = function(){alert( "Sleep in"); };
動物を返します。
}
};
次に、CATのcreateNew()メソッドでは、動物のcreateNew()メソッドが呼び出されます。
コードコピーは次のとおりです。
var cat = {
createNew:function(){
var cat = animal.createNew();
cat.name = "Big Hair";
cat.makesound = function(){alert( "meow meow"); };
猫を返します。
}
};
この方法で得られた猫のインスタンスは、猫のクラスと動物のクラスの両方を継承します。
コードコピーは次のとおりです。
var cat1 = cat.createNew();
cat1.sleep(); //スリープイン
3.3プライベート属性とプライベート方法
CATオブジェクトで定義されていない方法とプロパティがプライベートである限り、CreateNew()メソッドで。
コードコピーは次のとおりです。
var cat = {
createNew:function(){
var cat = {};
var sound = "meow meow meow";
cat.makesound = function(){alert(sound); };
猫を返します。
}
};
上記の例の内部変数の音は、外部から読み取ることができず、CATのパブリックメソッドMaseound()を読むことができます。
コードコピーは次のとおりです。
var cat1 = cat.createNew();
アラート(cat1.sound); // 未定義
3.4データ共有
場合によっては、同じ内部データを読み書きできるようにすべてのインスタンスオブジェクトが必要です。現時点では、クラスオブジェクト内およびcreateNew()メソッドの外側の内部データをカプセル化するだけです。
コードコピーは次のとおりです。
var cat = {
サウンド:「Meow Meow Meow」、
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(); // Meow Meow Meow Meow
この時点で、インスタンスオブジェクトがあり、共有データが変更された場合、他のインスタンスオブジェクトも影響を受けます。
コードコピーは次のとおりです。
cat2.changesound( "lalala");
cat1.makesound(); // lalala
(以上)