解析JavaScript函數的多種寫法

本文主要分析了JavaScript中函數的幾種寫法，具體如下：

1、函數的聲明和表達式（舊方法，也是最常見的方法） 

1 //函數聲明  
2 function aaA(){}  

1  //命名函數表達式  
2 (function aaA(){});  
3 //需要註意的是，因為整個表達式被一對()包裹，函數的作用於僅僅在()內，在()外部無法訪問到函數

1  //匿名函數表達式  
2 (function (){}); 

2、通過Function構造器

這也是一種從一開始就存在方法，但是因為書寫麻煩等原因，相對使用較少

1  new Function('x','y','return x+y;');  

3、自從ECMAScript 2015(es6)推出以後，又引進了幾種新的語法，具體如下：

    (1)not-so-anonymous函數聲明

    這是一種新的匿名函數聲明形式，如果使用過ES Modules的，就知道這種語法。雖然在表達上它與匿名函數非常相似，但它實際上有一個預設的名稱‘default’。

1 export default function(){}  

此處，這個‘default’本身不是有效的標識符，並且沒有綁定在該匿名函數上。

    (2)方法定義

    對於以下例子，我們可以很容易發現它定義了匿名和命名函數表達式作為屬性的值。這些其實不是不同的語法形式，而是之前討論的函數表達式的示例，是在初始化對象時編寫的。

let object={  
　　fn:function(){}  
};  
let object={  
　　fn:function aaA(){}  
};  

以上形式最初在ES3中定義，在ES5中引入了訪問器屬性定義：

1 let object={  
2     get fn(){},  
3     set fn(val){}  
4 };  

從ES6開始，JavaScript提供了一個簡單的語法來定義方法，這種語法包括文字屬性名稱和計算屬性名稱以及訪問器形式：

1 let object={  
2     textName(){},  
3     ['computedName'](){},  
4     get ['computedAName'](){},  
5     set ['computedAName'](val){}  
6 };  

我們還可以使用這些新形式作為類聲明和表達式中的原型方法和定義：

1 let object={  
2     textName(){},  
3     ['computedName'](){},  
4     get ['computedAName'](){},  
5     set ['computedAName'](val){}  
6 };  

1 //類表達式  
2 let C=class{
3       textName(){},
4       ['computedName'](){},
5       get ['computedAName'](){},
6       set ['computedAName'](val){}
7 };  

以及靜態方法：

1  //類聲明  
2 class C{     
3 　　static textName(){},  
4 　　static ['computedName'](){},  
5 　　get ['computedAName'](){},     
6 　　set ['computedAName'](val){}  
7 };  

1 //類表達式  
2 let C=class{     
3     static textName(){},  
4     static ['computedName'](){},  
5     get ['computedAName'](){},  
6     set ['computedAName'](val){}  
7 };  

升成器：

升成器有一種特殊的語法，除了箭頭函數=>和定義setter/getter方法的時候不能添加之外，可以被添加在其他所有語法形式之中。我們可以通過其生成函數聲明、表達式、定義，甚至是構造函數：

1  //生成器聲明  
2 function *AaA(){}  

1 //另一種not-so-anonymous生成器聲明  
2 export default function *(){}  

1  //命名生成器表達式  
2 //AaA對函數外部不可訪問  
3 (function *AaA(){});

1 //匿名生成器表達式  
2 (function *(){});  

1 //方法定義  
2 let object={  
3     *methodName(){},  
4     *['computedName'](){}  
5 };  

1 //類聲明中的方法定義  
2 class C{    
3     *methodName(){},  
4     *['computedName'](){}  
5 }  

1 //類聲明中的靜態方法定義  
2 class C{    
3     static *methodName(){},  
4     static *['computedName'](){}  
5 }  

1 //類表達式中的方法定義  
2 let C=class{    
3     static *methodName(){},  
4     static *['computedName'](){}  
5 }  

1 //類表達式中的靜態方法定義  
2 let C=class{    
3     static *methodName(){},  
4     static *['computedName'](){}  
5 }  

隨筆一篇，歡迎各位方友斧正