JavaScript函数内部用this()递归调用报错，如何正确实现？

错误原因 #

你这段代码的问题出在两点：

1. 用箭头函数作为立即执行函数，箭头函数没有自身的this，它的this继承自外层全局作用域（此处为window），所以this(o)相当于调用window(o)，自然会触发this is not a function错误。
2. 匿名箭头函数没有函数名称，无法直接通过自身标识实现递归调用。

正确实现方式 #

方式1：使用命名普通函数（推荐）

给立即执行函数指定名称，直接通过名称完成递归调用：

(function traverse(e) {
  // 优化判断逻辑，用严格相等和更简洁的写法
  if (!e.children || e.children.length === 0) return;
  e = e.children;
        
  $(e).each(function(i, o) {
    console.log(o);
    traverse(o); // 直接调用命名函数实现递归
  });
})(document.body);

方式2：用变量存储箭头函数，递归调用变量

如果想保留箭头函数写法，可以先将函数赋值给变量，再通过变量触发递归：

const traverse = (e) => {
  if (!e.children || e.children.length === 0) return;
  e = e.children;
        
  $(e).each((i, o) => {
    console.log(o);
    traverse(o); // 调用变量指向的函数完成递归
  });
};
traverse(document.body);

额外优化提示 #

• 判断子元素是否存在时，!e.children已能覆盖e.children == null的场景，写法更简洁。
• 尽量使用严格相等运算符===替代==，避免隐式类型转换引发的潜在问题。

内容的提问来源于stack exchange，提问作者mardari