建構函式與普通函式的區別

JavaScript中存在建構函式與函式兩個概念。

這可能會給初學者造成一定的困擾，難不成存在兩種函式。

然而事實這兩種函式的構成完全一樣，無論從長相還是氣質都是一模一樣的。

區別點在於，所扮演覺得不同，同一個人在不同的場合具有不同的角色。

就比如曹操對將要出征的曹彰所說"居家為父子受事為君臣"。

同是曹彰，在家裡與曹操的是父子關係，領兵在外則是上下級關係。

建構函式與普通函式也是如此，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
function Foo(){}  
Foo();
let f=new Foo();

Foo()是作為普通函式使用，使用new 呼叫則是作為建構函式使用。

使用方式的不同，自然會產生很多差別，下面分別做一下介紹。

一.首字母大小寫慣例：

這不是語法規定，而是使用慣例。

作為建構函式，函式的首字母通常會使用大寫形式，作為普通函式則習慣於用小寫形式。

建構函式扮演的就是標準面嚮物件語言中類的角色，ES2015新增class類概念。

遵循此原則有利於團隊合作開發，外觀即可推斷函式將要扮演的角色。

二.函式中this的指向不同：

普通函式中的this，在嚴格模式下指向undefined，非嚴格模式下指向window物件。

而建構函式的this則是指向它建立的物件例項。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Foo(){
  console.log(this===window);
}  
Foo();

程式碼執行效果截圖如下：

非嚴格模式下指向window物件，嚴格模式下指向undefined，不再演示。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Foo(){
  this.webName="螞蟻部落";
}  
let f=new Foo();
console.log(f.webName);

程式碼執行效果截圖如下：

建構函式中的this指向它所建立的物件例項。

三.return語句的使用:

普通函式通常要使用return語句返回一個值，如果沒有return語句預設返回undefined。

而建構函式則一般不需要return語句，當然也可以有return語句，感覺使用return完全沒有意義。

返回值分為兩種情況：

（1）.如果建構函式return一個值型別資料，那麼完全忽略此return語句，和沒有一樣。

（2）.如果建構函式return一個引用型別資料，那麼它的返回值就是此引用型別資料，而不是建立的物件例項。

四.箭頭函式：

ES2015新增箭頭函式，它只能作為普通使用，不能用作建構函式。

關於箭頭函式可以參閱JavaScript 箭頭函式一章節。