Functions of several Javascript prototypes - how to call each other

Question

I have been working a lot lately on creating cleaner Javascript code and using prototype objects, etc. But I'm somewhat embarrassed ...

function TimeCard(){
    this.date               = new Date();
    this.pay_period_begin   = null;
    this.pay_period_end     = null; 
}

Here is my timecard object with some initial values. I have a bunch of functions that I wrote, and much more that are part of this timecard, and if I understand correctly, they will be prototypes. Here are some of mine so far:

TimeCard.prototype = {         
    init : function(){
        this.pay_period_begin   = $("#pay_period_begin");
        this.pay_period_end     = $("#pay_period_end");
    },
    getTimeCardData : function(){
          //ajax request
    },
    selectAll : function(){
        this.getTimeCardData();
    }
    ...
};

, this.getTimeCardData(), , . , , , , , , . , tc.getTimeCardData() this.getTimeCardData(), tc , - var tc = new TimeCard();. , , ?

Answer 1

, this.getTimeCardData(), , .

, this . , , JavaScript this , , , , this - .

:

TimeCard.prototype = {
    // ...
    doSomething: function() {
        // here, `this` probably refers to the timecard
        someArray.forEach(function() {
            this.getTimeCardData(); // <=== Problem, `this` has changed
        });
    }
    // ...
};

this.doSomething(); TimeCard, this timecard. forEach this timecard. ; ajax ..

, this :

TimeCard.prototype = {
    // ...
    doSomething: function() {
        var thisCard = this;
        someArray.forEach(function() {
            thisCard.getTimeCardData(); // <=== Problem
        });
    }
    // ...
};

, . , selectAll getTimeCardData. , selectAll this? , :

$('#container').on('click', '#selectAll', tc.selectAll);

, selectAll, this DOM, .

:

• jQuery, $.proxy, , this, , this :

  $('#container').on('click', '#selectAll', $.proxy(tc.selectAll, tc));
  

• ES5 Function#bind, . , IE8 , " ES5" (, $.proxy , , ):

  $('#container').on('click', '#selectAll', tc.selectAll.bind(tc));
  

• ( , ): ( ):

  $('#container').on('click', '#selectAll', function() {
      tc.selectAll();
  });
  

this, DOM. , , , , currentTarget. , tc.selectAll this, tc , this ( DOM, ) :

$('#container').on('click', '#selectAll', function(e) {
    tc.selectAll(e.currentTarget);
});

• this

---

, , , TimeCard.prototype. , , new TimeCard() , TimeCard.prototype, , .

, , prototype . , :

function TimeCard(){
    this.date               = new Date();
    this.pay_period_begin   = null;
    this.pay_period_end     = null; 
}
TimeCard.prototype.getTimeCardData = function(){
      //ajax request
};
// ...

: . prototype, , new TimeCard(), , , , .

, , :

var TimeCard = (function() {
    function TimeCard(){
        this.date               = new Date();
        this.pay_period_begin   = null;
        this.pay_period_end     = null; 
    }
    TimeCard.prototype.getTimeCardData = function(){
          //ajax request
    };
    // ...

    return TimeCard;
})();

... , .