javascript - 有人能说流利的Java脚本向我解释这里发生了什么吗？

我上了有关udemy的课程，然后遇到了这段更改窗口背景的代码。事情是randColor函数让我迷失了。我想确切地知道发生了什么。

我知道一个称为randColor的函数已声明，然后该函数本身返回一个函数+＃，但我试图理解所有情况的逻辑。是否添加了一个HASH符号，我相信它也是IIFE正确的吗？

我非常感谢您的帮助！

document.querySelector("button").addEventListener("click", function(){
  document.body.style.background = randColor();
})


function randColor(){
  return '#' + (function co(lor){   return (lor +=
    [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
    && (lor.length == 6) ?  lor : co(lor); })('');
}

最佳答案

目的是生成十六进制格式的随机颜色。我试图解释您提供给我们的代码：

调用randColor时，它将添加到调用堆栈中，然后暂停，以等待嵌套函数的调用完成。

嵌套函数co(lor)是IIFE，并且被递归调用。
最初，传入一个空字符串，并将本地lor变量分配给它。

Math.floor(Math.random()*16)-生成0到15之间的数字，分别是
数组[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']的索引。在每个步骤中，将数组中的新符号添加到前面作为参数传入的本地lor字符串中。如果更新后的字符串的长度小于6，则将其进一步传递给新调用。

嵌套函数的递归使用如下所示的lor值添加到调用堆栈对象中：

5aTh46 (top, last call, gets popped out first)
5aTh4
5aTh
5aT
5a
5      (first call)

当第6次调用后局部lor变量的长度等于6时，则满足基本条件lor.length == 6并从调用堆栈的顶部返回5aTh46字符串。所以，对于第五个电话

return (lor += [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'] [Math.floor(Math.random()*16)]) && (lor.length == 6) ? lor /* = 5aTh4*/ : co(lor) /* = 5aTh46*/;

由于本地lor.length == 6等于lor，所以5aTh4为false。因此，第六次调用返回的5aTh46也会在第五次调用之后返回，依此类推，直到由于5aTh46调用而最终返回值co(lor)并将其添加到#中的randColor字符串中>。最后，我们得到#5aTh46。

PS。这就是我的理解。如果您了解event loop和IIFE的概念，这听起来可能很简单:)