首頁 >web前端 >js教程 >JS匿名函數應該如何使用

JS匿名函數應該如何使用

php中世界最好的语言原創: 2018-04-14 15:43:281987瀏覽

這次帶給大家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只是指向了发生所有事情的函数。

关于更具有可读性，我没有什么再能说服你的了。但是也许你还没被说服的话，我可以试一下最后的论据。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

JS匿名函數應該如何使用

相關文章