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 perfectionkills.com/…. 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". — user663031
– user663031, Commented Dec 23, 2014 at 12:52
possible duplicate of Is this a reasonable way to 'subclass' a javascript array? — user663031
– user663031, Commented Dec 23, 2014 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
– hjl, Commented Dec 23, 2014 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
– Johnson Cheung HK06, Commented Dec 23, 2014 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
– Johnson Cheung HK06, Commented Dec 23, 2014 at 16:07

Max · Accepted Answer · 2014-12-23 12:52:51Z

1

no need to create a very own class:

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

answered Dec 23, 2014 at 12:52

Max

3361 silver badge12 bronze badges

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

1 Comment

Johnson Cheung HK06 Over a year ago

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 · Accepted Answer · 2014-12-24 01:05:58Z

0

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);

edited Dec 24, 2014 at 1:05

answered Dec 23, 2014 at 15:28

Johnson Cheung HK06

1036 bronze badges

1 Comment

user663031 Over a year ago

Is length handled properly?

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related