JavaScriptオブジェクトを作成するいくつかのパターン

10467 ワード

JavaScriptではObjectのコンストラクタや文字どおりの量で個々のオブジェクトを作成することができますが、これらの方法で複数のオブジェクトを作成する際に明らかな欠点があり、多くの重複コードが発生します.これらの問題を解決するために、多くのパターンが生まれました.
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にアクセスできます.