ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptデザインパターンにおけるオブジェクトファクトリ関数とコンストラクタを詳しく解説_基礎知識

JavaScriptデザインパターンにおけるオブジェクトファクトリ関数とコンストラクタを詳しく解説_基礎知識

WBOY
WBOYオリジナル
2016-05-16 15:48:181165ブラウズ

以下は、JavaScript デザイン パターンのオブジェクト ファクトリ関数とコンストラクターに関する知識を共有するための詳細なテキスト説明とコード分析です。

概要 オブジェクト リテラルを使用するか、空のオブジェクトに新しいメンバーを動的に追加するのが、オブジェクトを作成する最も簡単な方法です。ただし、オブジェクト作成によく使用されるこれら 2 つのメソッドに加えて、JavaScript にはオブジェクトを作成するための他のメソッドも用意されています。 1).ファクトリ関数を使用してオブジェクトを作成します。この関数の機能は、オブジェクトを作成して変換することです。

概要

オブジェクト リテラルを使用するか、空のオブジェクトに新しいメンバーを動的に追加するのが、オブジェクトを作成する最も簡単な方法です。
ただし、オブジェクト作成によく使用されるこれら 2 つのメソッドに加えて、JavaScript にはオブジェクトを作成するための他のメソッドも用意されています。
1) ファクトリ関数を使用してオブジェクトを作成します

オブジェクトを作成する機能を持つ関数を作成できます。これは「オブジェクト ファクトリ メソッド」と呼ばれます。

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

//ファクトリー関数
function createperson(名前、年齢、職業) { var o = new Object(); o.name = 名前; o.age = 年齢; o.job = 仕事; o.sayName = function () { console.info(this.name);
};
return o; } //ファクトリ関数を使用してオブジェクトを作成します
var person1 = createperson('張三', 29, 'ソフトウェア エンジニア');
var person2 = createperson('李思', 40, 'Doctor');





2) オブジェクト コンストラクター

を定義します。
a) オブジェクト コンストラクターの最初の文字は大文字です b) このキーワードを内部で使用して、オブジェクト

にメンバーを追加します。 c). new キーワードを使用してオブジェクト コンストラクター を呼び出します。



コードをコピーします

コードは次のとおりです: //オブジェクト「コンストラクター」関数を定義 function 人(名前、年齢、職業) { this.name = 名前; this.age = 年齢; this.job = ジョブ;
this.sayName = function () {
console.info(this.name); };
} // new を使用してオブジェクト コンストラクターを呼び出し、オブジェクトを作成します
var p1 = 新しい人物('張三', 29, 'ソフトウェア エンジニア');
var p2 = new person('李思', 40, 'Doctor');


通常の方法で呼び出される「コンストラクター」


コンストラクターは実際には関数です。違いは、それを呼び出すときに「new」キーワードを追加する必要があることです。このキーワードが追加されていない場合、その呼び出しは通常の関数呼び出しとみなされます。


コードをコピーします

コードは次のとおりです:

//通常の関数によって呼び出されるコンストラクターとして、これを通じて属性が追加されます

//ウィンドウオブジェクトのプロパティとメソッドになります。 console.info(window.name);//張三 console.info(window.age) //29; console.info(window.job) //ソフトウェアエンジニア;
オブジェクト コンストラクターは次のようになります:




コードをコピーします

コードは次のとおりです:

関数 人 (名前) {

this.name = 名前; this.say = function () { return "私は " this.name; }; }
実際には次のようになります (シグナリング):





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


関数 人 (名前) {
// var this = {};
this.name = 名前;
this.say = function () {
return "私は " this.name;
};
// これを返します;
}

コンストラクターによって実行される作業

1. 新しいオブジェクトを作成します
2. コンストラクターの this に新しく作成したオブジェクト
を参照させます 3. コンストラクターでコードを実行します。これにより、通常は新しいオブジェクト
にプロパティを追加する作業が完了します。 4. 新しく作成したオブジェクト参照を外部に返します。
オブジェクト コンストラクターとオブジェクト ファクトリ メソッドの違い

1. オブジェクト コンストラクターには明示的なオブジェクト作成コードがありません
2. 新しいオブジェクトが持つ必要がある属性とメソッドは、この参照を通じて追加されます。
3. オブジェクト コンストラクター
に return ステートメントがありません。
通常、オブジェクト コンストラクターの最初の文字は、通常の関数と区別するために大文字に設定されます。
オブジェクト

のコンストラクタープロパティ

a) オブジェクト ファクトリ関数を使用してオブジェクトを作成し、各オブジェクトのコンストラクター プロパティは Object()

を参照します。

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

var person = createperson('張三', 29, 'ソフトウェアエンジニア');
// ファクトリ メソッドを使用してオブジェクトを作成します。

コンストラクター属性は Object() 関数を参照します
console.info(person1.constructor === オブジェクト);

//本当


b). オブジェクト コンストラクターを使用してオブジェクトを作成し、各オブジェクトのコンストラクター属性はこのコンストラクター を参照します。

コードをコピーします コードは次のとおりです:
var p = 新しい人('張三', 29, 'ソフトウェアエンジニア');
// オブジェクト コンストラクター
を使用してオブジェクトを作成します //各オブジェクトのコンストラクター属性はこのコンストラクターを参照します
console.info(p.constructor === 人);
//True new の「忘れ」を避けるには、arguments.callee を使用してこの問題を解決できます
//arguments.callee の役割を理解する
関数 TestArgumentsCallee()
{ console.info(this);
console.info(TestArgumentsCallee のこのインスタンス); console.info(arguments.callee のインスタンス)
};
TestArgumentsCallee(); //ウィンドウ
//false //false
new TestArgumentsCallee(); //TestArgumentsCallee //真実
//本当



つまり、arguments.callee を直接使用できます


コードをコピー

コードは次のとおりです:


//新しい
を忘れないようにする 関数 MyObject(値)
{
if (!(引数のこのインスタンス.呼び出し先))

{ //発信者が新規追加を忘れた場合は、新規追加して再度呼び出してください

新しい MyObject(値) を返します;

}
this.prop = 値
}
//テスト
var obj1 = 新しい MyObject(100); console.info(obj1.prop);//100
var obj2 = MyObject(200);
console.info(obj2.prop) //200


上記の内容は、JavaScript デザイン パターンのオブジェクト ファクトリ関数とコンストラクターについて詳しく説明したものです。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。