CODEWITHSUNDEEP
javascriptinheritanceprototypeextend
AdityaParab
AdityaParab

Reputation: 7100

Unable to extend javascript prototype

I am just playing around with the idea of subclassing with Javascript. I like to pretend that extending native objects (like Array, String etc) is a bad idea. This, however true, is completely out of my understanding as to why.

Having said that, let's get on with it.

What I'm trying to do is to extend Array (now, extend may not be right term for what I'm doing)

I want to create my new class MyArray and I want to have 2 methods on it. .add and .addMultiple.

So I implemented it like this.

function MyArray(){
    var arr = Object.create(Array.prototype);
    return Array.apply(arr, arguments);
}

MyArray.prototype = Array.prototype;

MyArray.prototype.add = function(i){
    this.push(i);
}

MyArray.prototype.addMultiple = function(a){
    if(Array.isArray(a)){
        for(var i=0;i<a.length;i++){
            this.add(a[i]);
        }
    }
}

This works correctly, but if I do

console.log(Array.prototype.addMultiple );
console.log(Array.prototype.add);

I get [Function] and [Function]. So this means my code is modifying the native Array object. Something that I am trying to avoid. How do I change this code in a way that those two console.logs will give me undefined but I am still able to use native Array.prototype methods like .push?

TIA

Upvotes: 0

Views: 82

Answers (4)

user3555953
user3555953

Reputation: 

Object.create(Array.prototype);

This just creates a new object and return the objects.

So as per your scenarios, you have just created array object and added some methods to your array object - MyArray. It will affect the native Array.

You're just modifying your cloned object.

Upvotes: 0

Vanojx1
Vanojx1

Reputation: 5574

use class extension

class MyArray extends Array {
  add(i) {
    this.push(i);
    return this;
  }
  addMultiple(a) {
    if (Array.isArray(a)) {
      for (var i = 0; i < a.length; i++) {
        this.add(a[i]);
      }
    }
    return this;
  }
}

var test = new MyArray();
test.addMultiple([1,2,3,4,5]).add(6).add(7);
console.log(test, test.indexOf(6));

Upvotes: 0

qzb
qzb

Reputation: 8808

You should setup proper prototypes chain:

function MyArray(){
    Array.apply(this, arguments);
}

MyArray.prototype = Object.create(Array.prototype);

Object.create just creates new object with specified prototype, so after this operation following is true:

MyArray.prototype !== Array.prototype; // true
Object.getPrototypeOf(MyArray.prototype) === Array.prototype; // true

Upvotes: 1

TV&#39;s Frank
TV&#39;s Frank

Reputation: 818

This:

MyArray.prototype = Array.prototype;

results in MyArray.prototype pointing to the same object as Array.prototype. So everything you do to MyArray.prototype after that will also be done to Array.prototype.

A way to solve this is to instead store a shallow copy of Array's prototype in MyArray:

MyArray.prototype = clone(Array.prototype);

I copied that from here:

Copy prototype for inheritance?

Upvotes: 0

Related Questions