无法扩展JavaScript原型

Question

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.log s will give me undefined but I am still able to use native Array.prototype methods like .push ?

TIA

Answer 1

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

Answer 2

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?

Answer 3

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

Answer 4

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.