[筆記] JavaScript 的基本觀念 – 16 – new 和 constructor function 函數建構子 @地瓜大的飛翔旅程

章節連結

課程對應章節
內容
JavaScript 全攻略系列文章

雖說在 JavaScript 並沒有像 class 這樣的結構，但這樣的設計跟當初為了吸引 Java的使用者有關，所以採用類似的寫法。在實際運行時，JavaScript 是先透過一個函式建構子constructor function 來建立一個物件，並指向一個特定的記憶體位置，然後 invoke 函式內的內容，來新增其物件的key-value對內容。

課程對應章節

Course 57 ~ Course 59 (全部一共有 85 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/w7vrql6

內容

1. 在 constructor function 中，若沒有指定回傳值，那麼運用 new 時，就會自動回傳所建立的物件，並不需要特別指定。
2. 承上，若你指定回傳的東西，那麼原先建立的內容會被全部覆蓋。
3. 若你忘記使用 new，那麼你實際呼叫時，會得到任何新增變數的預設值 “undefined”。
4. 函式中的 prototype，預設是一個空物件，你可以使用 .prototype 來新增方法、key-value 對到函式中。
5. 為了減少記憶體的使用量，當你要新增一個共用的方法時，你可以加入到 .protype 中讓新建立的物件自然都帶有此方法。如此一來，便可減少記憶體用量。

/*Example*/
/*1. 讓具備有相同 key 的物件，可以快速的用 new 建立*/
/*因為每一個人都具有不同的姓氏，所以要個別建立*/
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

/*2. 每個人的物件，都要內建一個 getFullName 的方法，那麼統一在 .prototype 造一份就可以*/
/*函式在建立時，會運用 prototype chain 去遍歷每一個 prototype 是否有名為 getFullName 的方法*/
Person.prototype.getFullName = function () {
  return this.firstName + ' ' + this.lastName;
}
Person.prototype.getFormalFullName = function () {
  return this.lastName + ',' + this.firstName;
}

/*3.輸出*/
var jane = new Person('Jane', 'Doe');
console.log(jane) //印出 Jane 這個物件
console.log(jane.getFullName()) // Jane Doe
console.log(jane.getFormalFullName()) // Jane,Doe