首頁 > 文章 > web前端 > 為什麼不使用 JS 匿名函數

為什麼不使用 JS 匿名函數

小云云原創: 2018-01-18 13:13:331242瀏覽

本文主要給大家分析了不使用js匿名函數的三大理由，匿名函數的作用是避免全局變數的污染以及函數名的衝突，關於js匿名函數的三大理由大家參考下本文，希望能幫助大家。

匿名函數的基本形式為(function(){...})();

#前面的括號包含函數體，後面的括號就是傳遞參數給匿名函數並且立即執行之

匿名函數的作用是避免全域變數的污染以及函數名稱的衝突

無論你在什麼時候讀程式碼，您都必須注意到匿名函數。有時它們被稱為 lambda，有時是匿名函數，不管怎樣，我認為他們是不好使用的。

如果你不知道匿名函數是什麼，這裡有一個引語:

匿名函數是一種在運行時動態宣告的函數。它們之所以被稱為匿名函數是因為不同於普通函數，它們並沒有函數名。 — Helen Emerson, Helephant.com

匿名函數形式如下：

function () { ... code ... }
OR
(args) => { ... code .. }

我今天嘗試讓大家理解通常情況下只有在絕對需要的情況下才使用匿名函數的想法。匿名函數不應該是首選，而且應該知道原因情況下使用。當理解這種想法之後，你的程式碼會變得更簡潔，更容易維護，更容易追蹤bug。先從避免使用匿名函數的三個理由開始：

你寫程式碼的時候，無論你多麼擅長敲程式碼，總是會碰到錯誤。有時候，這些錯誤很容易被查出，有時並不容易。

如果你知道這些錯誤來自哪裡，那麼錯誤就很容易被查出來。為了找出錯誤，我們使用這個被叫做堆疊軌跡的工具。如果你不了解堆疊軌跡，goole給了一個很棒的介紹。

假設現在有一個很簡單的工程：

function start () {
 (function middle () {
 (function end () {
  console.lg('test');
 })()
 })()
}

上面程式碼裡面有一個很愚蠢的錯誤，拼字錯誤(console.log)。在小工程裡面，這個拼字錯誤不是什麼大問題。如果這是一個有非常多模組非常大的工程的一小段，問題就大了。假設這個愚蠢的錯誤不是你犯的，那麼新來的初級工程師將會在他休假之前把這個錯誤提交到程式碼庫！

現在，我們必須追蹤。使用我們精心命名的函數，我們得到如下的堆疊追蹤：

謝謝你命名你的函數，初級開發者們！現在我們可以輕鬆地追蹤到這個bug。

但是..一旦我們解決了這個問題，就會發現還有另一個bug。這次是一位更資深的開發人員介紹的。這個人知道 lambdas
結果他們偶然發現了一個bug，我們的工作就是追蹤它。

下面是程式碼：

(function () {
 (function () {
 (function () {
  console.lg('test');
 })();
 })();
})();

吃驚，這位開發者也忘瞭如何拼寫console.log了！這也太巧合了吧！令人感到遺憾的是，他們都沒有命名他們的函數。

那麼控制台會輸出什麼呢？

好吧，我們至少還有行號，對吧？在這個例子中，看起來我們有大約7行程式碼。如果我們處理一大段程式碼會如何呢？比如一萬行程式碼？行號的跨度如此之大該怎麼辦？如果程式碼被折疊後有沒有一個程式碼地圖文件，那麼行號的渲染是不是根本就是沒有什麼用了呢？

我想對這些問題的回答相當簡單，答案就是：想這些會讓你一整天都會過的相當糟心。

可讀性

咦，我聽說你還不信。你仍舊對你的匿名函數戀戀不捨，而且從未發生過bug。那我得向你道歉，你認為你的程式碼是完美的。讓我們看看這個！

看看下面兩段程式碼：

function initiate (arguments) {
 return new Promise((resolve, reject) => {
 try {
  if (arguments) {
   return resolve(true);
  }
  return resolve(false);
 } catch (e) {
  reject(e);
 }
 });
}
initiate(true)
 .then(res => {
  if (res) {
   doSomethingElse();
  } else {
   doSomething();
  }
 ).catch(e => {
   logError(e.message);
   restartApp();
   }
 );

這是一個非常不正常的例子，但是我相信你已經明白我要說什麼了。我們的方法回傳了一個promise，我們用這個promise物件/方法處理不同可能的回應。

你也許會認為幾段程式碼讀起來並不難，但我認為它們可以變得更好！

如果我們去掉所有的匿名函式會怎麼樣呢？

function initiate (arguments) {
 return new Promise(checkForArguments);
}
function checkForArguments (resolve, reject) {
 try {
 if (arguments) {
  return resolve(true); 
 }
 return resolve(false);
 } catch (e) {
 reject(e);
 }
}
function evaluateRes (res) {
 if (res) {
 doSomethingElse();
 } else {
 doSomething();
 }
}
function handleError (e) {
 logError(e.message);
 restartApp();
}
initiate(true)
 .then(evaluateRes)
 .catch(handleError);

好，先講清楚：這部分程式碼更長，但我認為其不僅僅是有更多的可讀性！我們精心命名的函數與匿名函數不一樣，只要我們一看到它們的名字就知道它們的功能是什麼。這避免了在評估代碼時的障礙。

這也有助於分清楚其中的關係。與創建一個方法、將其傳遞、然後運行邏輯不同，在第二個例子中的參數被給了then，catch只是指向了發生所有事情的函數。

關於更具有可讀性，我沒有什麼再能說服你的了。但是也許你還沒被說服的話，我可以試試看最後的論點。

為什麼不使用 JS 匿名函數

相關文章