最後のオブジェクトの関数だけがここで呼び出されるのはなぜですか？

Question

うわー。私は最終的に何がバグの原因であるかを考えましたが、なぜその理由が分かりません。私は

// relatives second indices in the video to events 
    // that are called when the video reaches that second 
    this.PausePoints = [ 
     { 
      sec: 10, 
      name: "Point number 1", 
      passed: false, 
      func: (function(that) { 

       this.$layer = that.GetLayerElement(10); 
       this.$layer.hide(); 

       this.to = function() { 
        that.videlem.pause(); // pause video 
        $(window).resize(); // re-proportion stuff 
        // point the 3 mouse pointers 
        var $mptrs = this.$layer.find('.filmstrip-pointer'); 
        for (var i = 0; i < $mptrs.length; ++i) { 
         (function (j) { 
          setTimeout(function() { 
           Point($mptrs.eq(j)); 
          }, j * 1000); 
         })(i); 
        } 
       }; 



       // attach click event to 3 sections 
       $clickRegions = $layer.find('div.click-region'); 
       $clickRegions.click(function(){ 
        $clickRegions.removeClass('clicked'); 
        $(this).addClass('clicked'); 
       }); 

       this.away = function() { 
        this.$layer.hide(); 
       } 

       // attach event to next button 
       $layer.find('.next-btn').click(function(){ 
        this.away(); 
        that.videlem.play(); 
       }.bind(this)); 

       return this; 

      })(this) 
     }, 
     { 
      sec: 26, 
      name: "Point number 2", 
      passed: false, 
      func: (function(that) { 

       this.$layer = that.GetLayerElement(26); 
       this.$layer.hide(); 

       this.to = function() { 

        // loop video between 0:26-0:31 
        this.loop = setInterval(function() { 
         that.videlem.currentTime = 26; 
         that.videlem.play(); 
        }, 5000); 

        // point the 3 mouse pointers 
        var $mptrs = this.$layer.find('.filmstrip-pointer'); 
        for (var i = 0; i < $mptrs.length; ++i) { 
         (function (j) { 
          setTimeout(function() { 
           Point($mptrs.eq(j)); 
          }, j * 1000); 
         })(i); 
        } 

        this.$layer.show(); 

       } 


       // separate pargraph words by spans 
       this.$layer.find('p').each(function() { 
        var spanned = $(this).text().split(" ").map(function (w) { return '<span class="word">' + w + '</span>'; }).join(" "); 
        $(this).html(spanned); 
       }); 

       // add event click event on headlines 
       var timeouts = []; 
       this.$layer.find('h3').click(function() { 
        // clear any current 'showing' animations 
        timeouts.forEach(function(t){ clearTimeout(t); }); 
        timeouts = []; 
        // unshow all words on the slide 
        this.$layer.find('span.word').removeClass('shown'); 
        // show all words associated with the headline that was clicked 
        var $wspans = $(this).closest('.tower-layer').find('span.word'); 
        for (var i = 0; i < $wspans.length; ++i) 
        { 
         (function(j){ 
          timeouts.push(setTimeout(function(){ 
           $wspans.eq(j).addClass('shown'); 
          },j*100)); 
         })(i); 
        } 
       }.bind(this)); 

       this.away = function() { 
        clearInterval(this.loop); 
        this.$layer.find('span.word').removeClass('shown'); 
        $layer.hide(); 
        that.videlem.currentTime = 31;//go to end of loop 
       }; 

       // set action of "Next" button 
       this.$layer.find('.next-btn').click(function() { 
        this.away(); 
        that.videlem.play(); 
       }.bind(this)); 

       return this; 

      })(this) 
     }, 
     { 
      sec: 38, 
      name: "Point number 3", 
      passed: false, 
      func: (function(that) { 

       this.$layer = that.GetLayerElement(38); 
       this.$layer.hide(); 

       this.to = function () { 
        // loop video between 0:38-0:43 
        this.loop = setInterval(function() { 
         that.videlem.currentTime = 38; 
         that.videlem.play(); 
        }, 5000); 

        this.$layer.show(); 
       } 

       this.away = function(){ 
        clearInterval(this.loop); 
        this.$layer.hide(); 
       }; 

       this.$layer.find('.next-btn').click(function(){ 
        that.videlem.currentTime = 43; 
        this.away(); 
        that.videlem.play(); 
       }.bind(this)); 

       return this; 

      })(this) 
     }, 
     { 
      sec: 47, 
      name: "Point number 4", 
      passed: false, 
      func: (function(that){ 

       this.$layer = that.GetLayerElement(47); 
       this.$layer.hide(); 

       this.to = function() 
       { 
        // loop video between 0:47-0:52 
        this.loop = setInterval(function() { 
         that.videlem.currentTime = 47; 
         that.videlem.play(); 
        }, 5000); 
        // show layer 
        this.$layer.show(); 
       } 

       this.away = function() { 
        clearInterval(this.loop); 
        this.$layer.hide(); 
       }; 

       this.$layer.find('.next-btn').click(function() { 
        that.videlem.currentTime = 52; 
        this.away(); 
        that.videlem.play(); 
       }.bind(this)); 

       return this; 

      })(this) 
     }, 
     { 
      sec: 57, 
      name: "Point number 5", 
      passed: false, 
      func: (function(that){ 

       this.$layer = that.GetLayerElement(57); 
       // hide initially 
       this.$layer.hide(); 

       this.to = function() 
       { 
        // loop video between 0:57-1:02 
        this.loop = setInterval(function() { 
         that.videlem.currentTime = 57; 
         that.videlem.play(); 
        }, 5000); 

        this.$layer.show(); 
       } 

       this.away = function(){ 
        clearInterval(this.loop); 
        $layer.hide(); 
       }; 

       this.$layer.find('.next-btn').click(function() { 
        that.videlem.currentTime = 62; 
        this.away(); 
        that.videlem.play(); 
       }.bind(this)); 

       return this; 

      })(this) 
     } 
    ]; 

