ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript オブジェクト指向 - ファクトリ メソッドとコンストラクター メソッドを使用したオブジェクトの作成

JavaScript オブジェクト指向 - ファクトリ メソッドとコンストラクター メソッドを使用したオブジェクトの作成

黄舟
黄舟オリジナル
2017-01-19 15:06:231489ブラウズ

前回の記事では、単純なJavaScriptオブジェクトの作成方法を紹介しましたが、単純なjsオブジェクトの最大の問題は、クラス制約がないため、オブジェクトの再利用が実現できず、規約がないため問題が発生することです。動作中に。 。そこで人々は、デザイン パターンからファクトリ パターンを借用して、JavaScript オブジェクトを作成しました。

ファクトリ メソッドを使用して JavaScript オブジェクトを作成します

ファクトリ メソッドの考え方は、関数内でオブジェクトを作成し、そのオブジェクトに対応するプロパティとメソッドを設定し、最後にオブジェクトを返すことです。関数を通じてカプセル化して、特定のインターフェイスを持つオブジェクトを作成します。以下は、ファクトリ メソッドを使用して person オブジェクトを作成する例です:

function createPerson(name,age){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.say = function(){
    alert(this.name + "," + this.age);
  }
  return o;
}
// 实例化p1和p2对象
var p1 = createPerson("Leon",22);
var p2 = createPerson("Ada",20);
 
//调用p1和p2对象的say()方法
p1.say();
p2.say();

ファクトリ メソッドを使用するとクラスの問題は効果的に解決されますが、まだ別の問題があります。オブジェクト p1 と p2 のデータ型を検出できません。 typeof は、オブジェクトがオブジェクト型であることを検出するためにのみ使用できます:

console.info(typeof p1);  // 控制台输出:Object

instanceof を使用してオブジェクトの型を決定したい場合は、p1instanceof?、instanceof の後にどの型を入力する必要がありますか?分かりません。

コンストラクターを使用して JavaScript オブジェクトを作成する

ファクトリ メソッドではオブジェクトの特定の型を決定できないため、JavaScript オブジェクトを作成する新しい方法であるコンストラクター メソッドが提案されています。 JavaScript では、コンストラクターを使用して、Object や Array などの特定のタイプのオブジェクトを作成できます。これらの JS ネイティブ コンストラクターは、実行時に実行環境に自動的に表示されます。コンストラクターをカスタマイズして、カスタム型のプロパティとメソッドを定義することもできます。

コンストラクターを使用してクラスを作成する方法は、ファクトリに基づいてクラスを作成する方法と似ていますが、最大の違いは、関数の名前がクラスの名前であることです。通常、プログラミング標準の規則に従って、クラスの最初の文字は大文字になります。コンストラクターを使用してクラスを作成する場合、属性の定義は関数内の this キーワードによって完了します。

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  this.say = function(){
    console.info(this.name + "," + this.age);
  }
}
// 通过new关键字来创建对象
var p1 = new Person("Leon",22);
var p2 = new Person("Ada",20);
// 调用对象的方法
p1.say();
p1.say();

上記のコードに示されているように、クラスの作成が完了したら、新しいキーワードを使用してオブジェクトをインスタンス化できます。

コンストラクター メソッドを使用すると、オブジェクト タイプの検出の問題が非常によく解決されます。instanceof キーワードを使用して、オブジェクトが Person タイプであるかどうかを判断できます。

console.info(p1 instanceof Person);   //控制台显示:true                              
console.info(p2 instanceof Person);   //控制台显示:true

さらに、コンストラクター キーワードを使用してオブジェクトのタイプを表示することもできます。コンストラクター 人物タイプかどうか:

console.info(p1.constructor == Person);   //控制台显示:true                              
console.info(p2.constructor == Person);   //控制台显示:true

または、比較のために p1 と p2 のコンストラクターを直接出力します:

console.info(p1.constructor);
console.info(p2.constructor);

JavaScript オブジェクト指向 - ファクトリ メソッドとコンストラクター メソッドを使用したオブジェクトの作成

コンストラクター メソッドの使用によってもたらされる問題は、メソッドのコピーが存在することです。各オブジェクトに多くのメソッドがある場合、多くのメモリ領域を占有します。

一部の高度なコンパイル済みオブジェクト指向プログラミング言語 (Java など) では、オブジェクト メソッドは実行時にスタック領域に動的に生成され、メモリを占有しません。 Javascript では、コンストラクター メソッドを使用して作成されたオブジェクトの場合、オブジェクト内の各メソッドはクラス メソッドのコピーになります。オブジェクト内に多数のメソッドがある場合、多くのメモリ領域を占有します。

クラス内のメソッドが同じ関数を指すように、グローバル変数でクラスのメソッドを定義できます。コードは以下の通りです:

// 使用构造函数方式来创建Person类
function Person(name,age){
  this.name = name;
  this.age = age;
  // 此时的类方法是一个全局方法的引用
  this.say = say;
}
//将方法设置为全局的方法
function say(){
  alert(this.name + "," + this.age);
}

クラスメソッドをグローバルメソッドとして設定することで、オブジェクト内のメソッドがメモリ空間を占有する問題を解決できます。このとき、コンストラクタを通じて作成されたすべてのオブジェクト内のメソッドは同じものを指します。グローバル関数。

しかし、すべてのメソッドがグローバル関数として設定されている場合、これらの関数はウィンドウによって呼び出すことができ、オブジェクトのカプセル化が破壊されます。また、オブジェクトに多数のメソッドがある場合、多数のグローバル関数が必要になります。 、これも私たちの発展には役に立ちません。

コンストラクター メソッドのこれらの欠点を解決するには、プロトタイプを使用してオブジェクトを作成する必要があります。次の記事では、プロトタイプを使用して JavaScript オブジェクトを作成する方法を紹介します。

上記は JavaScript オブジェクト指向です - ファクトリ メソッドとコンストラクター メソッドを使用してオブジェクトを作成します。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。


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