JS couldn't localize function in the same object

Question

I have following js file:

function RequestHandler(marker) {
this.marker = marker;


this.getDate = function () {
    var currentdate = new Date();

    var datetime = currentdate.getDate() + "/" + (currentdate.getMonth() + 1)
        + "/" + currentdate.getFullYear() + "  "
        + currentdate.getHours() + ":"
        + currentdate.getMinutes() + ":" + currentdate.getSeconds();

    return datetime;
}

this.registerEventHandlers = function () {
    $('[data-send-event]').on('click', function () {
         requestData = {
            Timestamp: this.getDate(),
            EventType: 0,
            Latitude: marker.getPosition().lat(),
            Longitude: marker.getPosition().lng()
         }

    });
}

And when js fire $('[data-send-event]').on('click') it gives me error that it can't locate this.getDate(). Could anyone helps me please?

That's a much better answer than the one I gave – A. Llorente Jun 27 '18 at 14:00 — A. Llorente, Jun 27 '18 at 14:00

score 1 · Accepted Answer · edited Jun 27 '18 at 14:22

The scope of this inside that function is incorrect. You can do several things:

Bind the scope to the function

this.registerEventHandlers = function () {
        $('[data-send-event]').on('click', (function () {
             requestData = {
                Timestamp: this.getDate(),
                EventType: 0,
                Latitude: marker.getPosition().lat(),
                Longitude: marker.getPosition().lng()
             }

        }).bind(this));
    }

Save the scope in a variable an access it

this.registerEventHandlers = function () {
    var that = this;
    $('[data-send-event]').on('click', function () {
         requestData = {
            Timestamp: that.getDate(),
            EventType: 0,
            Latitude: marker.getPosition().lat(),
            Longitude: marker.getPosition().lng()
         }

    });
}

Use an arrow function:

this.registerEventHandlers = function () {
        $('[data-send-event]').on('click', () => {
             requestData = {
                Timestamp: this.getDate(),
                EventType: 0,
                Latitude: marker.getPosition().lat(),
                Longitude: marker.getPosition().lng()
             }

        });
    }

Rather than posting an answer for a duplicate question, vote to close for the duplicate. This is already covered. — Taplar, Jun 27 '18 at 14:00

JS couldn't localize function in the same object

1 Answers1