Javascript calling prototype functions in constructor

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?

Solution 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();

Solution 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

Solution 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();
}

Comments

[gang]

This is a bit confusing. Why do you call all those methods again when they already get called by the constructor?

[Minko Gechev]

@gang, it is useless. Thanks for the note.

[EricC]

Well, you could do something to the renderer and the later on you would want to reset it to the initial state without creating a new object (say you want to keep the object reference).

[Taylor Lopez]

When I have my code like so: function MyClass() { alert(this.doThing); }; MyClass.prototype.doThing = function(){ /*stuff*/ }; the alert's output is "undefined", so it doesn't know that its prototype function exists yet. What's up with that? In your example, you have the class definition (which calls its prototype functions) before the definition for your prototype functions, and it works? What's wrong with mine?

[Minko Gechev]

If you call MyClass without the new operator it will be invoked with context the global object (i.e. window.MyClass if you're using browser). Most likely window.doThing does not exist. However, if you use new MyClass(), the context (this) will be an object, which is instance of the constructor function, so doThing will exist as property at this.__proto__.

[Riza Khan]

This is outside the scope of this question, but you can't do this in Typecript? Gives me a 'this' implicitly has type 'any' because it does not have a type annotation. error. How to fix?

[Bergi]

@RizaKhan Use class syntax in TypeScript