Summer 夏季: Javascript build function prototype 不同的函示寫法

問題
JavaScript 的寫法很多，端看開發者的喜好（這不是個好現象），今天看到了一個寫 function call 的方式，因為是第一次看到這樣的寫法所以就稍稍的研究了一下。


var id = that.profile.id;
(function(id){
   // do business logic
})(id);

寫 Web 寫了非常久了是第一次看到這樣的寫法所以一開始看到覺得非常的困惑。
用 chrome developer tool 的 console 研究了一下後才知道原來這是一種 function call 的寫法，

解答
這段程式告訴 browser 的是：

var id = that.profile.id;
宣告一個 id 變數
(function(id) { // do business logic })(id);
建立一個 function call，可以將上面的 code 看成 function(id);

所以第一個 function(id) 這個 id 的參數是由最後面的 (id) 傳遞進來的，等於：

(id) -> function(id) ，也就是說 function(id) 參照的不是 var id = that.profile.id 。

結論

個人覺得，這樣的寫法容易讓人混淆，因為第一個無法讓人一目瞭然地看出程式邏輯，上面只是我截出來的程式語法重點，其實這是一個 70 line 的 function call。

再來就是 that，這個是變數，但是第一眼會想到的是 this。也因此會容易混淆看 code 的人。

變數應該要取得明確且清晰，像是 personalSession 。

function call 獨立出來會讓開發人員可以快速的瞭解程式碼， (function(id){})(id) 跟 parser(id) 我想兩個比較起來很明顯了。

很多小地方多注意，可以減少自己與其它開發人員的維護時間與 survey code 的速度，有時候簡單了當下換來的只是未來的加倍的償還。

Summer 夏季