如何将 THIS 与 OOP javascript 一起使用？答案

【问题标题】：How to use THIS with OOP javascript?如何将 THIS 与 OOP javascript 一起使用？
【发布时间】：2014-01-04 12:24:34
【问题描述】：

我是 JavaScript 中的 OOP 的新手，只是想像 PHP 一样做一些事情。在下面的示例中，我不能使用 THIS 关键字来通用调用类 Screen 的方法 getMyWeekDay()，我必须在原型函数中调用我的“Screen”类的特定实例（即我的实例称为“屏幕”）有点破坏目的......

我猜我只是在我的设计中犯了一个新手错误？

//Our screen object
function Screen() {}

//update the clock element on the screen
Screen.prototype.updateClock = function(date) {
    //do some stuff
    $('#dateContainer').html(screen.getMyWeekDay(date)+' '+date);
    //Here I would prefer    $('#dateContainer').html(this.getMyWeekDay(date)+' '+date);
}

//return the day name in swedish
Screen.prototype.getMyWeekDay = function(d) {
    var d=new Date(d);
    var weekday=new Array(7);
    weekday[0]="Söndag";
    weekday[1]="Måndag";
    weekday[2]="Tisdag";
    weekday[3]="Onsdag";
    weekday[4]="Torsdag";
    weekday[5]="Fredag";
    weekday[6]="Lördag";
    var n = weekday[d.getDay()];
    return n;
}

screen = new Screen();

//use the new instance (screen) of class Screen

-- 更新--

我意识到我的问题可能在我共享的代码之外，但使用建议的解决方案是可行的。

这是我的全部代码，我只是想让你省去一堆我认为不必要的阅读......

Screen.prototype.updateClock = function() {

    var jqxhr = $.get('{{ path('getClock') }}')
      .success(function(data) { 
            time = data.substring(data.indexOf("|")+1, data.indexOf("|")+6);
            date = data.substring(0, data.indexOf("|"));

            $('#timeContainer').html(time);          

            try{
                //see if template has its own function for date rendering...
                template_date_format(getMyWeekDay(date),date);
            }
            catch(e) {
                //standard fallback if not
                $('#dateContainer').html(this.getMyWeekDay(date)+' '+date);
            }       
       })
      .error(function() {
            console.log('there was an error fetching clock data');
      });        
            setTimeout(function() {
              updateClock();
            }, 15000);          

}

【问题讨论】：

这里是 MDN 对 JS 中 OOP 的一个很好的介绍：developer.mozilla.org/en-US/docs/Web/JavaScript/…
好的..一分钟前这里有一个答案完全有效，但是当我去检查它作为解决方案时它已被删除..无论你发布的是谁，是否有问题您发布的代码？
没有理由使用this.getMyWeekDay() 不应该工作。你有什么错误吗？
dcodesmith 是您发布该答案的人吗？无论如何，下面我自己的答案是建立在这里有人刚刚教我的“保存对这个的引用”的基础上的。看看下面，你可能会明白为什么在我没有工作的地方调用 THIS。
更多关于如何使用构造函数以及this的具体内容：stackoverflow.com/a/16063711/1641941

标签： javascript oop

【解决方案1】：

Screen.prototype.updateClock = function() {

var oopThis = this;

var jqxhr = $.get('{{ path('getClock') }}')
    .success(function(data) { 

        // the log line below will return an object which contains the ajax calls options
        console.log(this);

        time = data.substring(data.indexOf("|")+1, data.indexOf("|")+6);
        date = data.substring(0, data.indexOf("|"));

        $('#timeContainer').html(time);          

        try {
            //see if template has its own function for date rendering...
            template_date_format(getMyWeekDay(date),date);
        } catch(e) {
            //standard fallback if not
            $('#dateContainer').html(oopThis.getMyWeekDay(date)+' '+date);
        }    
    })
    .error(function() {
        console.log('there was an error fetching clock data');
    });        

    setTimeout(function() {
        oopThis.updateClock();
    }, 15000);
}

好的。根据您上面的代码this 在ajax/get/post 函数的上下文中是指包含其选项的ajax 对象。

顺便说一句，通常的约定是var self = this;

【讨论】：