js的構造函數理解

原型和原型鏈是 JavaScript 中最經典的問題之一，而構造函數又是原型和原型鏈的基礎，所以先了解清楚構造函數以及它的執行過程可以更好地幫助我們學習原型和原型鏈的知識。

1、什麼是構造函數

在 JavaScript 中，用 new 關鍵字來調用的函數，稱爲構造函數。函數首字母大寫

2、爲什麼要使用構造函數？

學習每一個概念，不僅要知道它是什麼，還要知道爲什麼，以及解決什麼樣的問題。

舉個例子，我們要錄入一年級一班中每一位同學的個人信息，那麼我們可以創建一些對象，比如：

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
// ...

像上面這樣，我們可以把每一位同學的信息當做一個對象來處理。但是，我們會發現，我們重複地寫了很多無意義的代碼。比如 name、age、gender、hobby 。如果這個班上有60個學生，我們得重複寫60遍。

這個時候，構造函數的優勢就體現出來了。我們發現，雖然每位同學都有 name、gender、hobby這些屬性， 但它們都是不同的，那我們就把這些屬性當做構造函數的參數傳遞進去。而由於都是一年級的學生，age 基本都是6歲，所以我們就可以寫死，遇到特殊情況再單獨做處理即可。此時，我們就可以創建以下的函數：

function Person(name, gender, hobby) {
    this.name = name;
    this.gender = gender;
    this.hobby = hobby;
    this.age = 6;
}

當創建上面的函數以後， 我們就可以通過 new 關鍵字調用，也就是通過構造函數來創建對象了。

var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
// ...

此時你會發現，創建對象會變得非常方便。所以，雖然封裝構造函數的過程會比較麻煩，但一旦封裝成功，我們再創建對象就會變得非常輕鬆，這也是我們爲什麼要使用構造函數的原因。

在使用對象字面量創建一系列同一類型的對象時，這些對象可能具有一些相似的特徵(屬性)和行爲(方法)，此時會產生很多重複的代碼，而使用構造函數就可以實現代碼的複用。

3、構造函數的執行過程

先說一點基本概念。

function Animal(color) {
 this.color = color;
}

當一個函數創建好以後，我們並不知道它是不是構造函數，即使像上面的例子一樣，函數名爲大寫，我們也不能確定。只有當一個函數以 new 關鍵字來調用的時候，我們才能說它是一個構造函數。就像下面這樣：

var dog = new Animal("black");

以下我們只討論構造函數的執行過程，也就是以 new 關鍵字來調用的情況。

我們還是以上面的 Person 爲例。

function Person(name, gender, hobby) {
 this.name = name;
 this.gender = gender;
 this.hobby = hobby;
 this.age = 6;
}

var p1 = new Person('zs', '男', 'basketball');

此時，構造函數會有以下幾個執行過程：

(1) 當以 new 關鍵字調用時，會創建一個新的內存空間，標記爲 Animal 的實例。

(2)函數體內部的 this 指向該內存

通過以上兩步，我們就可以得出這樣的結論。

var p2 = new Person('ls', '女', 'dancing');  // 創建一個新的內存 #f2
var p3 = new Person('ww', '女', 'singing');  // 創建一個新的內存 #f3

每當創建一個實例的時候，就會創建一個新的內存空間(#f2, #f3)，創建 #f2 的時候，函數體內部的 this 指向 #f2, 創建 #f3 的時候，函數體內部的 this 指向 #f3。

(3) 執行函數體內的代碼
通過上面的講解，你就可以知道，給 this 添加屬性，就相當於給實例添加屬性。

(4) 默認返回 this

由於函數體內部的this指向新創建的內存空間，默認返回 this ，就相當於默認返回了該內存空間，也就是上圖中的 #f1。此時，#f1的內存空間被變量p1所接受。也就是說 p1 這個變量，保存的內存地址就是 #f1，同時被標記爲 Person 的實例。

以上就是構造函數的整個執行過程。

4、構造函數的返回值

構造函數執行過程的最後一步是默認返回 this 。言外之意，構造函數的返回值還有其它情況。下面我們就來聊聊關於構造函數返回值的問題。

(1) 沒有手動添加返回值，默認返回 this

function Person1() {
 this.name = 'zhangsan';
}

var p1 = new Person1();

按照上面講的，我們複習一遍。首先，當用 new 關鍵字調用時，產生一個新的內存空間 #f11，並標記爲 Person1 的實例；接着，函數體內部的 this 指向該內存空間 #f11；執行函數體內部的代碼；由於函數體內部的this 指向該內存空間，而該內存空間又被變量 p1 所接收，所以 p1 中就會有一個 name 屬性，屬性值爲 ‘zhangsan’。

p1: {
 name: 'zhangsan'
}

(2) 手動添加一個基本數據類型的返回值，最終還是返回 this

function Person2() {
 this.age = 28;
 return 50;
}

var p2 = new Person2();
console.log(p2.age);   // 28
p2: {
 age: 28
}

如果上面是一個普通函數的調用，那麼返回值就是 50。

(3) 手動添加一個複雜數據類型(對象)的返回值，最終返回該對象

直接上例子

function Person3() {
 this.height = '180';
 return ['a', 'b', 'c'];
}

var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3
console.log(p3[0]);      // 'a'

再來一個例子

function Person4() {
  this.gender = '男';
  return { gender: '中性' };
}

var p4 = new Person4();
console.log(p4.gender);  // '中性'

5構造函數首字母必須大寫嗎？

大小寫都可以

6不用new關鍵字，直接運行構造函數，是否會出錯？如果不會出錯，那麼，用new和不用new調用構造函數，有什麼區別？

1. 使用new操作符調用函數

例子：

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"

用new調用構造函數，函數內部會發生如下變化：

創建一個this變量，該變量指向一個空對象。並且該對象繼承函數的原型；
屬性和方法被加入到this引用的對象中；
隱式返回this對象（如果沒有顯性返回其他對象）
用僞程序來展示上述變化：

function Person(name){
  // 創建this變量，指向空對象
  var this = {}; 
  // 屬性和方法被加入到this引用的對象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this對象
  return this;
}

可以看出，用new調用構造函數，最大特點爲，this對象指向構造函數生成的對象，所以，person1.say()會返回字符串： “I am nicole”。

小貼士

如果指定了返回對象，那麼，this對象可能被丟失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"

2. 直接調用函數

如果直接調用函數，那麼，this對象指向window，並且，不會默認返回任何對象（除非顯性聲明返回值）。

還是拿Person函數爲例，直接調用Person函數：

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole

可見，直接調用構造函數的結果，並不是我們想要的。

3.小結

爲了防止因爲忘記使用new關鍵字而調用構造函數，可以加一些判斷條件強行調用new關鍵字，代碼如下：

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa