JSFiddle - React, Tailwind, and code Playground

by Jim Fallin

HTML

<body>
     <h1>Close as you can get to inheriting from an Array</h1>

    
    <h2>By Jim Fallin  5/22/2015</h2>
 <a target="_blank" href="https://www.linkedin.com/pub/jim-fallin/42/6b0/564">Jim Fallin at Linked In</a> 

    <P>After searching for 2 days for a good method to do this, I stumbled upon a great article by kangax <a href="http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/" target="_blank"> Here </a>. After lots of though and effort, I found a way around it!</p>
    <p>Although I can not directly inherit, I came up with the idea of storing the internal methods of Array in internal variables and putting my own methods in their place. By calling the internal methods I can not override the functionality while maintaining a true array.</p>
    <p>You will see that I have overridden the push method but of course, you can override all of them and make a typed Array, Stack, Queue, etc. and it will still act as a real array.</p>
    <p>The tests below are based on the failures of other methods in the article.
        <div id="resultsDiv"></div>
</body>

CSS

p {
    background-color:#ffff99;
    padding:10px;
    margin:18px;
}
.resultElements {
    display:inline-block;
    position:relative;
    width:40%;
    vertical-align:top;
}
td {
    height:20px;
    border:1px double black;
    font-size:14px;
    text-align:center;
}

JavaScript

var ArrayGenerator = (function () {
    var args = [].slice.call(arguments);
    var Arr = new Array();
    var overiddenPush = Arr.push;
    args.forEach(function (arg) {
        Arr.push(arg);
    });
    args = null;
    Arr.push = function (args) {
        overiddenPush.apply(this, arguments);
    }
    Arr.TableName = "YourTable";
    return Arr;
});

//You initialize your array like this var MyArray=new ArrayGenerator(1,2,3);


//--------------------Testing and Results display-------------------
// Results
var Test = "";
//Just strings
Test += "This is a normal list of elements";
var arrayLike1 = new ArrayGenerator("One", "Two", "Three");
var realArray1 = new Array("One", "Two", "Three");
Test += showArrays(arrayLike1, realArray1)

//The tricky integers with a push
Test += "<br/><br/>Tricky Integers with multiple pushes";
var arrayLike2 = new ArrayGenerator(1, 2, 3);
var realArray2 = new Array(1, 2, 3);
arrayLike2.push(10, 2, "Hello");
realArray2.push(10, 2, "Hello");
Test += showArrays(arrayLike2, realArray2);

//Shows Properties can be added to the semi-inherited Array
Test += "<br/><br/>Shows Properties can be added<br/>";
if (arrayLike2.TableName == undefined) {
    Test += "ArrayLike TableName is undefined<br/>";
} else {
    Test += "Array Like TableName is " + arrayLike2.TableName + "<br/>";
}
if (realArray2.TableName == undefined) {
    Test += "Real Array TableName is undefined<br/>";
} else {
    Test += "Real Array TableName is " + realArray2.TableName + "<br/>";
}

//Show seperate Instances
Test += "<br/><br/>Shows Array Like 1 and 2 are seperate instances<br/>";
Test += "Array Like 1 length is " + arrayLike1.length + "<br/>";
Test += "Array Like 2 length is " + arrayLike2.length + "<br/>";


document.getElementById('resultsDiv').innerHTML = Test;
// These are just methods to show the results
function showArrays(testArray, realArray) {
    //Header row
    var txt = "<table width=80%>";
    txt += "<tr>" + td("") + td("Length") +...