CODEWITHSUNDEEP
javascriptoop
Victor
Victor

Reputation: 1

Javascript Private Method Issue

I imagine that the error below is pretty easy to fix for someone who is not a newb ( like me)

Can anyone tell me why the call to "this.slideNext() " in the code below does not work. Apparently "this.slideNext() " is not a function?

function ScoopAnimation(_path, _start, _end, _delay) {

    this.start = _start
    this.end = _end;
    this.delay = _delay;
    this.path = _path
    this.currentFrame = _start;

    this.slideNext() = function() {
        this.currentFrame++;
        console.log('  next this.currentFrame  : ' + this.currentFrame);
    }

    this.start = function() {
        console.log('next this.start()   : ' + this.currentFrame);
        //THE NEXT LINE CAUSES THE ERROR!
        this.slideNext()
    }

    this.start();

}

Upvotes: 0

Views: 116

Answers (4)

osahyoun
osahyoun

Reputation: 5231

If you don't intend on ScoopANimation being used as a constructor, then I'd personally ditch the use of 'this':

function ScoopAnimation(_path, _start, _end, _delay) {

  var start = _start,
      end = _end,
      delay = _delay,
      path = _path,
      currentFrame = _start;

    function slideNext() {
      currentFrame++;
      console.log('  next this.currentFrame  : ' + currentFrame);
    }

    function start() {
      console.log('next this.start()   : ' + currentFrame);
      //THE NEXT LINE CAUSES THE ERROR!
      slideNext()
    }

    start();
}

Upvotes: 0

jAndy
jAndy

Reputation: 236202

this has a different reference/context for each function, based on how the function is invoked. In your snippet, you're calling the start function() which (called just like that) will reference the global object in its this context variable for non-ES5 strict and undefined in ES5 strict.

To solve that problem, you can either store the reference for your "outer" this in a local variable, like

var myScope = this;

and then use myScope instead of this within any other function context you need to access the outer scope.

myScope.slideNext();

Another option would be to use ES5 Function.prototype.bind to bind the context for a function. This would look like:

this.start = function() {
    console.log('next this.start()   : ' + this.currentFrame);
    //THE NEXT LINE CAUSES THE ERROR!
    this.slideNext()
}.bind(this);

Now, we bound the current value of this to the context of the start function. Now you can just continue to use this within the function. Notice that this will only work for js engines that support ES5 or you have loaded some kind of ES5 Shim script.

Upvotes: 0

CompanyDroneFromSector7G
CompanyDroneFromSector7G

Reputation: 4527

I could be wrong, but shouldn't it be defined as:

// defined without brackets
this.slideNext = function (){
    this.currentFrame ++;
    console.log('  next this.currentFrame  : ' +this.currentFrame );
    }

Upvotes: 0

japrescott
japrescott

Reputation: 5023

no, that line you flaged as "the bad one" is actually correct. further up, you are trying to execute the slideNext function and then assign a function to the result. it should be this;

this.slideNext = function (){
    this.currentFrame ++;
    console.log('  next this.currentFrame  : ' +this.currentFrame );
}

hope i helped

Upvotes: 1

Related Questions