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?

Minko Gechev · Accepted Answer · 2014-03-13 15:23:21Z

59

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

edited Mar 13, 2014 at 15:23

answered Jan 21, 2013 at 14:52

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

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

5 Comments

gang Over a year ago

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

Minko Gechev Over a year ago

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

EricC Over a year ago

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 Over a year ago

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 Over a year ago

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__.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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

Bergi · Accepted Answer · 2013-01-21 15:13:38Z

4

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

answered Jan 21, 2013 at 15:13

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

2 Comments

Riza Khan Over a year ago

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 Over a year ago

@RizaKhan Use class syntax in TypeScript

Collectives™ on Stack Overflow

Javascript calling prototype functions in constructor

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related