少用JS匿名函数_不使用JS匿名函数的三个理由

更新日期: 2018-11-29阅读: 2.2k标签: 匿名函数

无论你在什么时候读代码,您都必须注意到匿名函数。有时它们被称为 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);
    }
  });
}
function checkForArguments (resolve, reject) {
  try {
    if (arguments) {
     return resolve(true);  
    }
    return resolve(false);
  } catch (e) {
    reject(e);
  }
}


这是一个非常不正常的例子,但是我相信你已经明白我要说什么 了。我们的方法返回了一个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只是指向了发生所有事情的函数。

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

原文链接:https://www.tuicool.com/articles/Nnymu2z 


链接: https://fly63.com/article/detial/1452

js中函数声明、函数表达式、匿名函数的理解和区别?

js和其他编程语言相对比较随意,首先来理解下函数基本概念:函数声明、函数表达式、匿名函数。函数声明和函数表达式区别有哪些?

JS匿名函数this调用变量报错

突然,看到附件选择的方法,人家是设置的this.fileUrl成功的。比对下,什么区别。这就是JS中匿名方法的this指向问题,function的声明方式,this指向的是本身,父级的变量都无法访问。

js匿名函数自执行的好处

我们知道,在创建一个函数时如果要用到变量来存取信息的话,要尽量使用局部变量。因为一方面局部变量会随着函数的执行结束被销毁;另一方面在不执行函数的时候也不会创建这个局部变量,对节省空间资源有很大的好处。

什么是匿名函数、什么是闭包函数?

在前端面试中面试官基本都会问到什么是匿名函数、什么是闭包函数。匿名函数顾名思义就是没有名字的函数,通常我们所写的函数都是这样的:

JavaScript中的匿名函数、立即执行函数和闭包

立即执行函数是基于匿名函数实现的,也没有函数名,会在定义后立即执行;闭包是有权访问另一个函数作用域中的变量的函数。匿名函数、立即执行函数只要满足 有权访问另一个函数作用域中的变量 这一个条件,就成了闭包。

匿名函数没有自己的this

匿名函数没有自己的this,因此,在构造对象中调用全局函数时,可以省去保存临时this,再将其传入全局函数这一步:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!