JavaScript 中構造函數與 new 命令

前言

典型的面向對象編程語言(比如C++和Java),存在“類”(class)這個概念。所謂“類”就是對象的模板,對象就是“類”的實例。但是,在 JavaScript 語言的對象體系,不是基于“類”的,而是基于構造函數(constructor)和原型鏈(prototype)。

1 對象的概念

“面向對象編程”(Object Oriented Programming,縮寫為OOP),是目前主流的編程范式。它的核心思想是將真實世界中各種復雜的關系,抽象為一個個對象,然后由對象之間的分工與合作,完成對真實世界的模擬。總結一下:

  1. 對象是單個實物的抽象
  2. 對象是一個容器,封裝了“屬性”和“方法”
  3. 所謂屬性,就是對象的一種狀態;所謂方法,就是對象的一種行為
  4. 比如說,可以把動物抽象為animal對象,屬性記錄的就是哪一種動物,以及該動物的大小和顏色等。方法表示該動物的某種行為(奔跑,獵食,交配,休息等等)。
2 構造函數
  1. “面向對象編程”的第一步,就是要生成對象。而js中面向對象編程是基于構造函數(constructor)和原型鏈(prototype)的。
  2. 前面說過,“對象”是單個實物的抽象。通常需要一個模板,表示某一類實物的共同特征,然后“對象”根據這個模板生成。js語言中使用構造函數(constructor)作為對象的模板。
  3. 所謂構造函數,就是提供一個生成對象的模板,并描述對象的基本結構的函數。一個構造函數,可以生成多個對象,每個對象都有相同的結構。
看一下構造函數的基本結構
var People = function() {
    this.name = 'xiaoyi'; // 注意這里xiaoyi要加單引號, 不然會認為這個是變量,并且未定義
    this.age = 25;
}
// 兩種寫法相同
function People() {
    this.name = 'xiaoyi';
    this.age = 25;
}

上面代碼中,People就是構造函數,它提供模板,用來生成對象實例。(就是可以按照這個方法定義別的變量)。為了與普通函數區別,構造函數名字的第一個字母通常大寫(這里的People,不大寫也不會報錯,但是還是按照規則比較好)。

構造函數的三大特點:
  1. 構造函數的函數名的第一個字母通常大寫。
  2. 函數體內使用this關鍵字,代表所要生成的對象實例。
  3. 生成對象的時候,必須使用 new 命令來調用構造函數。
3 new 命令
基本原理

new 命令的作用,就是執行一個構造函數,并且返回一個對象實例。使用new命令時,它后面的函數調用就不是正常的調用,而是依次執行下面的步驟。

  1. 創建一個空對象,作為將要返回的對象實例。
  2. 將空對象的原型指向了構造函數的prototype屬性。
  3. 將空對象賦值給構造函數內部的this關鍵字。
  4. 開始執行構造函數內部的代碼。

也就是說,構造函數內部,this指向的是一個新生成的空對象,所有針對this的操作,都會發生在這個空對象上。構造函數之所謂構造函數,意思是這個函數的目的就是操作一個空對象(即this對象),將其構造為需要的樣子。

以上是 new 命令的基本原理,這個很重要。以下會用具體實例來驗證該原理的過程。

基本用法

new 命令的作用,就是調用一個構造函數,并且返回一個對象實例。

function People() {
    this.age = 25;
}

var wll = new People();
console.log(wll.age);

上面代碼通過 new 命令,讓構造函數 People 生成一個對象實例,并賦值給全局變量 wll。這個新生成的對象實例,從構造函數 People 中繼承了 age 屬性。同時說明這個對象實例是沒有 age 屬性的。在 new 命令執行時,就代表了新生成的對象實例 wll,this.age 表示對象實例有一個age屬性,它的值是25。

使用 new 命令時,根據需要,構造函數也可以接受參數。
function People(name, age) {
    this.name = name;
    this.age = age;
}

var wll = new People('wangleilei', 25);
console.log(wll.name); // wangleilei
console.log(wll.age); // 25
console.log(wll); // People {name: "wangleilei", age: 25}
  1. 上面代碼中,我們創建了一個構造函數People,傳入了兩個參數 name 和age,構造函數 People 內部使用了 this 關鍵字來指向將要生成的對象實例。

  2. 然后,我們使用 new 命令來創建對象實例 wll。

  3. 當我們使用 new 命令來調用構造函數時,new 命令會創建一個空對象 wll,作為將要返回的實例對象。接著,這個空對象的原型會指向構造函數 People 的prototype屬性,即 People.prototype。

  4. 然后我們將這個空對象賦值給構造函數內部的this關鍵字,也就是說,讓構造函數內部的this關鍵字指向一個對象實例。最后,開始執行構造函數內部的代碼。

  5. 因為對象實例 wll 是沒有 name和age屬性的,所以對象實例中的兩個屬性都是繼承自構造函數 People中的,這也說明了構造函數是生成對象的函數,是給對象提供模板的函數。

一個問題,如果我們忘記使用 new 命令來調用構造函數,直接調用構造函數了,會發生什么?
function People() {
    this.age = 25;
}
var wll = People();
console.log(wll); // undefined
console.log(wll.age); // TypeError: wll is undefined
console.log(window.age); // 25

可見,這種情況下,構造函數變成了普通函數,并不會生成實例對象(wll 是 undefined)
并且,this 指向了全局作用域(如果有 new 則不會),age 也就變成了全局變量。

解決辦法:

1、 在構造函數內部使用嚴格模式,即第一行加上use strict。

function People() {
    'use strict';
    this.age = 25;
}
var wll = People();
console.log(wll); // Cannot set property 'age' of undefined
console.log(window.age);// undefined

嚴格模式下,函數內部的 this 不能指向全局對象,即便指向了全局,this 默認值等于undefined(如上代碼)。
2、另一個解決辦法,是在構造函數內部判斷是否使用 new 命令,如果發現沒有使用,則直接返回一個實例對象。

function People(age) {
if(!(this instanceof People)) {
    return new People(age);
    }
    this.age = age;
}
var wll = People(25);
console.log(wll.age); // 25

上面代碼中,構造函數不管加不加new命令,都會得到同樣的結果。

3、 如果構造函數內部有 return 語句,而且 return 后面跟著一個復雜數據類型(對象,數組等),new 命令會返回 return 語句指定的對象;如果 return 語句后面跟著一個簡單數據類型(字符串,布爾值,數字等),則會忽略 return 語句,返回 this 對象。

function People() {
    this.age = 25;
    return {
        age: 26
    };
}
var wll = new People();
console.log(wll.age); //26

function People() {
    this.age = 25;
    return 27;
}
var wll = new People();
console.log(wll.age); //25

4、另一方面,如果對普通函數(內部沒有this關鍵字的函數)使用 new 命令,則會返回一個空對象。

function People() {
    return 'its a message';
}
var wll = new People();
console.log(wll); // People {}

上面代碼中,對普通函數 People 使用 new 命令,會創建一個空對象。這是因為 new 命令總
是返回一個對象,要么是實例對象,要么是 return 語句指定的對象或數組。本例中,return 語句返回的是字符串,所以 new 命令就忽略了該語句。

來自 http://www.cnblogs.com/Uncle-Keith/p/5803551.html 有修改。謝謝!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,739評論 6 534
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,634評論 3 419
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,653評論 0 377
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,063評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,835評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,235評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,315評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,459評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,000評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,819評論 3 355
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,004評論 1 370
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,560評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,257評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,676評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,937評論 1 288
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,717評論 3 393
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,003評論 2 374

推薦閱讀更多精彩內容