JavaScript カスタム プロパティとメソッドのオブジェクト モデル コードの詳細な説明

JavaScript には、カスタム プロパティとメソッドを使用してオブジェクトを作成するためのモードが多数あります

1。これは最も単純で簡単なパターンです。最初に参照型のオブジェクトを作成し、それにカスタム プロパティとメソッドを追加します。サンプル コードは次のとおりです。

var person = new Object(); 
person.name = "Sam"; 
person.age = 16; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
person.speak();

ご覧のとおり、上で Object 型のオブジェクトが作成され、それに name 属性と age 属性、speak メソッドが追加されています。パターンを直接作成するのは簡単ですが、その欠点は明らかです。同じオブジェクトを多数作成する必要がある場合、毎回コードを繰り返し書かなければなりません。この問題を解決するには、オブジェクトの作成プロセスをカプセル化することができるため、次のファクトリ パターンを用意します。
2. ファクトリーモード。ファクトリ パターンは、プログラミングでよく使用されるデザイン パターンで、主にオブジェクトを作成するプロセスをカプセル化します。サンプル コードは次のとおりです。

function createPerson(name, age){ 
var person = new Object(); 
person.name = name; 
person.age = age; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
return person; 
} 
var person1 = createPerson("Sam", 16); 
var person2 = createPerson("Jack", 18);

ファクトリ パターンを使用すると、同じ種類のオブジェクトを簡単に作成できます。しかし、ファクトリ パターンではオブジェクトの識別の問題は解決されません。つまり、作成されたオブジェクトの特定のタイプを決定することができません。オブジェクト指向プログラミングの経験のある開発者は、オブジェクトの作成はクラスに基づいて行う必要があることを知っています。特定のカスタム クラスを取得したら、そのクラスのオブジェクトを作成できます。幸いなことに、JavaScript では、コンストラクター パターンを通じてクラスをシミュレートできます。
3. コンストラクターパターン。コンストラクターと通常の関数の間に違いはありません。 new 演算子が使用されている限り、任意の通常の関数をコンストラクターとして使用できます。また、任意のコンストラクターを通常の関数として呼び出すこともできます。ただし、JavaScript では、コンストラクターとして使用される関数名の最初の文字を大文字にする必要があるという規則があります。サンプル コードは次のとおりです。

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18);

コンストラクター内でこれを使用してプロパティとメソッドを追加していることがわかります。 Person オブジェクトを作成するとき、これは作成されたオブジェクトを指します。これで、オブジェクト person1 と person2 の特定のタイプを識別できるようになりました。 alert(person1 instanceOf Person) を使用すると、出力値が true であることがわかります。ただし、コンストラクター パターンには独自の欠点もあります。つまり、コンストラクター内で宣言されたメソッドは、新しいオブジェクトが作成されるたびに再作成されます (JavaScript では、関数もオブジェクトです)。つまり、コンストラクター内のメソッドは、クラスではなくオブジェクトにバインドされます。以下のコードの出力で推論を検証できます。
alert(person1.speak == person2.speak); // false この欠点を解決する比較的簡単な方法は、関数宣言をコンストラクターの外に置くことです。つまり、

function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
function speak(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 
alert(person1.speak == person2.speak); // true

問題は解決されましたが、このメソッドは新たな問題をもたらした。まず、関数 speech はグローバル スコープで宣言されていますが、グローバル スコープに配置すると誤用の危険性があります。次に、カスタム タイプに多くのメソッドがある場合、次のようにする必要があります。多くのグローバル関数を宣言すると、グローバル スコープの汚染につながるだけでなく、コードのカプセル化にも役立ちません。それでは、グローバル スコープを汚さずにクラスにバインドされたカスタム型メソッドを作成する方法はあるのでしょうか?答えは、プロトタイプ パターンを使用することです。
4. プロトタイプモード。新しい関数を宣言すると、その関数 (JavaScript では関数もオブジェクトです) はプロトタイプ属性を持ちます。プロトタイプは、この関数によって作成されたすべてのオブジェクトが所有するパブリック プロパティとメソッドを表すオブジェクトです。サンプルコードは以下の通りです:

function Person(){} 
Person.prototype.name="Sam"; 
Person.prototype.age=16; 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

コンストラクター内でspeakメソッドが宣言されていないにもかかわらず、作成したオブジェクトperson1はspeakメソッドを呼び出すことができることがわかります。これは、JavaScriptにFirst searchルールがあるためです。インスタンスの属性とメソッドを検索し、見つからない場合はプロトタイプを再度検索します。プロトタイプ パターンでは、メソッドがクラスに関連付けられ、グローバル スコープを汚染しませんが、独自の欠点もあります。まず、すべての属性もクラスに関連付けられます。つまり、すべてのオブジェクトが 1 つの属性を共有することになり、これは明らかに不合理です。 . ; 次に、初期化データをコンストラクターに渡す方法がありません。解決策は簡単で、コンストラクター パターンとプロトタイプ パターンを組み合わせて使用​​するだけです。
5. 組み合わせモード。サンプルコードは次のとおりです。

function Person(name, age){ 
this.name = name; 
this.age = age; 
} 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true

組み合わせモードがすべてのニーズを満たしていることを見つけるのは難しくなく、現在広く使用されているモードでもあります。オブジェクト指向プログラミングの経験のある開発者にとっては、プロトタイプ宣言をコンストラクターの外に置くのは少し面倒に感じるかもしれませんが、コンストラクターの中に置くことはできますか?答えは「はい」です。動的結合モードを使用してください。
6. ダイナミックコンビネーションモード。原則として、まずプロトタイプ内の特定の属性またはメソッドが宣言されているかどうかを判断し、宣言されていない場合はプロトタイプ全体を宣言し、何も実行しません。サンプルコードは次のとおりです:

function Person(name, age){ 
this.name = name; 
this.age = age; 
if (Person.prototype.speak == "undefined"){ 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
}

以上がJavaScript カスタム プロパティとメソッドのオブジェクト モデル コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。