Javascript_javascript ヒントでカスタムオブジェクトを作成する方法の概要-jsチュートリアル-php.cn

Javascript_javascript ヒントでカスタムオブジェクトを作成する方法の概要

WBOY

リリース： 2016-05-16 16:29:12

オリジナル

1323 人が閲覧しました

JavaScript でオブジェクトを作成する方法はたくさんあります。

オブジェクトコンストラクター/オブジェクトリテラル:

デザインパターンは別として、最も基本的な方法は、最初に Object コンストラクターを呼び出してオブジェクトを作成し、次にそのオブジェクトにプロパティを追加することです。

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

var Student = new Object();

Student.name = "シャオミン";

Student.age = 20;

Student.getName = function () {

アラート(this.name);

}

JavaScript オブジェクトリテラルに慣れている学生は、少なくともより簡潔に見える、より良い記述方法に変更できます。

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

var 学生 = {

名前: "シャオホン"、

年齢: 18 歳、

getName: function () {

アラート(this.name);

}

};

欠点: 上記の方法の欠点は、同じインターフェイスを使用して多数の同様のオブジェクトを作成すると、大量の重複コードが生成されることです。これは簡単に理解できるはずです。通常、関数 (メソッドまたはクラス) はパブリックメソッドを作成するために使用されます。そのため、関数の影はまったくありません。

工場出荷時モード:

ファクトリパターンは、オブジェクトを作成する特定のプロセスを抽象化します。ブラックボックスのように、関数を呼び出して（工場に入り）、対応するパラメータ（さまざまな原材料）を渡すと、対応するオブジェクト（工場で生産される製品）が出てきます。ファクトリパターンは、複数の同様のオブジェクトを作成する問題を解決します。

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

関数studentFactory(名前,年齢) {

var Student = new Object();

Student.name = 名前;

Student.age = 年齢;

Student.sayName = function () {

アラート(this.name);

}

帰国生;

}

var p1 =studentFactory("ming", 20);

var p2 =studentFactory("hong", 18);

欠点: ファクトリパターンにも欠点があります。最大の欠点は、オブジェクトの種類の認識の問題です。オブジェクトの型が Object (p1 instanceof Object) であることだけが判断できますが、具体的にどの型であるかを判断することはできません。ファクトリパターンを使用して作成されたスチューデントは、実際には同様のプロパティとメソッドを持ちますが、値は異なります。現時点でのより良い解決策は、すべてのオブジェクトが Student タイプに属するように Student 関数を作成することです。つまり、ファクトリーパターンが悪いわけではなく、コンストラクターパターンの方が優れているというだけです。

カスタム型のコンストラクター:

コンストラクターを使用して、特定のタイプのオブジェクトを作成できます。

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

関数 Student(名前,年齢) {
This.name = 名前;
This.age = 年齢;
This.sayName = function () {
アラート(this.name);
}
}
var p3 = 新しい学生("ming", 20);
var p4 = 新しい学生("hong", 18);
アラート(学生の p3 インスタンス); アラート(p3.sayName==p4.sayName); //false

欠点: カスタムコンストラクターの欠点は、各オブジェクトが独自のメソッドを再作成することです。実際、これらのメソッドの機能は同じですが (sayName など)、同じではありません (p3.sayName と p4.sayName)。等しくありません）。

プロトタイプモード:

空の関数を定義し、すべてのプロパティとメソッドをプロトタイプに追加して、すべてのオブジェクトがこれらのプロパティとメソッドを共有するようにします。

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

関数 Student() {};

Student.prototype.name = "ミン";

Student.prototype.age = 20;

Student.prototype.friends = ['qi'];

Student.prototype.sayName = function () {

アラート(this.name);

};

欠点: 一部の属性は共有できず、共有すると問題が発生します。たとえば、友人。各クラスメートの友達のほとんどは異なります。

コンストラクターとプロトタイプの組み合わせ:

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

関数 Student(名前、年齢、友達) {

This.name = 名前;

This.age = 年齢;

This.friends = 友達;

}

Student.prototype = {

コンストラクター: 学生、

sayName: function () {

アラート(this.name);

}

};

概要: コンストラクターとプロトタイプの組み合わせは、カスタム型を作成する方法として広く認識されています。上記の方法の中で最も優れた方法でもあります。

/************************************************* ************************************************* *********/

実際には、上記のオブジェクトを作成する方法はたくさんありますが、継続的な最適化が必要な特殊なシナリオがいくつかある場合があります。

動的プロトタイプモード:

コンストラクターとプロトタイプの組み合わせの最適化です。これらの共有プロパティとメソッドについては、初期化されていれば、効率を向上させるために再度初期化する必要はありません。

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

function Student(名前, 年齢) {

This.name = 名前;

This.age = 年齢;

If ((typeof this.sayName) != "関数") {

Student.prototype.sayName = function () {

アラート(this.name);

}

}

}

var stu = new person("ming", 20);

//alert(学生のインスタンス);

stu.sayName();

var stuNew = new person("hong", 18);

//alert(stuNew instanceof Student);

stuNew.sayName();

複数の生徒オブジェクトを作成する場合、sayName メソッドは 1 回だけ初期化されます。

最後に、オブジェクトを作成する非常に便利な方法、つまり安全なコンストラクターがあります。

確実なコンストラクターパターン:

このモードでは、this と new の使用は禁止されており、すべてのオブジェクトはパブリック属性を持ちません。変数の値は読み取りのみ可能であり、変更はできません。

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

////確かなコンストラクターパターン

関数 Student(名前, 年齢) {

var o = new Object();

o.sayName = function () {

アラート(名前);

}

return o;

}

var stu = Student("ming", 21);

stu.sayName();

上記は、JavaScript でカスタムオブジェクトを作成するためのいくつかの一般的な方法をまとめたものです。より良いアイデアがあれば、この記事は継続的に更新されます。