pass two function references to a constructor occurs error in Javascript

Question

I wanna create instance of object in javascript. I try to pass two function references to another class's constructor. But it throws error like below:

this.onFailFunction is not a function

But, If I pass just one reference (onSuccess) it works. What is difference?

index.html

<script>

            function onSuccess(data, message)
            {
                console.log(data);
                console.log(message);
            }


            function onFail(data, message, errorCode)
            {
                console.log(data);
                console.log(message);
                console.log(errorCode);
            }
            var callBack = new EbookCallBack(onSuccess, onFail);
            callBack.mainCallback.callSuccessFunction({success:false, message:"Wovvv", errorcode:1, data:"asdsa"});

        </script>

ebookcallback.js

class EbookCallBack 
{

    constructor(onSuccessFunction, onFailFunction) 
    {
        this.onSuccessFunction = onSuccessFunction;
        this.onFailFunction = onFailFunction;
        this.mainCallback = new CallBack(this.onSuccess, this.onError);
    }

    onSuccess(result) 
     {
        if(result.success)
        {
            this.onSuccessFunction(result.data, result.message);
        }
        else
        {
            this.onFailFunction(result.data, result.message, result.errorcode);
        }
    }

    onError(message) 
    {
        if(this.onErrorFunction !== undefined) 
        {
            this.onErrorFunction(message);
        } 
    }


}

maincallback.js

class CallBack 
{

    constructor(onSuccessFunction, onErrorFunction) 
    {
        this.onSuccessFunction = onSuccessFunction;
        this.onErrorFunction = onErrorFunction;
    }

    callSuccessFunction(data) 
    {
        this.onSuccessFunction(data);
    }

    callErrorFunction(message) 
    {
        this.onErrorFunction(message);
    }

}

t.niese · Accepted Answer · 2017-09-20 11:29:19Z

Your problem starts at this part:

this.mainCallback = new CallBack(this.onSuccess, this.onError);

Because it will pass the function this.onSuccess and this.onError (which isn't defined anyway) without any connection to the EbookCallBack object, so later the this in this functions refers to the global object and not to the EbookCallBack anymore.

So if callSuccessFunction is called on CallBack, and this function will call this.onSuccessFunction(data), which then calls the onSuccess function you originally passed from the EbookCallBack, but this function will be called in the context of the global object and not in the one of the EbookCallBack.

You would need to use bind.

this.mainCallback = new CallBack(this.onSuccess.bind(this), this.onError.bind(this) );

(this.onError.bind(this) would right now fail, because onError is not defined)

TKoL · Accepted Answer · 2017-09-22 08:49:47Z

1

"this" is being lost. Inside EbookCallback,

onSuccess(result) 
 {
    if(result.success)
    {
        this.onSuccessFunction(result.data, result.message);
    }
    else
    {
        this.onFailFunction(result.data, result.message, result.errorcode);
    }
}

I set up a breakpoint in chrome devtools and when you get to this.onFailFunction, "this" is of the CallBack class, not the EbookCallback class. That's because when you call this.onSuccessFunction(data);, the context is set to the CallBack object

You can fix "this" by replacing new CallBack(this.onSuccess, this.onError); with new CallBack(this.onSuccess.bind(this), this.onFailFunction.bind(this));

EDIT

It occurs to me that nobody provided a potential alternative to 'bind'

this.mainCallback = new CallBack(this.onSuccess, this.onError); could be changed to the following:

this.mainCallback = new CallBack(function(result){
    this.onSuccess(result);
}, function(message){
    this.onError(message);
});

This solution might be more intuitive for some.

edited Sep 22, 2017 at 8:49

answered Sep 20, 2017 at 11:30

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

3 Comments

hkaraoglu Over a year ago

Yes. EbookCallBack class is between index.html page's script and Callback class. I access reference of CallBack class by EbookCallBack class

hkaraoglu Over a year ago

@t.niese answered the question first. So, I accept his answer. Thank you too.

TKoL Over a year ago

@hkaraoglu i editted my answer to provide an alternative solution

Duncan Thacker · Accepted Answer · 2017-09-20 11:35:40Z

This appears to be a binding problem. When you do this:

callErrorFunction(message) 
{
   this.onErrorFunction(message);
}

...you're calling the function in the EbookCallBack class, but your this variable is bound to the current object (Callback), even when you're executing code in a different class.

Basically, using this in javascript is extremely difficult and confusing. I generally recommend not doing it at all if you can help it. Lots of programmers try to write javascript as if it's Java and wrap everything inside objects, but you really don't need to do that at all! (Are you by any chance a Java coder in a previous life?)

An OOP style in javascript adds a lot of boilerplate and bugs with this. You may find a functional style a lot more readable and maintainable. Check this out:

//just a plain JS object, not a class
var myCallbacks = {
    onSuccess: function( data, message ) {
       //do something
    },
    onFail: function( data, message, errorCode ) {
       //do something else
    }
};

tryTheThing( "fish", myCallbacks );

function tryTheThing( data, myCallbacks ) {
   if ( data === "fish" ) {
      myCallbacks.onSuccess(data, "Yay");
   } else {
      myCallbacks.onFail(data, "boo", 51);
   }
}

Much simpler, right? No need for classes or this. Or even better, use Javascript Promises, which already encapsulate this behaviour:

tryTheThing( "fish" )
   .then( function( data, message ) {
      //success
   }).catch( function( data, message, errorcode ) {
      //fail
   });

function tryTheThing( data ) {
   return new Promise( function( resolve, reject ) { 
      if ( data === "fish" ) {
         resolve( data, "yay" );
      } else {
         reject( data, "boo", 51 );
      }
   });
}

Promises are a core part of javascript now and a great way to handle callbacks without polluting your function parameters!

Collectives™ on Stack Overflow

pass two function references to a constructor occurs error in Javascript

3 Answers 3

Comments

EDIT

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

EDIT

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related