箭头函数与普通函数语法是否等价？代码报错原因咨询

这个问题其实是箭头函数和传统函数最核心的差异点——this的指向规则不同，在jQuery这类依赖动态this传递上下文的库中特别容易踩坑。

咱们先拆解一下你的代码：

报错的箭头函数版本问题出在哪？ #

const clean = (blurb) => { 
  blurb.find('a').each(()=> { 
    $(this).replaceWith($(this).html()) 
  }); 
}

箭头函数不会创建自己的this上下文，它会直接继承外层作用域的this。这里你的clean本身就是箭头函数，它的this继承自定义它的外部环境（如果是在模块里，这个this就是undefined；在全局环境下则是window）。当jQuery的each()方法尝试把当前遍历的DOM元素绑定到回调函数的this上时，箭头函数根本不吃这一套——它的this已经被词法作用域固定死了，所以$(this)里的this是undefined，自然会抛出Cannot read property 'createDocumentFragment' of undefined的错误（因为$(undefined)无法生成有效的jQuery对象）。

传统function为什么能正常工作？ #

const clean = (blurb) => { 
  blurb.find('a').each(function() { 
    $(this).replaceWith($(this).html()) 
  }); 
}

传统的function函数会在被调用时动态绑定this。jQuery的each()方法内部会通过call()或apply()把当前遍历到的DOM元素作为this传递给这个回调函数，所以$(this)能正确获取到对应的jQuery对象，执行replaceWith操作自然没问题。

如果你想用箭头函数怎么办？ #

如果就是偏好箭头函数的写法，完全可以不用依赖this，直接用each()回调提供的第二个参数——当前遍历的DOM元素：

const clean = (blurb) => { 
  blurb.find('a').each((index, element)=> { 
    $(element).replaceWith($(element).html()) 
  }); 
}

这样直接使用element参数，就绕开了this指向的问题，代码也能正常运行。

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