Question

简单的 Javascript 幻灯片说明

2015-08-03

49

javascript arrays

我在 Codepen 上找到了这个脚本，它确实引起了我的兴趣，但也让我摸不着头脑。整个代码库并不大，实际上整个幻灯片脚本只有大约 18 行。它在下面，

(function(){
  var counter = 0, $items = document.querySelectorAll('.diy-slideshow section'),numItems = $items.length; 
  var showCurrent = function(){
    var itemToShow = Math.abs(counter%numItems);
    [].forEach.call( $items, function(el){
      el.classList.remove('show');
    });
    $items[itemToShow].classList.add('show');    
  };
  setInterval(function() {
     counter++;
     showCurrent();
  }, 5000);
})();

所以我感到困惑的部分是 showCurrent 函数。更具体地说，它是

[].forEach.call($items, function(el){...};

的部分。现在我明白 [] 是一个数组，但我不明白它从哪里获取数组的值，函数如何知道数组中有 X 个项目需要循环？是什么让 [].forEach 循环遍历所有已知元素？

Answer 1

[].foreach.call 是 Array.prototype.foreach.call 的简写。每个 javascript 函数都是一个具有自己方法的对象。 call() 就是其中之一。

call() 的第一个参数是 thisArg ，它表示在函数期间将表现为 this 的对象。在您的示例中， $items （它是一个 DOMElement 数组）将在 foreach 调用中为 this 。