普通函數與構造函數的區別

JavaScript中存在構造函數與函數兩個概念。

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

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

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

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

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

構造函數與普通函數也是如此，代碼實例如下：

function Foo(){}  
Foo();
let f=new Foo();

Foo()是作為普通函數使用，使用new 調用則是作為構造函數使用。

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

一.首字母大小寫慣例：

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

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

構造函數扮演的就是標准面向對象語言中類的角色，ES2015新增class類概念。

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

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

普通函數中的this，在嚴格模式下指向undefined，非嚴格模式下指向window對象。

而構造函數的this則是指向它創建的對象實例。

function Foo(){
  console.log(this===window);
}  
Foo();

代碼運行效果截圖如下：

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

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新增箭頭函數，它只能作為普通使用，不能用作構造函數。