[JavaScriptWeird]No.46 危險小叮嚀：「new」與函式

發表於 | 更新於 | 分類於

前言

還記得函式建構子是如何運作的嗎？當執行環境執行時， this 變數指向空物件，如果不回傳任何東西的話，預設回傳新物件。而當我們用函式建構子時，它們仍然是一般的函式，只是在前面加上 new 運算子，然而危險的部分也在這裡。

使用先前的範例來說明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function person(firstName, lastName){  
    this.firstName = firstName;  
    this.lastName = lastName;  
    this.getFullName = function(){  
      return this.firstName + ' ' + this.lastName;  
    }  
}

person.prototype.getFullName = function(){  
  return this.firstName + ' ' + this.lastName;  
}

var john = person('Doe', 'john');  
var joan = person('Mar', 'joan');  
console.log(john);  
console.log(joan);  
person.prototype.getFormalFullName = function(){  
  return this.firstName;  
}  
console.log(john.getFormalFullName());

如果把 new 運算子拿掉會如何呢？

當我們忘記放上 new 關鍵字時，後面跟著的是一般的無回傳函式，所以運行後沒有回傳任何東西給變數，因此變數的值為 undefined 。

當取用 getFormalFullName 方法時，因為此時 john 並非物件，而是 undefined ，所以沒辦法到原型鏈上尋找方法，因此跳出錯誤。

如何避免忘記放上 new 呢？

課程中講師有提到似乎有一些約定成俗的習慣，就是:

任何要做為函式建構子的函式，首字母大寫

這樣子就能馬上認出哪個地方少了 new 運算子，或者是使用 Linters 輔助撰寫程式碼。

0%