How to define a new class extending standard javascript class like Array?

Question

It is my understanding that the "standard" way to define a new ClassB extending ClassA is as following:

function ClassA() {
   this.a = {};  // ClassA's instance member.
}
ClassA.prototype.meth1 = function () { .. }  // ClassA's method, shared by all instance.

function ClassB() {}
ClassB.prototype = new ClassA()              // <== "standard" way to extend
ClassB.prototype.meth2 = function () {...}   // ClassB's method

When I try to define a new class ArrayX like following:

function ArrayX() {
}
ArrayX.prototype = new Array()
ArrayX.prototype.removeDup = function removeDup() { 
     var o = [];
     for(var j=0; j<this.length; j++) {
          if(notExist(this[j])
              o.push(this[j])
     }
     return o
     function notExist(itm) {
         for(var j=0; j<o.length; j++) {
               if(o[j]===itm)return false
         }
         return true;  
     }

var x = new ArrayX();
console.log(x.length) // returns 0.  Good
console.log(x)        // returns [].  Good
x[0] = 0;
console.log(x);    // returns [].  No good.  I expect x should have one element.
(new ArrayX([1,1,2,3,3])).removeDup()   // I expect returns [1,2,3]

I know I can define the function-removeDup in following way:

Array.prototype.removeDup = function removeDup() { ...}

However, I just want to define a new class extending some standard javascript class like Array, or, even the DOM classes.

So, how to define a new class extending standard javascript class like Array?

Basically, you shouldn't try to do this, it won't work well. The definitive treatment of the topic is at http://perfectionkills.com/how-ecmascript-5-still-does-not-allow-to-subclass-an-array/. You can also find half-a-dozen related questions on SO by searching for "subclass array javascript". By the way, `Array` is not a "class", it's a "built-in type". — , Dec 23 '14 at 12:52
possible duplicate of [Is this a reasonable way to 'subclass' a javascript array?](http://stackoverflow.com/questions/4761000/is-this-a-reasonable-way-to-subclass-a-javascript-array) — , Dec 23 '14 at 12:53
can you describe some scenario how you gonna use ArrayX? I suppose you just want to create some object which can be applied to Array funcitons? — hjl, Dec 23 '14 at 13:02
It is not a particular scenario to solve question. Adding new functions to **Array.prototype** is one approach#1. To create a new class to extend Array like this **ArrayX.prototype = new Array()** is another approach#2. So, why approach#2 does not work? In standard DOM classes. They are all extending from bottom EventTarget class up to. I just want to know how can I further extending such standard classes? I believe there must be some way! — Johnson Cheung HK06, Dec 23 '14 at 14:20
torazaburo, thank you for comment and the link (perfectionkills.com). From the link, it has a lot of content and I get inspiration. I have posted my answer, please have a look. – — Johnson Cheung HK06, Dec 23 '14 at 16:07

score 1 · Answer 1 · answered Dec 23 '14 at 12:52

1

no need to create a very own class:

Array.prototype.myFunction = function(){
   //your custom code
}

answered Dec 23 '14 at 12:52

Max

336
1
12

Max, thank you for answer. I know this approach. Now, I have changed the question to make sure is answered in the direction I am looking. Please have a look. – Johnson Cheung HK06 Dec 23 '14 at 14:00

Johnson Cheung HK06 · Accepted Answer · 2014-12-24T01:05:58.967

By referring link#1, link#2 & link#3, I try this, it works as I expected.

function ArrayX() { 
     // Array.apply(this, arguments)
                                  // calling Array() has same effect as new Array() according to
                                  // [link#3]
                                  // It is no good here.

     this.push.apply(this, arguments); // <-- this works OK. Suggested by link#2

     debugger;                    // Now, `this` has array of value [1, 1, 2, 3, 3], which is
                                  // found in arguments when running new ArrayX(1,1,2,3,3);
                                  // Good.
}
ArrayX.prototype = new Array();   // Suggested by link#1
ArrayX.prototype.removeDup = function removeDup() {
     var o = [];
     for(var j=0; j<this.length; j++) {
          if(notExist(this[j]))
              o.push(this[j])
     }
     return o
     function notExist(itm) {
         for(var j=0; j<o.length; j++) 
              if(o[j]===itm)return false
     }
     return true;  
}
var x = new ArrayX(1,1,2,3,3);  // x is now [1,1,2,3,3].  Good
console.log(x.length)           // 5                      Good
var y = x.removeDup();          // y is [1,2,3].  Good
console.log(y);

How to define a new class extending standard javascript class like Array?

2 Answers2