禁止使用非箭头函数 $(document).ready(function() { - JavaScript

在现代Web开发中，使用jQuery的$(document).ready()函数来确保代码在页面加载完成后才会被执行是很常见的做法。然而，使用非箭头函数来定义回调函数是不推荐的。

问题描述

使用非箭头函数定义$(document).ready()回调函数会导致函数上下文被改变，从而可能导致出现不可预料的错误或行为。

例如，在以下代码片段中，当用this调用$(this)时，非箭头函数会将this上下文指向document，而不是所期望的DOM元素。

$(document).ready(function() {
  $('button').click(function() {
    console.log($(this).text()); // 输出 ""
  });
});

为了避免这种问题，推荐使用箭头函数来定义回调函数，因为箭头函数不绑定this，它会捕获定义时所在的上下文。

解决方案

要使用箭头函数，只需将回调函数定义为一个箭头函数即可：

$(document).ready(() => {
  $('button').click(() => {
    console.log($(this).text()); // 输出所期望的文本
  });
});

在上面的代码片段中，当click事件被触发时，箭头函数能够正确地使用this，因为它已经被正确地捕捉到了定义时所在的上下文。

结论

为了确保代码在使用$(document).ready()时不会出现意外行为，始终使用箭头函数来定义回调函数是十分必要的。因为它能够正确地捕捉到定义时所在的上下文，避免了非箭头函数中可能出现的上下文错误。