JavaScript Namespacing and Inheritance

Question

I have some code in jsFiddle here: http://jsfiddle.net/xyuY6/

And the code:

var App= {};

App.WebPage = {
 WebPage : function(name) {
     alert("In Super");
     this.name = name;  
 },

 Home : function(name) {
      alert("In Sub");
      App.WebPage.WebPage.call(this, name);
 }


};

App.WebPage.WebPage.prototype.sayName = function() {
alert(this.name);
};

inherit(App.WebPage.WebPage, App.WebPage.Home);

var x = new App.WebPage.Home("zack");
x.sayName();

function inherit(subType, superType) {
    alert("IN HERE");
    var p = Object.create(superType);
    p.constructor = subType;
    subType.prototype = p;
}

What I'm trying to do is create a App namespace with two constructors in this namespace, WebPage and Home. WebPage is a "super type" and Home is the "sub type". Home should inherit everything from WebPage.

The problem though, as you'll see when you run the JavaScript, is the sayName function defined on the WebPage prototype is not being called when I do x.sayName. Thus, it's not being inherited.

Why?

Thanks for the help!!!

mbinette · Accepted Answer · 2012-12-31 03:31:31Z

2

It seems like you got the superclass and subclass mixed up at some point (either in the call or in inherit's definition)...

Here's the fixed code (if I understand what you are trying to do): http://jsfiddle.net/45uLT/

var App= {};

App.WebPage = {
     WebPage : function(name) {
         alert("In Super");
         this.name = name;  
     },

     Home : function(name) {
          alert("In Sub");
          App.WebPage.WebPage.call(this, name);
     }


};


App.WebPage.WebPage.prototype.sayName = function() {
    alert(this.name);
};

inherit(App.WebPage.WebPage, App.WebPage.Home);

var x = new App.WebPage.Home("zack");
x.sayName();

function inherit(superType, subType) {
    alert("IN HERE");
    var p = new superType;
    subType.prototype = p;
    subType.prototype.constructor = subType;
}

Hope this is what you wanted.

answered Dec 31, 2012 at 3:31

mbinette

5,0923 gold badges27 silver badges32 bronze badges

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

3 Comments

user1513171 Over a year ago

I updated the jsFiddle. Trying to override the sayName method. Could you tell me why this isn't working? jsfiddle.net/45uLT/1

user1513171 Over a year ago

Never mind, just needed to change up the order of some calls.

mbinette Over a year ago

Yup, you need to redefine the method after you inherit! :-) Glad I could help!

hunterloftis · Accepted Answer · 2012-12-31 03:38:54Z

1

Here's a working example in jsfiddle based on what you're trying to do above:

http://jsfiddle.net/8GwRd/

var App = (function() {
    function WebPage(name) {
        this.type = 'WebPage';
        this.name = name;
    }

    WebPage.prototype.sayName = function() {
      alert(this.name + ' is a ' + this.type);
    };

    function Home(name) {
        WebPage.call(this, name);
        this.type = 'Home'
    }

    Home.prototype = new WebPage();

    return {
        WebPage: WebPage,
        Home: Home
    };       

})();

var y = new App.WebPage('bob');
y.sayName();

var x = new App.Home("zack");
x.sayName();

answered Dec 31, 2012 at 3:38

hunterloftis

13.8k5 gold badges51 silver badges53 bronze badges

1 Comment

user1513171 Over a year ago

This approach is pretty different than mine. Is there a reason this approach is possibly better?

Collectives™ on Stack Overflow

JavaScript Namespacing and Inheritance

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related