self.Rotate() is not a function in prototype

Question

I've been looking at the other questions that are similar to mine, but I can't seem to find an answer.

The error that I'm having is in the title as well:

Uncaught TypeError: self.Rotate() is not a function

Here's the full code where this happens:

var Card = function(renderer, stage) {
    var self = this;

    self.name = "None";
    self.health = 5;

    self.renderer = renderer;
    self.stage = stage;

    self.sprite = null;

    PIXI.loader.add("FirePlace/GW2-Logo.jpg").load(self.Setup);
};

Card.prototype.Setup = function() {
    self.sprite = new PIXI.Sprite(PIXI.loader.resources["FirePlace/GW2-Logo.jpg"].texture);
    console.log(self.stage);
    self.stage.addChild(self.sprite);
    console.log("Sprite loaded");
    self.renderer.render(self.stage);
    self.Rotate();
};

Card.prototype.SetName = function(name) {
    self.name = name;
};

Card.prototype.Rotate = function() {
    requestAnimationFrame(self.Rotate);

    if (self.sprite === null)
        console.log("Sprite is null");

    if (self.sprite !== null && self.sprite.rotation <= 1.5708)
        self.sprite.rotation += 0.03;

    self.renderer.render(self.stage);
};

At the end of the Setup function I try to call the Rotate function and this is where it fails.

`self` is not defined among the functions of your class, at the beginning of your functions, you need to add `var self = this;` — ahitt6345, Oct 01 '16 at 00:13
Also unless you have another function closure, you don't even need self, just use this. — Keith, Oct 01 '16 at 00:16
The only reason to assign `self` is if you're calling methods that rebind `this`. — tadman, Oct 01 '16 at 03:23

StackSlave · Answer 1 · 2016-10-01T00:49:49.567

1

Within Card.prototype.Setup, and your other methods later added to your Card.prototype, self is window.self, because var is private and not part of the properties which your Constructor inherits from its prototype Object. Change self to this or Card (if you prefer the context to be bound) in there for the context you seek.

edited Oct 01 '16 at 00:49

answered Oct 01 '16 at 00:32

StackSlave

10,613
2
18
35

1

Not exactly a reserved word... you may use it as any identifier, arbitrarily. It's just [a common idiom to use `self` to get the current object](http://justjs.com/posts/this-considered-harmful) because `this` will not be captured from the context (and, also, because there is `window.self`). – paulotorrens Oct 01 '16 at 00:43
Since `window` is implicit `self` is `window.self` if not assigned to a `var`. – StackSlave Oct 01 '16 at 00:47
when I try to change the `self.Rotate()` to `Card.Rotate()` or `this.Rotate()` I get the same error – Dries Oct 01 '16 at 10:25
@Dries Did you try to replace all instances of `self` with `this`? – ahitt6345 Oct 01 '16 at 18:06
@ahitt6345 if I do that I get another error (addChild not found). That's why initially changed everything to the `self` thing – Dries Oct 01 '16 at 19:59
You'll figure out the word `this` eventually. – StackSlave Oct 04 '16 at 01:29

score 1 · Accepted Answer · answered Oct 01 '16 at 20:26

I have found that this code prevents the addChild problem that you had. Look at the comments in the code for explanation.

var Card = function(renderer, stage) {
    var self = this;

    self.name = "None";
    self.health = 5;

    self.renderer = renderer;
    self.stage = stage;

    self.sprite = null;
    var x = function(){
        self.Setup.apply(self,arguments); 
    }
    PIXI.loader.add("FirePlace/GW2-Logo.jpg").load(x); // origionally: PIXI.loader.add("FirePlace/GW2-Logo.jpg").load(self.Setup);
    // self would not be defined in whatever other context it is used in when it is called. All I had to do was wrap it in a function and it was fixed
};

Card.prototype.Setup = function() {
    var self = this;
    self.sprite = new PIXI.Sprite(PIXI.loader.resources["FirePlace/GW2-Logo.jpg"].texture);
    console.log("Stage is:",self.stage); // Now stage is defined since I wrapped this function in another function.
    self.stage.addChild(self.sprite);
    console.log("Sprite loaded");
    self.renderer.render(self.stage);
    self.Rotate();
};

Card.prototype.SetName = function(name) {
    var self = this; // I also defined self = this in every single function :D
    self.name = name;
};

Card.prototype.Rotate = function() {
    var self = this;
    var x = function(){
        if (self.sprite === null)
        console.log("Sprite is null");

        if (self.sprite !== null && self.sprite.rotation <= 1.5708) 
            self.sprite.rotation += 0.03;

        self.renderer.render(self.stage);
        window.requestAnimationFrame(x);
    }; // Same goes for this one. 
    window.requestAnimationFrame(x);


};

Amazing @ahitt6345, this works as expected. Is there an explanation why things need to be so difficult? I am a c#/c++ programmer normally and this `var self = this` stuff in every function and then the function inside the prototype functions really don't make sense to me. — Dries, Oct 01 '16 at 20:30
What you just asked is another whole stackoverflow question of its own. Let me find it for you. — ahitt6345, Oct 01 '16 at 20:40
Here it is: http://stackoverflow.com/a/3127440/4309643 It basically explains the `this` keyword and all of it's glorious weirdness. — ahitt6345, Oct 01 '16 at 20:43
I asked it since I didn't find anything about it. Huge thanks for the link and the help! — Dries, Oct 01 '16 at 20:51

self.Rotate() is not a function in prototype

2 Answers2