JavaScript対象の作成対象学習ノート

私たちはこのような需要があると仮定します.名前と年齢を記録して、その人の名前と年齢を表示する方法があります.
普通の方法で、私達のコードはこうなるべきです.
　　

var person1 = new Object() ,
    person2 = new Object() ;

person1.name = "TOM" ;
person1.age = 18 ;
person1.show = function () {
    alert ("Name:" + this.name + " ; Age:" + this.age);        
}
person2.name = "LiLei" ;
person2.age = 22 ;
person2.show = function () {
    alert ("Name:" + this.name + " ; Age:" + this.age);        
}

　　
以上の書き方は需要を解決できましたが、お父さんによくないです.私たちは無意味な反復作業の中にいましょう.
これらの問題を解決するために、人々は新しい方法でこの問題を解決し始めました.
 
一、工場モデル
　　

function createperson(name,age) {
    o = new Object() ;
    o.name = name ;
    o.age = age ;
    o.show = function(){
        alert("Name:" + this.name + " ;Age:" +this.age);
    }
    return o;
}
    var person1 = createperson("TOM",18);
    var person2 = createperson("LiLei",20);

 このモードは、複数のオブジェクトを作成する前に発生した重複コードの問題を解決したが、オブジェクト識別の問題は解決されなかった.つまり、この対象のタイプは何ですか?
 
二、コンストラクタモード
　　

function Person(name,age){
    this.name = name ;
    this.age = age ;
    this.show = function() {
        alert("Name:" + this.name + " ;Age:" + this.age);
    };
}

var person1 = new Person("Tom",18);
var person2 = new Person("LiLei",20);

 
コンストラクタは常に頭文字でPerson()のように始まる.
作成したオブジェクトは、constructor属性を使用して、Personに向けられていることが分かります.
しかし、この方法には欠点がありません.person 1とperson 2は同じ方法を持っています.つまりショーです.ここでは二回も実例化されました.これはメモリ管理に大きな浪費をもたらしました.したがって、私たちはこの関数を少し変えることができます.

function Person(name,age) {
    this.name = name ;
    this.age = age;
    this.show = show();
}

//        
function show() {
    alert("Name:" + this.name + " ;Age:" + this.age);
}

var person1 = new Person("Tom",18);
var person2 = new Person("LiLei",20);

このように、person 1とperson 2は同じ方法でショーを楽しむことができます.
しかし、これはまだ足りないです.全体関数を作成すると、他の人が他のところでこの機能を書き換えてしまい、対象のパッケージ性を低下させます.
 
 
三、原型モード
 

function Person() {

}
var friends = new Person();


Person.prototype.friends = ['Lucy'] ;
//                 。    friends          ,       。
Person.prototype = {
    name : "Tom",
    age : 18,
    show : function() {
        alert("Name:" + this.name + " Age:" + this.age);
    }
}

//          friends    friends        
Person.prototype.friends = ['Lucy','Lily'] ;

var person1 = new Person();
var person2 = new Person();

person2.name = "LiLei";        // person2   name   LiLei
person1.name = "HanMei";        //person1  name   HanMei
delete person1.name;            //person1   name     prototype(  )    name   Tom
//                      
//           ,        ，         ，  ，        。

alert( friends.friends )        //   ['Lucy'] ;        Person            friends。
alert( friends.name )           //     。                       ，  friends           。

person1.friends.push("Jim");

alert( person1.friends );        //    ['Lucy','Lily',"Jim"]
alert( person2.friends );        //    ['Lucy','Lily',"Jim"]

//    Person     friends     ['Lucy','Lily']    ,
// Person1          ，      ，          。
//      Person2.friends     。
//           ，        ！

 プロトタイプモードは構造関数モードでは解決できない問題を解決しましたが、上記のように見たくないエラーが発生する可能性があります.そのため、私たちはこの二つのパターンを組み合わせて、私たちの要求を満たすことができます.
 
四、コンストラクタモードとプロトタイプモードを組み合わせて使う
　　

function Person(name,age) {
    this.name = name ;
    this.age = age ;
    this.friends = [ "Lucy","Lily" ];
}

Person.prototype = {
    constructor:Person,
    show:function(){
        alert( "Name:" + this.name + " ;Age:" + this.age );
    }
}

var person1 = new Person("Tom",18);
var person2 = new Person("LiLei",20);

person1.friends.push("Jim");

alert(person1.friends);  //     ["Lucy","Lily","Jim"]    
alert(person2.friends);  //     ["Lucy","Lily"]

すべてのインスタンス属性を構造関数において宣言し、すべてのインスタンスで共有される属性と方法をプロトタイプに定義します.
コンストラクターとプロトタイプの混合使用は、現在最も広く認知度が高い方法を使用しています.
 
 五、ダイナミックモデル
　　

function Person(name,age){
    this.name = name;
    this.age = age;
    
    if (typeof this.show != "function") { Person.prototype.show = function () { alert("Name" + this.name + " ;Age:" + this.age); } }
}

var person1 = new Person("Tom",18);
//    Person           ，               show()

var person2 = new Person("LiLei",20);
person2.show();    
//                   show()   ， person2      ;

 
このような情報はすべて(属性と方法を含む) 全部一つのコンストラクタに集中します.
視覚的に見れば、構造関数の中ですべての属性と方法を見ることができ、後で修正することができます.
 
六、寄生構造関数モード

function Person(name,age) {
    var o = new Object() ;
    o.name = name ;
    o.age = age ;
    o.show = function () {
        alert("Name:" + this.name + " ;Age:" + this.age) ;
    };
    
    return o;
}

function SpecialPerson(name,age) {
　　var o = new Person(name,age) ;
　　o.showage = function () {
　　　　alert (this.age);
　　};
　　
　　return o;
}

var person1 = new Person("Tom",18);
var person2 = new Person("LiLei",20);

person1.showage()　　// 18
person2.showage()　　// ERROR

最後のnewを除いて、残りはほとんど工場のモデルと同じです.
直接に修正できない構造関数に出会うと,この構造関数に他の関数を寄生させて,本来ない機能を追加することができる.
 
 
七、安定構造関数モード

function Person(name,age) {
    var o = new Object() ;
    
    o.show = function () {
        alert("Name:" + name + " ;Age:" + age);
    }
    
    return o;
}

var person1 = Person("Tom",18);
person1.show();

現在の環境ではnewやthisは使用できません.内定のいくつかの方法でしか値を取得できません.外部から構成関数に値を入れる他の方法はなく、安全性を提供しています.安全な環境での使用に適しています.