为什么我的锚不能触发这个JavaScript对象？

Question

我有一个网页链接的JavaScript对象：

//the constructor function 
function NewsScroller() { 

} 


//now put some config objects using the JSON structure 
NewsScroller.prototype.config = { 
    serviceUrl : '/NewsProvider.svc/rest/GetNews/', 
    pageIndex : 0 
} 


//the argumented constuctor for this object 
NewsScroller.prototype.init = function() { 


    this.getNews(this.config.pageIndex); 
    console.log(this.config.pageIndex); 

} 

NewsScroller.prototype.decreasePage = function() { 

    console.log('current page index ' + this.config.pageIndex); 

} 

然后我在页面准备好声明：

<script> 
     $(document).ready(function() { 

      var newsScrollerForPage = new NewsScroller(); 
      newsScrollerForPage.init(); 

      newsScrollerForPage.decreasePage(); 

     }); 

    </script> 

其产生的结果：

当前页面的索引0

我想调用好玩的从一个锚标记ction所以我有：

<div class="scroller-left"> 
    <a id="scroller-left-a" href="javascript:newsScrollerForPage.decreasePage();"> 
     <img src="/Images/Left-Scroller.jpg"/> 
    </a> 
</div> 

但是当我点击锚我得到：

newsScrollerForPage没有定义

这是为什么？当然，我应该能够像在.ready方法中那样调用对象和函数？

Answer 1

您在ready函数中使用局部作用域（通过使用“var”）定义newsScrollerForPage，除了在使用它的相同作用域中定义函数外，不能在其外部使用它（范围从在哪里定义函数，而不是从它们被调用的地方）。

您可以通过从之前取走var（使其更具全局性而非局部范围）来快速解决问题，但我不建议将此作为最佳解决方案。

更好地将锚连接起来，就像这样：

$(document).ready(function() { 

     var newsScrollerForPage = new NewsScroller(); 
     newsScrollerForPage.init(); 

     newsScrollerForPage.decreasePage(); 

     document.getElementById("scroller-left-a").onclick=function() 
     { 
      newsScrollerForPage.decreasePage(); 
      return false; 
     } 

    }); 

和删除HTML元素的HREF。