来自 MDN 的 IIFE 示例 - 对 Javascript 页面的重新介绍答案

【问题标题】：IIFE example from MDN - A Reintroduction to Javascript page来自 MDN 的 IIFE 示例 - 对 Javascript 页面的重新介绍
【发布时间】：2019-02-07 11:43:51
【问题描述】：

下面的 sn-p 来自 MDN - 对 Javascript 的重新介绍，它应该演示 IIFE。我有点看到它应该计算这个文本节点中的字符，但我不确定有几件事。首先是为什么 for 语句在第一个参数部分var i=0, child 中有 2 个参数。第二个更笼统，它如何与这个调用自身的函数一起工作..有人可以向我解释一下整体流程吗？

var charsInBody = (function counter(elm) {
  if (elm.nodeType == 3) { // TEXT_NODE
    return elm.nodeValue.length;
  }
  var count = 0;
  for (var i = 0, child; child = elm.childNodes[i]; i++) {
    count += counter(child);
  }
  return count;
})(document.body);

【问题讨论】：

第二个问题：softwareengineering.stackexchange.com/questions/25052/…
逗号分隔的标识符i 和child 是var 语句的参数。它只是声明和初始化i，同时只声明child。不幸的是，你的问题的第二部分肯定是重复的，所以你应该通过在 Stack Overflow 上搜索其他 IIFE 和递归问题来完成你的工作。

标签： javascript dom recursion iife

【解决方案1】：

首先是为什么for语句的第一个参数部分var i=0,child有2个参数？

for 循环只是 while 循环的精简版本，这意味着：

 for(declarations; condition; last) {
  body
 }

等同于：

 declarations
 while(condition) {
   body
   last
 }

这意味着在你的情况下它是：

 var i = 0, child; 
 while(child = elm.childNodes[i]) {
   count += counter(child);
   i++
 }

所以实际上child只是在循环之前定义了一个新变量

【讨论】：