大家都知道原型和原型鏈是 JavaScript 中最經典的問題之一,而構造函數又是原型和原型鏈的基礎,所以先了解清楚構造函數以及它的執行過程可以更好地幫助我們學習原型和原型鏈的知識。
本文將從以下幾個方面來探討構造函數:
1.什么是構造函數
2.為什么要使用構造函數
3.構造函數的執行過程
4.構造函數的返回值
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 的實例。

1 創建內存空間
(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); // '中性'
關於構造函數的返回值,無非就是以上幾種情況