JavaScript 函式 name 屬性

顧名思義，函式的name屬性可以返回函式的名稱，無論是理解還是應用都非常簡單。

但是此屬性還有許多細節需要多加註意，下面結合程式碼例項進行一下詳細介紹。

特別說明：name屬性早已得到瀏覽器廣泛支援，不過直到ES2015才將其標準化。

關於ES2015更多函式新特性可以參閱ES2015函式新增特性一章節。

首先看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
  // code
}
console.log(func.name);

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

上述程式碼可以列印出函式的名稱"func"。

JavaScript函式有具名函式，也有匿名函式，下面再來看一下匿名函式的name屬性的返回值。

關於匿名函式可以參閱JavaScript 匿名函式一章節。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
console.log((function(){
  // code
}).name=="");

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

上面函式很明顯是匿名的，name屬性返回一個空字元，在所有瀏覽器表現都一致。

還有一種匿名函式稍稍有一點迷惑人，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func = function() { };
let object = {
  someMethod: function() {}
};
console.log(func .name);
console.log(object.someMethod.name);;

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

程式碼分析如下：

（1）.上面程式碼可能會給初學者帶來一定的困擾，好像函式都是有名字，func和someMethod。

（2）.其實並不是，上面程式碼只是將建立的匿名函式賦值給變數或者作為物件屬性值而已。

（3）.既然是匿名函式，那麼是不是列印結果是空字元呢，事實並不是，而是列印出對應的變數名和屬性名。

（4）.在文章釋出之日，具有一定的瀏覽器相容性，谷歌和火狐結果一致（如上圖），在edge瀏覽器第一個列印空，第二個列印someMethod，不過隨著時間的推移，列印結果隨時可能發生變化，一切以實測為準。通過new Function()或者直接Function()也可以建立匿名函式，那麼此時name屬性的返回值是什麼呢，看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let func1=new Function()
let func2=Function();
console.log(func1.name);
console.log(func2.name);

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

此時列印結果為"anonymous"，除去IE瀏覽器，其他各主流瀏覽器表現一致。

再返回頭看一下如果具名函式賦值給變數或者作為物件屬性值是什麼情況，程式碼如下：

可以看到，此時函式的名稱不是變數或者屬性名，而是函式宣告時規定的名稱。

大家知道，function函式可以與bind配合使用，此時函式的名字比較有特點，看如下程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func() {
  //code
};
console.log(func.bind({}).name)

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

可以看到，返回值並不僅僅是"func"，前面加了一個bound字首。

最後再強調一個事實，函式的name屬性是隻讀的，即便為其重新賦值，也沒有任何效果。