JavaScriptデザインパターンの事前学習_JavaScriptスキル

目的: 後で参照できるように、学習したさまざまなデザイン パターンの長所と短所を記録してください。

はしがき: 半年前に Elevation を読んだとき、デザイン パターンに関する章を見て混乱しました。理解できなかったからではなく、その理由が理解できなかったからです。オブジェクトを作るだけでも大変でした。最近最初の小規模プロジェクトを完了して初めて、コードの量が増加したときに適切な仕様と制限がないと悲惨な結果になることに気づきました。そこで私は再び立面図に目を向け、学んだいくつかの単純な設計パターンの長所と短所をまとめました。

本文: この記事では、合計 7 つのデザイン パターン、その適用シナリオ、長所と短所を紹介します。

1. ファクトリーモード

関数を直接使用してオブジェクトをカプセル化し、オブジェクトを戻り値として使用します。

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=person("Su",25); 

欠点: オブジェクト認識の問題。作成されたオブジェクトはすべて Object のインスタンスであるため、区別するのが困難です。

2. コンストラクター パターン

function Person (name,age) {
  this.name=name;
  this.age=age;
  this.sayName=function () {
    alert(this.name);
  };
}
var me=new Person("Su",25); 

利点: コンストラクター パターンを使用すると、インスタンスを特定のタイプとしてマークできます。

欠点: 作成されたオブジェクトのメソッドはすべてプライベートです。パブリック メソッドを生成したいだけの場合、パフォーマンスが無駄に浪費されます。

3. プロトタイプモード

プロトタイプチェーンの継承を利用する

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person(); 

欠点: すべてのプロパティとメソッドはインスタンスによって共有されます。プロパティとメソッドに参照型の値が含まれている場合、1 つのインスタンスのプロパティとメソッドを変更すると、他のすべてのインスタンスに影響します。

4. プロトタイプ + コンストラクター パターン

プライベート プロパティとメソッドはコンストラクターを使用して生成され、パブリック プロパティとメソッドはプロトタイプを使用して継承されます。両方の方法の利点を組み合わせます。

function Person (name,age) {
  this.name=name;
  this.age=age;
}
Person.prototype={
  constructor:Person,
  sayName:function () {
      alert(this.name);
  }
}
var me=new Person("Su",25); 

欠点: 参照型値のプロトタイプ継承に注意してください。

ps: 上の図のコードは、person コンストラクターのプロトタイプ オブジェクトを書き換え、プロトタイプ オブジェクト ポインターがオブジェクトを指すようにするため、コンストラクター プロパティは person ではなく Object を指すため、明示的に person に設定する必要があります。

5. ダイナミックプロトタイプモード

本質的には、これはまだコンストラクター関数であり、指定されたメソッドが存在しない場合にプロトタイプ オブジェクトに追加するだけです。

function Person (name,age) {
  this.name=name;
  this.age=age;
  if (typeof this.sayName!="function") {
    Person.prototype.sayName=function () {
      alert(this.name);
    }
  }
}
var me =new Person("Su",25); 

欠点: プロトタイプ オブジェクトは、オブジェクト リテラルを使用してオーバーライドできません。これにより、インスタンス ポインタが新しいプロトタイプ オブジェクトを指すようになるためです。つまり、上図のプロトタイプオブジェクトに追加したsayNameメソッドは無効となります。

6. 寄生コンストラクター パターン

電話をかけるときは新しいオペレータを使用します。それ以外は、工場出荷時のモードと何の違いもありません。専門家からのアドバイスを求めています。

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=new person("Su",25); //这里使用new操作符 

7. 安全なコンストラクター パターン

パブリック属性はありません。これを無効にし、データ呼び出しに必要な API のみを公開します。セキュリティ要件が必要なエリアに適しています。

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su"); 

上記のコードに示されているように、内部名属性には、sayName メソッドを介してのみアクセスできます。

この記事では 7 つのデザイン パターンを紹介し、それぞれのメリットとデメリットを紹介します。js デザイン パターンを学ぶのに役立つことを願っています。