JavaScript カスタム タイプ_JavaScript スキル

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

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

var person = new Object();
person.name = "サム";
person.speak = function(){
alert(this.name) age "year 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.speak = function(){

alert(this.name "は " .age "歳" );

}
}
var person1 = 新しい人("サム", 16)
var person2 = 新しい人("ジャック", 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 = 年齢; this.speak = speech; }

function speech(){

alert(this.name "は " this.age " 歳です");
}
var person1 = 新しい人物("サム", 16);
var person2 = 新しい人物("ジャック", 18)
alert(person1.speak == person2.speak); ; // 真


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

コードをコピーします。 コードは次のとおりです。

function person(){ }
person.prototype.name="サム";
person.prototype.age=16;
person.prototype.speak = function(){
alert( this.name "は " この .age " 歳です");
}
var person1 = new Person();
var person2 = new Person();
alert(person1. speech == person2.speak); // true

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

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

関数 人(名前, 年齢){
この.名前 = 名前;
この.年齢 = 年齢;
人.prototype.speak = function(){
アラート(この.name "は " この .age " 歳です");
var person1 = new person();
var person2 = new person(); 🎜>alert(person1.speak == person2.speak); // true


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

コードをコピー

コードは次のとおりです。 関数 人(名前, 年齢){ この.名前 = 名前; この.年齢 = 年齢;

if (人.prototype.speak == "未定義"){

人.プロトタイプ.speak = function() {
alert(this.name "は " this.age " 歳です")
}
}
}