Array.prototype.filter.call(forms, function(form) 这是做什么的？

我很难完全理解这段代码是如何工作的。这只是表单验证代码复制并从引导程序粘贴。

我的问题从这一行开始 var 验证 = Array.prototype.filter.call(forms, function(form)

在我看来，它正在创建一个名为validation的数组，其中包含类名为“needs-validation”的任何元素。然后是调用匿名函数并传入整个表单并运行后续代码行

 form.addEventListener('submit', function(event) {
     if (form.checkValidity() === false) {
     event.preventDefault();
     event.stopPropagation();
     } 

在每个包含类名“needs-validation”的元素上？

<script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

此代码成功验证表单上的输入。我只是不明白它是如何工作的。

方法document.getElementsByClassName返回一个HTMLCollection，乍一看它与数组类似，但是HTMLCollection没有方法.filter, .map, reduce, etc.

因此，为了使用这些方法，我们需要转换HTMLCollection到一个数组。

或者我们可以使用特定的 javascript：Array.prototype.filter通过对象上的可迭代，如果你查看详细信息HTMLCollection what document.getElementsByClassName返回它有钥匙并且它是iterable。所以我们可以调用方法Array.prototype.filter.call(并作为上下文（第一个参数）传递我们的HTMLCollection，第二个参数将是集合中每个元素将调用的函数。

关于 call() 方法的更多信息https://gomakethings.com/what-the-hell-is-the-call-method-and-when-should-you-use-it/ https://gomakethings.com/what-the-hell-is-the-call-method-and-when-should-you-use-it/