Cannot read property 'push' of undefined on array in custom prototype

Question

I got a definition that looks like so:

function className(data)
{
    this.dataRecords = [];
    $.each(data, function(key, item)
    {
        this.dataRecords.push(new dataRecord(item.record));
    }
}

But for some reason js does not think this.dataRecords is actually an array. I modified the code to do the following:

function className(data)
{
    var array = [];
    $.each(data, function(key, item)
    {
        array.push(new dataRecord(item.record));
    }
    this.dataRecords = array;
}

This works fine, but i'd rather push the data to the actual object, in stead of now having to do another this.dataRecords = array; to get the job done. I want to give the class functions for manipulating this.dataRecords from my class's perspective( like addRecord and removeRecord), which with this technique, becomes a little tedious.

Is there any way I can make js recognize the array(this.dataRecords) as an array?

ibrahim mahrir · Accepted Answer · 2017-04-21 10:59:12Z

4

Because inside the callback of each, this refers to the item from the array.

FIX1:

Store the value of this before entering each:

function className(data) {
    this.dataRecords = [];
    var that = this; // that is this
    $.each(data, function(key, item) {
        that.dataRecords.push(new dataRecord(item.record));
//      ^^^^ use that instead of this
    });
}

FIX2:

Use arrow functions, because they don't get bound to any this (they don't have a this so the only this is your class):

function className(data) {
    this.dataRecords = [];
    $.each(data, (key, item) => {
        this.dataRecords.push(new dataRecord(item.record));
    });
}

FIX3:

bind the callback of each to your class using Function.prototype.bind:

function className(data) {
    this.dataRecords = [];
    $.each(data, function(key, item) {
        this.dataRecords.push(new dataRecord(item.record));
    }.bind(this));
}

when bind is called on a function, the return value will be another function that has its this value always set to the parameter of bind. So, in the above we define a function that accepts two arguments (key, item), and then we bind it to this (this in this case is the instance of the class as we are still in the scope of the constructor), and we pass the returned value of bind (which is a new function similar to the original one except it has its this set to the instance of the class) to each.

edited Apr 21, 2017 at 10:59

answered Apr 21, 2017 at 10:48

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Techno Over a year ago

Thanks for this answer, this is a great way to have 'this' always refer to the class's instance.

ibrahim mahrir Over a year ago

You're welcome! I'm editing my answer to add some links to the docs. Could be useful.

Hampus Over a year ago

Hey you thief ;-) (you stole my accepted status) Arrow functions is a relatively new thing and is not present in many older browsers. So I recommend against them presently unless a transpiler is used. The solution that uses bind I also recommend against just because the cases where it might hurt more than help since bind itself is a method that returns a new copy of the function. Consider the case when using a bound function as a listener callback. It has to be stored somewhere for you to be able to remove it later. Possibly adding a memory leak.

Hampus Over a year ago

Still. I give you a thumbs up because of the thorough answer.

Techno Over a year ago

I have to agree with Hampus on the fact that many browsers might not support the 2nd and 3rd fix. However I do believe that this is the most helpful answer, not only for me, but for future cases, and people who use MDN actively as well. PS: I will still go for the first fix for compatibility reasons.

|

Hampus · Accepted Answer · 2018-06-18 07:35:24Z

3

this refers to different things in the two different contexts. A slight (and very commonly used) modification will make it work.

function className(data) {
    this.dataRecords = [];
    var that = this;
    $.each(data, function(key, item) {
        that.dataRecords.push(new dataRecord(item.record));
    }
}

edited Jun 18, 2018 at 7:35

answered Apr 21, 2017 at 10:45

Hampus

2,8291 gold badge27 silver badges40 bronze badges

1 Comment

Techno Over a year ago

Thank you for the quick and adequate response, this was the spot on solution I was looking for! :)

Collectives™ on Stack Overflow

Cannot read property 'push' of undefined on array in custom prototype

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related