Inheritance in Javascript - protoyping not in definition-part?

Question

I am currently switching from AS3 to JavaScript.
I still have some trouble with understanding inheritance-concepts.
What I do not understand is why the following code is not working properly:

Base = function () {
    this.coolVar = "great";
}  

SmallControl = function () {

    // Inheritance:
    this.prototype = new Base();
    this.prototype.constructor = SmallControl;

    this.prototype.init = function(aMap) {
        console.log('init');
        console.log('coolVar?: ' + this.coolVar);
    }
}  
var foo = new SmallControl();  
//foo.init();         // --> TypeError: foo.init is not a function  
foo.prototype.init(); // --> works

If I put the prototype definitions outside of the "SmallControl"-Function everything works fine... but I don't understand that.

From first glance it seems to me that when you defined: this.prototype.init you defined init on the prototype object NOT the SmallControl object because 'this' isn't the same as SmallControl - it's the "current object" at runtime instantiation of a SmallControl. That's why foo.prototype.init does work. When you say "put the prototype definitions outside..." I assume you did: SmallControl.prototype = function init(aMap) - yes, that will work and is the idiom when doing classical inheritance. Examples: github.com/roblevintennis/Testing-and-Debugging-JavaScript/tree/… — Rob
– Rob, Commented Oct 29, 2009 at 5:44

Quentin · Accepted Answer · 2009-07-30 09:21:43Z

1

I think you want something like this:

// Create the super class
Base = function () {
    this.coolVar = "great";
};  

// Create the new class
SmallControl = function () {
}; 
// Set the prototype of SmallControl to be an instance of Base. 
// This runs the Base constructor _immediately_ which sets up the variable
SmallControl.prototype = new Base();
// Add the init method to the SmallControl class
SmallControl.prototype.init = function(aMap) {
    console.log('init');
    console.log('coolVar?: ' + this.coolVar);
}
// Create an instance of SmallControl    
var foo = new SmallControl();  
foo.init();

answered Jul 30, 2009 at 9:21

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Rob Over a year ago

-- David -- nice classical inheritance example! Roman, this WILL work. However, if you need more efficiency you will want to research: "Constructor Stealing". Then you will want to replace the SmallControl.prototype = new Base(); line because you will be calling the super's constructor twice. You'll then need to implement a helper method to inheritcProto(Sub, Sup). I have all of this code working and TDD'd here: github.com/roblevintennis/Testing-and-Debugging-JavaScript

Miles · Accepted Answer · 2009-07-30 09:43:57Z

1

prototype is only a meaningful property of constructors. The object's actual prototype (which is accessible in some environments as the property __proto__, but this is not portable) is set to be the constructor's prototype attribute at the time the object is constructed. Changes to the constructor's prototype (adding properties to the prototype) will be reflected in live objects, but not if you set Constructor.prototype to be a completely different object.

In your constructor, you're setting the prototype attribute of the constructed object (this). This attribute has no special meaning on something that's not a constructor function. When you set it outside of the function, you set it on the constructor function.

edited Jul 30, 2009 at 9:43

answered Jul 30, 2009 at 9:31

Miles

32.7k7 gold badges69 silver badges77 bronze badges

Collectives™ on Stack Overflow

Inheritance in Javascript - protoyping not in definition-part?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related