需要帮助理解为什么javascript对象属性未定义

Question

我需要帮助理解为什么下面的代码返回一个未定义的对象属性：

var count = 0;
var intervals = {
    collection : []                      
}

intervals.collection[0] = function () {
    this.timer = setInterval(function(){
       count++;
       $("p").html(count);            
    }, 1000);
}();

if(typeof intervals.collection[0] === "undefined") {
    $("span").html("undefined");        
}​

工作示例：http://jsfiddle.net/tvaQk/8/

基本上，我希望能够保留一组setIntervals，我稍后可以参考，这样我就可以循环并清除。我以为我能够循环遍历intervals.collection数组并执行类似的操作：

clearInterval(intervals.collection[0].timer)

但由于intervals.collection[0]未定义

，因此无法完成

Answer 1

您忘记了return。

intervals.collection[0] = function () {
  return this.timer = setInterval(function(){
--^^^^^^--

注意this是指window，我不确定向timer元素添加属性window是否是您实际期望的。否则，您应返回间隔ID，以免混淆全局window范围。

---

使用timer访问intervals.collection[0].timer的简短方法是创建一个Object：

intervals.collection.push({
  timer: setInterval(function(){
    count++;
    $("p").html(count);            
  }, 1000)
});

console.log(intervals.collection[0].timer);

我在此示例中使用Array.push将新创建的间隔添加为数组的最后一个元素。

Answer 2

也许你让事情变得复杂......我要做的就是将间隔直接推入阵列。

intervals.collection.push( setInterval(function(){...}, 1000) );

您不需要IIFE来执行间隔，当您将其推入阵列时也会执行。

然后你可以清除它们：

intervals.collection.forEach(function( timer ) {
  clearInterval( timer );
});

Answer 3

你可以这样写：

intervals.collection[0] = setInterval(function(){
    $("p").html(++count);            
}, 1000);

Answer 4

您正在分配一个自动调用函数，这意味着您可以指定函数的返回值。函数本身不会返回任何内容，因此它未定义。