Javascript calling prototype functions in construc

Question

I keep getting an error saying that my functions are not defined when I was trying to call the prototype functions in the constructor and I dont know whats wrong with it.

Here's the code I have:

function Renderer()
{
    initialiseWebGL();
    initialiseShader();
    initialiseBuffer();
}

Renderer.prototype.initialiseWebGL()
{
    //Do stuff.
};

Renderer.prototype.initialiseShader()
{
        //Do Shader's stuff
};

Renderer.prototype.initialiseBuffer()
{
        //Do Buffers
};

What is wrong with it?

Answer 1

Your syntax is wrong. Use this:

function Renderer() {
    this.initialiseWebGL();
    this.initialiseShader();
    this.initialiseBuffer();
}

Renderer.prototype.initialiseWebGL = function () {
    //Do stuff.
};

Renderer.prototype.initialiseShader = function () {
        //Do Shader's stuff
};

Renderer.prototype.initialiseBuffer = function () {
        //Do Buffers
};

After that you can create new object and use it by:

var rendererInstance = new Renderer();

Answer 2

There are a few things wrong with your Code

1.initialiseWebGl() would look for a function declared in the Global scope -> there is no function

• You should use this.initialiseWebGl() to access the Objects Method
  Note: this refers to the Instance of Renderer in this case

2.You are not assigning a function with Renderer.prototype.initialiseWebGL() instead you try to invoke the Renderers prototype method initialiseWebGl which gives you an error, as its not defined

3.Because the { are moved down a line they get interpreted as a Block -> this code gets executed.
If you'd had them after your () you would get a Syntax Error -> Renderer.prototype.initialiseWebGL() {... would result in Uncaught SyntaxError: Unexpected token {

Heres an Commented Example

function Renderer() {
    initialiseWebGL(); // I call the global declared function
    this.initialiseShader(); //I call the Prototypes function
    this.initialiseBuffer(); //Me too
}

Renderer.prototype.initialiseWebGL = function (){ //Here a function gets assigned to propertie of `Renderer`s `prototype` Object
    //Do stuff.
};

Renderer.prototype.initialiseShader = function (){
        console.log("Do Shader Stuff");
};

Renderer.prototype.initialiseBuffer = function (){
        console.log("Do initialise stuff");
};
 Renderer.prototype.initialiseBuffer() // I invoke the method above
{
 console.log("I'm a Block statement");
}; 

function initialiseWebGL () { //I'm the global declared function
  console.log("Global");
}

var ren1 = new Renderer();

/*"Do initialise stuff"  
"I'm a Block statement"  
"Global"  
"Do Shader Stuff"  
"Do initialise stuff"*/

As you can see in the consoles Output

Heres a JSBin

Answer 3

Since your instances inherit the (method) properties from the prototype objects, you need to access them as properties and not as plain variables:

function Renderer() {
    this.initialiseWebGL();
    this.initialiseShader();
    this.initialiseBuffer();
}