JavaScript 建構函式

函式是JavaScript中使用最為頻繁的語法結構。

首先看幾段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
  console.log("螞蟻部落");
}
func();

宣告一個具名函式，並呼叫它，列印出字串“螞蟻部落”。

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

宣告一個匿名函式，並將其賦值給變數func，然後呼叫此函式。

最終列印出字串"螞蟻部落"。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = ()=>{
    console.log("螞蟻部落");
}
func();

宣告一個箭頭函式，並呼叫他它，列印出字串“螞蟻部落”。

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

特別說明：箭頭函式並不能用作建構函式。

一.普通函式與建構函式：

建構函式與普通函式身份的切換，在於函式的使用方式。

如果函式使用new呼叫，那麼它被用作建構函式，否則被用作普通函式。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
    this.webName="螞蟻部落";
    this.address="青島市南區";
    this.show=function(){
        console.log(this.webName);
    }
}
let ant=new func();
ant.show();

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

程式碼分析如下：

（1）.使用new呼叫函式，此函式就被稱作為建構函式。

（2）.建構函式會建立一個物件。

（3）.this指向建構函式建立的物件，並且繼承了建構函式原型所指向的物件。

更多細節可以參閱如下兩篇文章：

（1）.new可以參閱JavaScript new 運算子一章節。

（2）.原型可以參閱JavaScript prototype一章節。

二.建構函式中的return語句：

（1）.沒有return語句：

這是建構函式的普遍應用方式，建構函式的返回值就是物件例項。

在上面已經演示過了，下面再來看一個帶有原型的。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(webName,address){
    this.webName=webName;
    this.address=address;
    this.show=function(){
        console.log(this.webName);
    }
}
func.prototype.url="http://www.softwhy.com";
let oneAnt=new func("螞蟻部落","青島市南區");
let twoAnt=new func("百度","北京");
oneAnt.show();
twoAnt.show();

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

（2）.具有return語句：

具有return語句的建構函式較為複雜一些。

如果建構函式中的return返回值不是物件，那和沒有return語句完全一樣。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
    this.webName="螞蟻部落";
    this.address="青島市南區";
    this.show=function(){
        console.log(this.webName);
    }
    return 2;
}
let ant=new func();
ant.show();

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

建構函式return語句返回值是2，但是和沒有return語句一樣，建構函式的返回值依然是物件例項。

如果return語句的返回值是一個物件，那麼建構函式的返回值就是此物件。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function Antzone(){
  this.webName="螞蟻部落";
  return {
    age:6,
    url:"www.softwhy.com"
  }
}
let ant=new Antzone();
console.log(ant.constructor===Antzone);
console.log(ant.url);

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

有截圖可見，如果return的返回值是一個物件，那麼建構函式的返回值就是此物件。