Instance based JavaScript Inheritance

Question

My question is related to JavaScript Inheritance,

var a = new Array();
var b = new Array();

a.prototype.max = function () {
 alert("Max");
}

b.max();

As per my understanding b.max() will give error saying b doesn't have max , but surprisingly(for me) it gives me error at 3rd line a doesn't have prototype. when I do typeof a its gives me Object, object can have prototype property.I read JavaScript follow prototype inheritance,i.e. instance based inheritance, so my question is I have created an instance of Array, still prototype property is not define.

Could you please explain me where I am going wrong, or what concept I've not understood properly

Answer 1

prototype belongs to function object, not every object.

So Array.prototype is right, a.prototype is wrong.

Answer 2

It should be like this:

var a = new Array();
var b = new Array();

Array.prototype.max = function () {
 alert("Max");
}

b.max();

Answer 3

> var a = new Array();

a is an instance of an Array object, only Function objects have a prototype property by default. All objects have a hidden [[Prototype]] property that you can't access (other than through the non–standard __proto__ property) and references their constructor's prototype at the time they are constructed (or as otherwise modified via __proto__).

So when attempting to resolve:

a.prototype.max 

then

a.prototype

is undefined so attempting to get the max property of undefined throws a reference error.

b is also an instance of Array, it doesn't have a max property. Even if you do:

a.prototype = {max: function(){});

b will still not have a max property since it inherits from Array.prototype, not a.prototype.

PS. See ECMA-262 §15.3.2.1: "A prototype property is automatically created for every function, to provide for the possibility that the function will be used as a constructor.".

Answer 4

It's better not to extend things like Array, especially when you write a library or expect your code to be re used by many other programs.

Object.prototype.somethingElse=22;
Array.prototype.something=22;
var arr=[1];
for(thing in arr){
  console.log(thing);//0, something,somethingElse
};

Besides this problem your code may be used with libraries that have a conflicting implementation of Array.prototype.max.

From an Iframe or Frame the max function doesn't exist because Array in an (i)frame is not the same as the Array on the main page.

Instead write a function that you can call or pass the array as an extra argument:

function max(){
  console.log(this);//<=[1,2]
  return Math.max.apply(Math,this);
};
var arr = [1,2];
max.call(arr);//=2

Answer 5

The prototype property is defined on the function object itself, not the instance. You could technically update the Array.prototype with you max function but then all Arrays in the current frame (past and present) will have the 'max' method. It is frowned upon to modify the prototype of native classes if you expect to work alongside 3rd party JavaScript. If you would like to inherit from the native Array class, you can use the simple inherits function listed below and call the parent class constructor. For a more detailed explanation on why this method of inheritance is preferred over others, please check out this post on how the inherits function works

function inherits(childConstructor, parentConstructor){
    var TempConstructor = function(){};
    TempConstructor.prototype = parentConstructor.prototype; // Inherit parent prototype chain

    childConstructor.prototype = new TempConstructor(); // Create buffer object to prevent assignments directly to parent prototype reference.
    childConstructor.prototype.constructor = childConstructor; // Reset the constructor property back the the child constructor (currently set to TempConstructor )
};

var CustomArray = function(){
    // Normally the below line would suffice, but the native Array class is overloaded in that a cast (or call) returns a new array instance.
    //Array.apply(this, arguments);

    this.push.apply(this, arguments); // This will achive what we originally wanted from `Array.apply(this, arguments);`
}
inherits(CustomArray, Array);

CustomArray.prototype.max = function(){
    var length = this.length;

    if(!length){
        return;
    }

    var maxValue = this[0];

    for(var i = 1; i < length; ++i){
        var value = this[i];

        if(value > maxValue){
            maxValue = value;
        }
    }

    return maxValue;
}




var nativeArray0 = new Array();
var nativeArray1 = new Array(1, 3, 4, 9, 5, 0, 7, 11, 2);

var customArray0 = new CustomArray();
var customArray1 = new CustomArray('c', 'a', 'd', 'b', 'f', 'y', 'g', 'p');

alert('customArray0.max() = ' + customArray0.max());  // undefined
alert('customArray1.max() = ' + customArray1.max());  // y
alert('CustomArray.prototype.max.call(nativeArray1) = ' + CustomArray.prototype.max.call(nativeArray1)); // 11

alert('nativeArray0.length = ' + nativeArray0.length); // 0
alert('nativeArray1.length = ' + nativeArray1.length); // 9
alert('nativeArray1[3] = ' + nativeArray1[3]); // 9

alert('customArray0.length = ' + customArray0.length); // 0
alert('customArray1.length = ' + customArray1.length); // 8
alert('customArray1[3] = ' + customArray1[3]); // b