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

Question

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

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

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

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

在包含类名“需要验证”的每个元素上？

<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);
})();

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

Answer 1

该方法document.getElementsByClassName返回一个HTMLCollection，在第一次看它类似于数组，但HTMLCollection不具有方法.filter，.map，reduce，等。

所以为了使用这些方法，我们需要转换HTMLCollection为数组。

或者我们可以使用，javascript中的特定：Array.prototype.filter去了迭代的对象上，如果你在细节看HTMLCollection什么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/