Search code examples
javascriptarraysclassextend

Ways to extend Array object in javascript


i try to extend Array object in javascript with some user friendly methods like Array.Add() instead Array.push() etc...

i implement 3 ways to do this. unfortunetly the 3rd way is not working and i want to ask why? and how to do it work.

//------------- 1st way
Array.prototype.Add=function(element){
     this.push(element);
};

var list1 = new Array();
list1.Add("Hello world");
alert(list1[0]);

//------------- 2nd way
function Array2 () {
    //some other properties and methods
};

Array2.prototype = new Array;
Array2.prototype.Add = function(element){
  this.push(element);  
};

var list2 = new Array2;
list2.Add(123);
alert(list2[0]);

//------------- 3rd way
function Array3 () {
    this.prototype = new Array;
    this.Add = function(element){
      this.push(element);  
    };
};

var list3 = new Array3;
list3.Add(456);  //push is not a function
alert(list3[0]); // undefined

in 3rd way i want to extend the Array object internally Array3 class. How to do this so not to get "push is not a function" and "undefined"?

Here i add a 4th way.

//------------- 4th way
function Array4 () {
    //some other properties and methods
    this.Add = function(element){
        this.push(element);
    };
 };
Array4.prototype = new Array();

var list4 = new Array4();
list4.Add(789);
alert(list4[0]);

Here again i have to use prototype. I hoped to avoid to use extra lines outside class constructor as Array4.prototype. I wanted to have a compact defined class with all pieces in one place. But i think i cant do it otherwise.


Solution

  • Method names should be lowercase. Prototype should not be modified in the constructor.

    function Array3() { };
    Array3.prototype = new Array;
    Array3.prototype.add = Array3.prototype.push
    

    in CoffeeScript

    class Array3 extends Array
       add: (item)->
         @push(item) 
    

    If you don't like that syntax, and you HAVE to extend it from within the constructor, Your only option is:

    // define this once somewhere
    // you can also change this to accept multiple arguments 
    function extend(x, y){
        for(var key in y) {
            if (y.hasOwnProperty(key)) {
                x[key] = y[key];
            }
        }
        return x;
    }
    
    
    function Array3() { 
       extend(this, Array.prototype);
       extend(this, {
          Add: function(item) {
            return this.push(item)
          }
    
       });
    };
    

    You could also do this

    ArrayExtenstions = {
       Add: function() {
    
       }
    }
    extend(ArrayExtenstions, Array.prototype);
    
    
    
    function Array3() { }
    Array3.prototype = ArrayExtenstions;
    

    In olden days, 'prototype.js' used to have a Class.create method. You could wrap all this is a method like that

    var Array3 = Class.create(Array, {
        construct: function() {
    
        },    
        Add: function() {
    
        }
    });
    

    For more info on this and how to implement, look in the prototype.js source code