JavaScriptオブジェクトを作成するいくつかのパターン
10467 ワード
JavaScriptではObjectのコンストラクタや文字どおりの量で個々のオブジェクトを作成することができますが、これらの方法で複数のオブジェクトを作成する際に明らかな欠点があり、多くの重複コードが発生します.これらの問題を解決するために、多くのパターンが生まれました.
1.工場モード
ECMAScriptではクラスを作成できないので、特定のインターフェースでオブジェクトを作成するための詳細をパッケージ化するための関数が発明された.
しかし、このように作成されたオブジェクトには、オブジェクト識別問題が解決されていません.つまり、オブジェクトの種類はどのように分かりますか?
このように作成されたオブジェクトは同じタイプで、以下の例では、すべてのオブジェクトはPersonタイプである.
だから改善できます.
このパターンを理解するには、プロトタイプを理解する必要があります.
このモードには大きな問題があります.つまり、すべてのオブジェクトの属性と方法が共有されています.しかし、PersonクラスにこのsayName方法を共有してもらいたいだけかもしれません.みんなが思いつきました.構造関数モード+プロトタイプモードでこの問題を解決できます.
構成関数でインスタンス属性を定義し、共有されていないデータを保存し、原型モードで共有の方法と属性を定義することで、メモリオーバヘッドをできるだけ減らすことができる.
cxiクラスのメンバーやスタティックメンバーに似ていますが、似ているだけです.
この中のモードは現在最も広く使われています.最高と認められています.
基本的な考え方は、オブジェクトを作成するコードをパッケージ化し、新規作成したオブジェクトに戻す機能です.
7.コンストラクタモード
寄生構造関数モードと似ていますが、2つの異なる点があります.1つは、オブジェクトを作成するための例示的な方法は、thisを参照しないこと、2つはnewを使用して構造関数を呼び出しないことです.
1.工場モード
ECMAScriptではクラスを作成できないので、特定のインターフェースでオブジェクトを作成するための詳細をパッケージ化するための関数が発明された.
しかし、このように作成されたオブジェクトには、オブジェクト識別問題が解決されていません.つまり、オブジェクトの種類はどのように分かりますか?
function createPerson(name,age,job)
{
var o = new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayHellow=function()
{alert("Hellow"+o.name)};
return o;
}
var person1 = createPerson("Jack",34,"Doctor");
2.コンストラクタモードこのように作成されたオブジェクトは同じタイプで、以下の例では、すべてのオブジェクトはPersonタイプである.
function Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
this.sayName = function()
{
alert("Hello, "+this.name);
}
}
var person1 = new Person("Jack",24,"Doctor");
var person2 = new Person("Simon",34,"Teacher");
alert(person1 instanceof Object); // true
alert(person1 instanceof Person); // true
alert(person2 instanceof Object); // true
alert(person2 instanceof Person); // true
しかし、このモードにも欠点があります.各方法は各オブジェクトのインスタンスの中で再作成します.上記の例のように、person 1とperson 2のsayName方法は、Functionの同じ例ではなく、2つの異なる位置に位置する関数ポインタである.だから改善できます.
function Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
this.sayName = sayName;
}
function sayName()
{
alert("Hello, "+this.name);
}
var person1 = new Person("Jack",24,"Doctor");
var person2 = new Person("Simon",34,"Teacher");
alert(person1 instanceof Object); // true
alert(person1 instanceof Person); // true
alert(person2 instanceof Object); // true
alert(person2 instanceof Person); // true
3.原型モードこのパターンを理解するには、プロトタイプを理解する必要があります.
このモードには大きな問題があります.つまり、すべてのオブジェクトの属性と方法が共有されています.しかし、PersonクラスにこのsayName方法を共有してもらいたいだけかもしれません.みんなが思いつきました.構造関数モード+プロトタイプモードでこの問題を解決できます.
function Person(){}
Person.prototype.name="Jack";
Person.prototype.age=33;
Person.prototype.job="IT";
Person.prototype.sayName = function(){alert("Hellow"+ this.name);};
//
function Person(){}
Person.prototype =
{
name: "Jack",
age: 33,
job: "IT",
sayName=function(){alert("Hellow "+this.name);}
}
4.コンストラクターモードとプロトタイプモードを組み合わせる構成関数でインスタンス属性を定義し、共有されていないデータを保存し、原型モードで共有の方法と属性を定義することで、メモリオーバヘッドをできるだけ減らすことができる.
cxiクラスのメンバーやスタティックメンバーに似ていますが、似ているだけです.
この中のモードは現在最も広く使われています.最高と認められています.
function Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
this.friends=["Toby","Linford"];
}
Person.prototype=
{
constructor: Person,
sayName: function(){alert(this.name);}
}
var person1 = new Person("Jack",33,"SDE");
var person2 = new Person("Lucy",25,"Teacher");
person1.friends.push("Jim");
alert(person1.friends); // Toby,Linford,Jim
alert(person2.friends); // Toby,Linford
alert(person1.friends==person2.friends); // false
alert(person1.sayName==person2.sayName); //true
5.ダイナミックモデルfunction Person(name,age,job)
{
this.name=name;
this.age=age;
this.job=job;
if(typeof sayName != "function")
{
Person.prototype.sayName=function()
{
alert(this.name);
}
};
}
6.寄生構造関数モード基本的な考え方は、オブジェクトを作成するコードをパッケージ化し、新規作成したオブジェクトに戻す機能です.
function createPerson(name,age,job)
{
var o = new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayHellow=function()
{alert("Hellow"+o.name)};
return o;
}
var person1 = createPerson("Jack",34,"Doctor");
上のコードから見ると、工場のモデルと同じです.しかしこのモードは特殊な場合にはオブジェクト(特にArayなどの内蔵オブジェクト)に構造関数を追加することができる.7.コンストラクタモード
寄生構造関数モードと似ていますが、2つの異なる点があります.1つは、オブジェクトを作成するための例示的な方法は、thisを参照しないこと、2つはnewを使用して構造関数を呼び出しないことです.
function Person(name, age, job)
{
//
var o = new Object();
//
//
o.sayName=function(){alert(name);};
return o;
}
上記の例では、sayNameを通じてのみnameにアクセスできます.