Calling a Prototype's Function

Question

When I run the following script, I get the error that sub.hello is not a function. Why not? Sub's prototype is Base and Base has the function hello. Since Sub does not have the function hello, shouldn't its prototype then be checked for the function?

function Base() {
}
Base.prototype.hello = function() {
 alert("hello");
}
Sub.prototype = Base;
function Sub() {
 Base.call(this);
}
var sub = new Sub();
sub.hello();

Answer 1

A better way to do inheritance in JavaScript is to use the Object.create function:

function Base() {
}
Base.prototype.hello = function() {
 alert("hello");
}
function Sub() {
 Base.call(this);
}
Sub.prototype = Object.create(Base.prototype);
// Restore constructor property
Sub.prototype.constructor = Sub;
var sub = new Sub();
sub.hello();

See jsFiddle

For further reading, check the Mozilla reference

• ryeballar: Don't forget to set Sub.prototype.constructor = Sub; since you've overridden Sub's constructor with Base's constructor.
• ryeballar: Yep it still runs, my concern targets cases wherein the constructor property provides useful, cases such as this .
• hendryau: @WouterHuysentruit, @ryeballar: Setting Sub.prototype to Object.create(Base.prototype) override's Sub's constructor with Base's? Also, why do we pass Base.prototype in Object.create() instead of Base?
• huysentruitw: @hendryau no it doesn't, see jsfiddle.net/5stg6hzy/1, but there is a corner case where code could rely on prototype.constructor for whatever reason, see link of ryeballer
• huysentruitw: @hendryau answer to your second question: because you only want to clone the Base's prototype. As calling the Base's constructor is handled in Sub's constructor.

Answer 2

The function must exist on the prototype, not on the prototype's prototype.

You've effectively done this:

Sub.prototype.prototype.hello = function () { }

So, instead of Base.prototype.hello, either use Base.hello:

function Base() { }
Base.hello = function() { alert("hello"); }
Sub.prototype = Base;
function Sub() {
 Base.call(this);
}
var sub = new Sub();
sub.hello();

Or make Sub.prototype and instance of Base:

function Base() { }
Base.prototype.hello = function() { alert("hello"); }
Sub.prototype = new Base;
function Sub() {
 Base.call(this);
}
var sub = new Sub();
sub.hello();

• user229044: @WouterHuysentruit Downvote posts, not people. Don't be a jerk just because you are wrong and I pointed it out. This is in the rules of this site. I watched your reputation decrease by 1 in the exact instant that you deleted your answer and my received a downvote.
• huysentruitw: I downvote because you removed hello from Base's prototype. Don't be a smartass and show him the real way of inheriting in js
• user229044: @WouterHuysentruit My post does show the "real" way of inheriting in JS.
• ryeballar: @meagar You're first snippet is confusing, if you're trying to create an abstract class that cannot be instantiated then I think its better to create an Object with static methods that will be assigned to Sub's prototype.
• ryeballar: Furthermore, the second snippet actually invokes the Base constructor as opposed to @WouterHuysentruit answer wherein using Object.create(Base.prototype) does not. There's nothing wrong with it, it just invokes the constructor unnecessarily.