【问题标题】:scratching my head over "this" statement in javascript. anyone help please对javascript中的“this”语句挠头。任何人请帮忙
【发布时间】:2011-03-09 20:59:48
【问题描述】:

好吧,经过一天后,我设法将问题缩小到 2 行代码。也许我试图错误地使用这个语句。

        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);

我试图在程序主体中描述问题。代码中没有抛出任何错误,我不得不在它勉强告诉我它找不到方法之前做一个 try/catch。 设计是否存在某种缺陷?我不能这样做吗? 提前谢谢了, 史蒂夫

【问题讨论】:

  • 实际上它看起来应该可以工作。如果你调用myNowNextView.update(),那么this里面的update将引用myNowNextView

标签: javascript this javascript-objects


【解决方案1】:
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);
};
}

【讨论】:

    【解决方案2】:

    我认为你真的可以从学习 javascript 中的闭包中受益。您似乎正在尝试将传统的 OO 方法应用于 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>
    

    【讨论】:

    猜你喜欢
    • 2018-03-29
    • 2021-04-09
    • 2011-03-29
    • 2011-07-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-06
    • 2015-05-09
    相关资源
    最近更新 更多