『翻译』3个原因让我像躲避瘟疫一样避免使用JS匿名函数

发表于 | 分类于 | 阅读次数

Read the original

前言

无论何时阅读代码，你一定会看到匿名函数。有时它们被称为lambdas，有时被称为匿名函数（anonymous functions），但不管怎样，我认为他们是糟糕的。

如果你不知道什么是匿名函数，这里有一段引用：

匿名函数是一个可以在运行时动态声明的函数。之所以称为匿名函数是因为：他们没有像普通函数一样被赋予名字(name)。 ——Helen Emerson, Helephant.com

它们看起来有点像这个：

1
2
3
4
5
function() { ... code ... }
OR
（args） => { ... code ... }

下面我会举一些例子给你，实际上，只有在非用不可的情况下才会使用匿名函数。它们不是你的首选，并且你要知道为什么。一旦你这么做了，你的代码会更简洁、容易去阅读，BUG也更容易被捕获，让我们看看这3个避免使用它们的原因吧！

堆栈跟踪

你终于写完了代码，无论你有多擅长编码，当你运行代码时，总会有一些报错。有些错误很容易被捕获，但有时并不是这样。

如果错误很容易被捕获到，好的，那说明你知道他们错在哪！为此，我们使用所谓的堆栈跟踪，如果你对堆栈跟踪一点都不了解，Google给了我们很好的介绍。

假设我们有一个很简单的项目:

1
2
3
4
5
6
7
function start () {
  (function middle () {
    (function end () {
      console.lg('test');
    })()
  })()
}

但看起来我们做了一些愚蠢得难以置信的事，就像拼错console.log。在我们这个小项目中，这没什么大不了的。但也许这是一个巨型项目中的一个片段，有大量的模块与它相互依赖。最重要的是，让我们假装你没有烦这种愚蠢的错误。那个初级开发者在他准备离开度假的前一天，把它推到了仓库中！

现在，我们将去跟踪错误。根据我们精确的命名函数，我们得到的堆栈跟踪像下面这样：

幸好你给函数命名了，初级开发者！现在，我们能轻松的跟踪到这个BUG。

但是…一旦我们修复了它，又会出现新的BUG。这时，就要请出更高级的开发者了。他们知道如何使用匿名函数，并大量的使用在他们的代码中。结果是，他们发现了一个BUG，我们去跟踪BUG。

他们的代码：

1
2
3
4
5
6
7
(function () {
 (function () {
   (function () {
     console.lg('test');
    })();
  })();
})();

多令人惊讶，这个高级开发者也忘了怎么拼写console.log！这是一个偶然吗？！告诉你一个悲痛的消息，他们没有给函数命名。

控制台会展示什么给我们？

没事…我们还有行号提示？ 在这个例子中，我们好像有7行代码。如果我们在处理一个巨大的代码库？如果每行有10k的代码?如果行号相差很远？如果代码被压缩了、没有map文件、行号提示几乎是没用的？

我认为你可以非常容易的回答这些问题。答案是：你会度过糟糕的一天。

可读性

看吧，我知道你不服气。你仍然爱着匿名函数，而且你永远也不会有BUG。抱歉，我忘了告诉你如何写出完美的代码。让我们来看看这点！

检查下面两个不同的代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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();
          }
  );

这是一个人为的例子，但我认为你能get到那个点。我们有一个方法，它返回一个Promise对象，我们用这个对象去管理可能返回的不同请求。

你或许认为这个代码阅读起来不太难，但我认为它能写的更好。

如果我们摆脱所有匿名函数，结果会如何？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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，我们可以很清楚的知道函数中的每一处都发生了什么。

时间不多了，否则我要让你信服这些代码可以更加易读。也许你任然不相信，那尝试看看第三个论据…

可重用性

你有注意到最后一个例子吗？所有函数都是可以互相调用的！

当你使用匿名函数时，它们很难遍布你的程序。重用代码可以降低能耗，你也不用一遍遍写重复的代码了。还有大家都知道的一点，代码越少，引入BUG的几率越小，而且用户可以加载更少的资源。共赢的局面！

相反的，命名函数可以在它的整个作用域中使用，而不需要像变量一样四处传递。你写的代码会很自然的更具重用性，因为，你可以重用他们！

匿名函数好吗？

是的。我必须承认，有时它们也是最好的选择！

1
2
3
4
5
6
const stuff = [
  { hide: true, name: 'justin' },
  { hide: false, name: 'lauren' },
  { hide: false, name: 'max' },
];
const filteredStuff = stuff.filter(s => !s.hide);

这个匿名函数s => !s.hide小而简洁，它不会污染其它地方，也不会用在其它地方。它会在stuff.filter的堆栈跟踪中显示。如果你需要重用它，最好重用整个语句：

1
2
3
function filterByHide (array) {
  return array.filter(item => !item.hide);
}

有时你需要包裹你所有的代码在一个匿名函数中，以保证全局作用域不被污染。

1
2
3
(() => {
 ... your code here ...
})();

顶级匿名函数不会影响到堆栈跟踪。代码重用是不会造成伤害的，因为代码重用的全部目的就是保持方法被包含。

我相信还有其他地方适合使用匿名函数，在评论中分享一下吧！

感谢阅读，离开这里后，停止写匿名函数吧！

本文作者：余震（Freak）
本文出处：Rockjins Blog
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 CN许可协议。转载请注明出处！

坚持，您的支持将鼓励我继续爬下去！