（大規模なコードのダンプを言い訳）プロパティを持つオブジェクトを持っていると私は気づいてると、私はそれは常にの最後の要素に1を呼び出しto関数のいずれかを呼び出すしようとするということですアレイ。代わりに期待

   this.to = function() { 
        that.videlem.pause(); // pause video 
        $(window).resize(); // re-proportion stuff 
        // point the 3 mouse pointers 
        var $mptrs = this.$layer.find('.filmstrip-pointer'); 
        for (var i = 0; i < $mptrs.length; ++i) { 
         (function (j) { 
          setTimeout(function() { 
           Point($mptrs.eq(j)); 
          }, j * 1000); 
         })(i); 
        } 
       }; 

の例えば

、

VidHandler.PausePoints[0].func.to() 

通話

   this.to = function() 
       { 
        // loop video between 0:57-1:02 
        this.loop = setInterval(function() { 
         that.videlem.currentTime = 57; 
         that.videlem.play(); 
        }, 5000); 

        this.$layer.show(); 
       } 

は、なぜこの起こっているとどのように私はそれを修正することができますか？

Answer 1

すぐに呼び出される関数式（IIFE）を使用して、funcに何かを割り当てようとしています。これらのIIFEはの前に実行され、オブジェクトが構築されたの前にあります。つまり、thisは他のものを参照します。あなたのコードは、基本的に次のように分けることができます。

this.to = function() { 
    // version for "Point number 1" 
}; 
this.to = function() { 
    // version for "Point number 2" 
    // notice that you're overwriting the previous one 
}; 

// repeat for all points 

var self = this; 
this.PausePoints = [ 
    { 
    name: "Point number 1", 
    func: self 
    }, 
    // repeat for all points 
];  

それでは、あなたが実際にPausePointsプロパティを持つ同じオブジェクトへのto値を代入されてやっています。