抓我的頭在JavaScript中的「這個」聲明。任何人請幫助

好了一天後，我設法將問題縮小爲2行代碼。也許我試圖錯誤地使用這個語句。抓我的頭在JavaScript中的「這個」聲明。任何人請幫助

 function scheduleItemView(myId){ 
      this.update = function(show){ 
       document.getElementById(this.id+'-title').innerHTML = show.title +": "+ show.startDate; 
       document.getElementById(this.id+'-title-overlay').innerHTML = show.title +": "+ show.startDate; 
       document.getElementById(this.id+'-description').innerHTML = truncate(show.description,190); 
       document.getElementById(this.id+'-time-start').innerHTML = show.startTime; 
       document.getElementById(this.id+'-time-end').innerHTML = show.endTime; 
      }; 
      this.id=myId; 
      return true; 
     } 

     function nowNextView(){ 
      this.now = new scheduleItemView('now'); 
      this.next = new scheduleItemView('next'); 
      this.update = function(type,args){ 
       var myshow=args[0]; 

    // problem is below. I have to use the global name to access the update method. 
        myNowNextView.now.update(myshow.now); 
        myNowNextView.next.update(myshow.next); 

    // whereas what I want to do is reference them using the "this" command like below. 
    // this.now.update(myshow.now); 
    // this.next.update(myshow.next); 
    // the above doesnt work. The update method in scheduleItemView is not seen unless referenced globally 
    // BUT even more infuriating, this.now.id does return "now" so it can access the object, just not the method 
    // any ideas? 

      }; 
     }

對象然後用

var myNowNextView = new nowNextView();

實例化，然後我運行方法：

myNowNextView.update(stuff);

我試圖程序的主體內描述該問題。在代碼中沒有出現任何錯誤，我不得不做一個嘗試/捕獲，然後勉強地告訴我它找不到方法。設計有瑕疵嗎？我可以不這樣做嗎？非常感謝，史蒂夫

來源

2011-03-09 Steve Franklin

其實它看起來像它應該工作。如果你調用'myNowNextView.update（）'，那麼'update'中的'this'將引用'myNowNextView'。 – 2011-03-09 21:29:04

我認爲你真的可以受益於學習JavaScript中的閉包有點。看起來你正在嘗試將傳統的面向對象方法應用於js對象，而這不會給你所期望的結果。

我會推薦閱讀過這篇文章的一個簡單的方法來使用閉包： http://howtonode.org/why-use-closure

事情是這樣的：

<html> 
<head> 
<script type="text/javascript"> 

    function createScheduleItemView(myId){ 

    var _show = false 

    return { 
     setShow : function setShow(show) { 
      _show = show 
     }, 
     update : function update(){ 
      document.getElementById(myId +'-title').innerHTML = _show.title; 

     } 
     } 

    } 

    function createNowNextView(){ 

     var _now = createScheduleItemView('now'); 
     var _next = createScheduleItemView('next'); 

     return { 
      publicVar : "Example", 
      update : function update(args) { 
       var myshow=args[0]; 
       _now.setShow(myshow.now) 
       _now.update(); 
       _next.setShow(myshow.next) 
       _next.update(); 
      } 

     }; 
    } 

    function runIt() { 
     nowNextView = createNowNextView() 
     args = [] 
     showArgs = { 
      now : {title : "Beauty and the Beast"}, 
      next : {title: "I did it myyyyyy way"} 
     } 
     args.push(showArgs) 
     nowNextView.update(args) 

     //Private variables can not be accessed 
     //console.log(nowNextView._now) 
     //undefined 
     // 
     //But anything you return in the object is public 
     //console.log(nowNextView.publicVar) 
     //Example 

    } 


</script> 
</head> 
<body onload="runIt()"> 

<h3>Now Showing:</h3> 
<p id="now-title"></p> 

<h3>Up Next:</h3> 
<p id="next-title"></p> 

</body> 
</html>

來源

2011-03-09 21:09:25

也可以看到一個完整的討論：http://howtonode.org/what-is-this和http://stackoverflow.com/questions/1595611/how-to-properly-create-a-custom-object-在JavaScript的 – 2011-03-09 21:50:26

function scheduleItemView(myId){ 
this.update = function(show){ 
    document.getElementById(this.id+'-title').innerHTML = show.title +": "+ show.startDate; 
    document.getElementById(this.id+'-title-overlay').innerHTML = show.title +": "+ show.startDate; 
    document.getElementById(this.id+'-description').innerHTML = truncate(show.description,190); 
    document.getElementById(this.id+'-time-start').innerHTML = show.startTime; 
    document.getElementById(this.id+'-time-end').innerHTML = show.endTime; 
}; 
this.id=myId; 
} 

function nowNextView(){ 
var myshow=args[0]; 
var scope = this; 
this.now = new scheduleItemView('now'); 
this.next = new scheduleItemView('next'); 
this.update = function(type,args){ 
     scope.now.update(myshow.now); 
     scope.next.update(myshow.next); 
}; 
}

來源

2011-03-09 21:13:50

抓我的頭在JavaScript中的「這個」聲明。任何人請幫助

回答

相關問題