Setting up standard JavaScript prototypal inheritance within a namespace?

Question

The standard prototypal inheritance in JavaScript is as follows:

function Animal() {
    this.legs = 0;
}
Animal.prototype.move = function () {
    alert("I'm moving!");
}

Bird.prototype = new Animal();
Bird.prototype.constructor = Bird;
function Bird() {
    this.legs = 2;
    this.wings = 2;
}
Bird.prototype.move = function () {
    alert("I'm flying!");
}

Does the function definition for Bird have to come after the assignment of Bird's prototype and constructor. I ask this because I'm trying to do this from within a namespace, and variable hoisting is causing my code to fail. As an example:

var namespace = {};
namespace.Animal = function () {
    this.legs = 0;
};
namespace.Animal.prototype.move = function () {
    alert("I'm moving!");
};

namespace.Bird.prototype = new namespace.Animal();
namespace.Bird.prototype.constructor = namespace.Bird;
namespace.Bird = function () {
    this.legs = 2;
    this.wings = 2;
};
namespace.Bird.prototype.move = function () {
    alert("I'm flying!");
};

Thanks to hoisting the namespace.Bird.prototype assignment statement and the namespace.Bird.prototype.constructor assignment statement fail. If I move the namespace.Bird function assignment above those two lines as shown in the following code block, however, the code seems to work.

namespace.Bird = function () {
    this.legs = 2;
    this.wings = 2;
};
namespace.Bird.prototype = new namespace.Animal();
namespace.Bird.prototype.constructor = namespace.Bird;

However, I don't know if there's a specific reason why most resources show the original order rather than having the function assignment come first.

Can someone please clarify?

Thanks!

Community · Accepted Answer · 2017-05-23 11:58:27Z

1

The reason has to do with parse-time availability of functions and runtime availability of functions.

For example:

var afunc = asdf;
function asdf(){}

is the same as

function asdf(){} 
var afunc = asdf;

But,

var afunc = asdf;
var asdf = function(){};

is not the same as

var asdf = function(){};
var afunc = asdf;

Does that make sense why?

Also, the answers to this question would probably help you

var functionName = function() {} vs function functionName() {}

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Aug 7, 2011 at 2:58

mrk

5,1273 gold badges29 silver badges42 bronze badges

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

2 Comments

natlee75 Over a year ago

Thanks for the response! Yes, that makes sense to me. That's what I was referring to with regards to hoisting. What I was wondering was whether I could switch up the order of the inheritance statements such that the function-to-variable assignment comes first (as shown in my last block of code above) so that it works within the context of a namespace. Thanks again for the response!

mrk Over a year ago

Your code is failing on namespace.Bird.prototype = new namespace.Animal(); because namespace.Bird is not defined yet. You could at least add namespace.Bird={}; beforehand and that works, but not sure what it buys you. It would make more sense to see the context you are working with.

Collectives™ on Stack Overflow

Setting up standard JavaScript prototypal inheritance within a namespace?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related