JavaScript extend Array and add methods to child protype?

Question

I want to create a js class that resembles simple music playlist (Array). I want to instantiate this playlist with IDs, each ID being a track ID in my database. I have interface like this:

function Playlist() {
    Playlist.prototype.current = 0;
    Playlist.prototype.prev = function() {
        if (this.current-1 < 0) {
            return null;
        }
        return this[--this.current];
    };
    Playlist.prototype.next = function() {
        if (this.current+1 >= this.length) { // length is index + 1
            return null;
        }
        return this[++this.current];
    };
    Playlist.prototype.seek = function(id) {
        for (i in this) {
            if (this[i] == id) {
                this.current = parseInt(i);
                return i;
            }
        }

        return false;
    };
    Playlist.prototype.getCurrent() {
            return this.current;
    };
};

The code above DOES NOT do what I want, because I imagine it as class that has it's method defined, that can be instantiated like this:

var newPlaylist = Playlist(2,3,5,10/* those are my ids */);

And currently the only way I've found is something like:

Playlist.prototype = new Array(2, 3, 5, 10/* those are my ids */);

Which does not make any sense since it can be instantiated as different objects. Any ideas are very welcome!

a) prototype methods are not to be inside the constructor b) Array can not properly be subclassed — Bergi
– Bergi, Commented Mar 11, 2013 at 16:14

Dmitry Manannikov · Accepted Answer · 2013-03-11 16:17:09Z

2

Best way - nested array;

function Playlist() {
    this.current = 0;
    this.list = Array.prototype.slice.call(arguments);;
};

Playlist.prototype.prev = function() {
    if (this.current-1 < 0) {
        return null;
    }
    return this.list[--this.current];
};
Playlist.prototype.next = function() {
    if (this.current+1 >= this.list.length) { // length is index + 1
        return null;
    }
    return this.list[++this.current];
};
Playlist.prototype.getCurrent = function() {
    return this.current;
};

var newPlaylist = new Playlist(2,3,5,10/* those are my ids */);

But you can't use list[i] to get element by index, but you just need add at() method to your class that provide similar functionality

PlayList.prototype.at(i) {
    return this.list[i];
}

answered Mar 11, 2013 at 16:17

Dmitry Manannikov

1,1541 gold badge10 silver badges14 bronze badges

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

Comments

Bergi · Accepted Answer · 2013-03-11 19:28:56Z

1

Since you cannot subclass Array, you should build wrapper objects with your Playlist constructor:

Playlist = (function() {
    function Playlist(list) {
        this.list = list || [];
    }

    Playlist.prototype.current = 0;
    Playlist.prototype.prev = function() {
        if (this.current <= 0)
            return null;
        return this.list[--this.current];
    };
    Playlist.prototype.next = function() {
        if (this.current+1 >= this.length)
            return null;
        return this.list[++this.current];
    };
    Playlist.prototype.seek = function(id) {
        return this.list.indexOf(id);
    };

    return Playlist;
})();

Usage:

var newPlaylist = new Playlist([2,3,5,10]);

edited Mar 11, 2013 at 19:28

answered Mar 11, 2013 at 16:18

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

4 Comments

ddinchev Over a year ago

The only thing that I did not like is that I can not have those definitions as single unit (function). Probably thats the best I could get with JS.

Bergi Over a year ago

Have a look at the module pattern for building code in "units".

ddinchev Over a year ago

I read this article: adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth still, I'm not quite sure how the above code would look like implemented using this. I know it's quite too much but would you be so kind to show me the same example with the module pattern? Thanks a ton!

Bergi Over a year ago

There's not much in here (as you don't really need it), but I've adapted the answer to show you the code sample.

Collectives™ on Stack Overflow

JavaScript extend Array and add methods to child protype?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related