Is there a way to change the prototype from within a function in Javascript?

Question

I have this type of code for prototypal inheritance in Javascript.

function A() {
    this.a = 1;
}
function B() {
    someEl.innerHTML(this.a);
}
B.prototype = new A();

However, I am wondering if there is a better way to do it, preferably one that brings the prototype declaration into the declaration of B.

I tried setting this.prototype in B, but it just showed this.a as undefined.

So, is there a better way to do this?

Answer 1

The prototype property should be used only in constructor functions, this.prototype doesn't makes sense because this just the new object instance, not the constructor.

Assign the prototype inside the constructor itself isn't a good idea, since that assignment will be executed each time you create a new object (by new B();).

Your code seems perfectly valid to me, the only thing that you should be aware of, is that if you replace the prototype property of a constructor, like you do it with B.prototype = new A(); the constructor property of the object instances of B, will point to A.

Usually is recommended to restore that property, e.g.:

function A() {
    this.a = 1;
}

function B() {
    someEl.innerHTML(this.a);
}

B.prototype = new A();
B.prototype.constructor = B; // restore the `constructor` property

var foo = new B;
foo.constructor === B; // true

Give a look to:

• Constructors considered mildly confusing (article)
• Setting javascript prototype function within object class declaration (SO question)

Answer 2

Try:

function A() {
    this.a = 1;
}
function B() {
    this.prototype = new A();
    someEl.innerHTML(this.A.a); //notice A.a
}

Answer 3

function MyClass() {
    this.initialize();
}

MyClass.prototype = {
    initialize: function() {               // adding a function name
        this.some_var = "Blue";            // makes debugging easier
    },
    tell_color: function() {
        alert(this.color);
    },
    color: "red"
}

var instance = new MyClass();
instance.tell_color();

This wasn't my idea, but I don't know anymore where I've found it.

Answer 4

Inheritance in JS is a little weird, but everyone else is correct that you should never put a prototype within a constructor. The point of prototyped functions/vars is so you only have a singular instance of that function for ALL instances of said class to use. Likewise it is good for class vars, a singular value which every instance will reference.

Really, you should make class B inherit from class A:

function B(){
     this.object = new A();
}

B.prototype.a = function(){
     return object.a;
}

which can be a little annoying since you must then create new getters/setters, buuuuuuuttttt, if you are feeling a little adventurous, you can build something like this......

function breakApart(what){
     var functions = [];
     var properties = [];

     for(property in what){
         if(typeof what[property] == 'function'){
             functions.push({'name':property,'value':what[property]});
         }else{           
             properties.push({'name':property,'value':what[property]});
         }
     }

     var data = [
         {'title':'functions','data':functions},
         {'title':'properties', 'data':properties}
         ];

     return data;
}

Add a few eval() calls and some logic and you can make this function build you new getters/setters/function references.