CODEWITHSUNDEEP
javascript
Aron Solberg
Aron Solberg

Reputation: 6858

How to inherit from this javascript function

I'm trying to better understand inheritance in javascript. My goal is to write a function that declares some variables and sets up an environment so that other functions can build off of it. I'm kind of thinking along the lines of mixins in Ruby. Here is a simple example that is not working. 

function baseFunction(){

  this.my_var = "hello world";

};

function speakMessage(){

  alert(this.my_var);

}

speakMessage.prototype = baseFunction();

speakmessage();

I thought if I set the prototype the baseFunction than any properties not found in the speakMessage function will be searched for in the baseFunction. Is that not right? How cna I get this to work?

Upvotes: 3

Views: 144

Answers (3)

Jan Turoň
Jan Turoň

Reputation: 32912

Trivial answer, but... speakMessage(); (big M) :-)

Javascript is case-sensitive.

And great comment from HMR I missed: functions act like constructors if used with new in Javascript. Note the two new I added to your code:

my_var = "goodbye world";

function baseFunction() {
  this.my_var = "hello world";
}

function speakMessage() {
  alert(this.my_var);
}

speakMessage.prototype = new baseFunction(); // new: inherit from object
new speakMessage(); // object constructor: hello world
speakMessage(); // function: goodbye world from window object context

Also have a look at HMR's answer.

Upvotes: 4

HMR
HMR

Reputation: 39250

For future stumblers upon; the answers given before only address a typo in the OP's question. As for speakMessage inheriting from baseFunction the OP's code is completely wrong and should/could look something like this:

(note that constructor functions should start with a capital letter)

function BaseFunction(args){
  //name is instance specific
  //defaults to World
  this.name = (args&&args.name)?args.name:"World";
};
//shared members 
BaseFunction.prototype.saySomething=function(){
  return "From BaseFunction:"+this.name;
};

function SpeakMessage(args){
  //re use BaseFunction constructor code
  BaseFunction.call(this,args);
}
//inherit shared members from prototype
SpeakMessage.prototype = Object.create(BaseFunction.prototype);
//repair built in constructor value (or it'll point to BaseFunction)
SpeakMessage.prototype.constructor=SpeakMessage;
//extend saySomething, this is optional an shows how
// to add extra functionality to existing Parent functions
SpeakMessage.prototype.saySomething=function(){
  return BaseFunction.prototype.saySomething.call(this) + 
    ", from SpeakMessage:"+this.name;
};

var world = new SpeakMessage();//defaults name to be "world"
//following will output: From BaseFunction:World, from SpeakMessage:World
console.log(world.saySomething());
var op = new SpeakMessage({name:"OP"});
//following will output:From BaseFunction:OP, from SpeakMessage:OP
console.log(op.saySomething());
var parent = new BaseFunction();
console.log(parent.saySomething());//=From BaseFunction:World

As in comments; for more info about constructor functions and prototype: https://stackoverflow.com/a/16063711/1641941

As for the comment mentioning closures; you can use closures instead of constructor functions for simpler objects:

var baseFunction=function(message){
  return function(){
    console.log("Hello "+message);
  };
}

var world = baseFunction("World");
var op = baseFunction("OP");
world();//=Hello World
op();//=Hello OP

More on closures here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

Upvotes: 2

steve
steve

Reputation: 153

Tiny error. You called speakmessage(); when you created the function speakMessage(){}

This should fix it.

function baseFunction(){

  this.my_var = "hello world";

};

function speakMessage(){

  alert(this.my_var);

}

speakMessage.prototype = baseFunction();

speakMessage();

Upvotes: 2

Related Questions