[JavaScript] Constructor, Prototype (1)

• Constructor (建構函式)
• 建立一個新物件 (注：一定要使用 new，要不然會在 window 下建立)
• 設定新物件的 Constructor 屬性參照到 Constructor Function (注：Constructor 命名時，英文字的第一個字元都以大寫開始)
• 指派 this 參考到新物件，this 就代表新建立的物件
• 呼叫 Constructor Function 中的程式碼，設定物件的屬性 (屬性和方法會直接指派給 this 物件)
• 回傳一個新物件(不必在 Constructor Function 中使用 return 關鍵字回傳物件)
• Code 

function UserInfo(name, age){
    this.Name = name;
    this.Age = age;
    this.getAge = function(){
        return this.age;
    };
}
//或者
var UserInfo = function(name, age){
    this.Name = name;
    this.Age = age;
    this.getAge = function(){
        return this.age;
    };
}

var user1 = new UserInfo('Lyndon', 30);
var user2 = new UserInfo('Daisy', 25);

• 物件可用利用 instanceof 判斷型別，或者使用 constructor 來查看型別

• Prototype (類似繼承)
• 上方的範例，物件中包含 getAge function，但兩物件的 getAge function 卻不一樣

• 因 Constructor 為一個函式用來建立物件，利用相同的 Constructor 可以建立多個物件，每個物件包含自己的屬性，此每個物件裡的 function 都載入到自己的記憶體，而造成管理上的問題
• Prototype 可以讓使用相同 Constructor 建立起來的物件，共享 function 程式碼
• Constructor Function 建立的 JavaScript 物件都有一個 Prototype 屬性，實際上也是一個物件，可以用來新增屬性和方法

• Code

function UserInfo(name, age) {
    this.Name = name;
    this.Age = age;
}

UserInfo.prototype.getAge = function() {
    return this.age;
}

var user1 = new UserInfo('Lyndon', 30);
var user2 = new UserInfo('Daisy', 25);

• 下列結果可看見，getAge function 為相同，且在 user1 prototype 屬性中多了 getAge function

• 查看 UserInfo 的結構為如下

• 架構圖
• Constructor

• Constructor + Prototype

• REF 
• 恆逸 - U2750c