[JS] Uitbreidingen op native objecten

[Michali]

Zoals jullie wel weten kun je in javascript middels het prototyping systeem zelf object uitbreiden. Ook de native objecten zijn zo uit te breiden. Ik was van mening dat het standaard Array object wel erg kaal is, dus heb ik daar wat leuke dingen voor geschreven. Ik ben verder ook benieuwd of jullie ook van dit soort uitbreidingen maken en misschien kun je dan laten zien wat en waarom je het geschreven hebt.

Een paar erg handige functies zijn deze:

JavaScript:

Array.prototype.map = function(func)
{
    for ( var i = 0; i < this.length; i++ ) func(this[i]);
}

Array.prototype.find = function(func)
{
    for ( var i = 0; i < this.length; i++ )
    {
        if ( func(this[i]) ) return this[i];
    }
    return null;
}

Array.prototype.findAll = function(func)
{
    var items = new Array();
    for ( var i = 0; i < this.length; i++ )
    {
        if ( func(this[i]) ) items.push(this[i]);
    }
    return items;
}

De volgende code beschrijft hoe ze werken en toegepast kunnen worden.

JavaScript:

var objects = [
    { id: 1, name: 'a' },
    { id: 2, name: 'b' },
    { id: 3, name: 'c' },
    { id: 4, name: 'd' },
    { id: 5, name: 'e' }
];

var ids = [];
function collectObjectID(obj) { ids.push(obj.id); }

objects.map(collectObjectID);
alert(ids); // output: 1, 2, 3, 4, 5

var objC = objects.find(function(obj) { return obj.name == 'c'; });
alert(objC.id); // output: 3

ids = [];
objects.findAll(function(obj) { return 1 < obj.id && obj.id < 5; }).map(collectObjectID);
alert(ids); //output: 2, 3, 4

Het resultaat van deze functies is dat ik bijna nooit meer lusjes hoef te schrijven om door een array heen te loopen. Op het resultaat van findAll bijvoorbeeld, kun je direct weer een map chainen, zoals in het voorbeeld. Erg handig om op een selecte groep items een bepaalde handeling uit te voeren.


Dan nog eentje die velen wel toepassen of kennen:

JavaScript:

Function.prototype.inherits = function(parent)
{
    for ( var func in parent.prototype )
    {
        this.prototype[func] = parent.prototype[func];
    }
}

Op deze manier kun je multiple inheritence toepassen. Het aanroepen van de super class constructor doe ik altijd zo:

JavaScript:

function A(param)
{
    this.prop = param;
}
A.prototype.getProperty = function()
{
    return this.prop;
}

function B(paramB, paramA)
{
    A.call(this, paramA);
    this.propB = paramB;
}
B.inherits(A);
B.prototype.getPropB = function()
{
    return this.propB;
}

Ik merk wel dat het prototyping verhaal van javascript erg krachtig is. Ik ben dan ook benieuwd hoe jullie dit toepassen.

[djluc]

Dit is wel een erg interessant topic als je met dit soort dingen aan de slag gaat: [rml][ purisme] prototypes / OO in JavaScript *[/rml]