Getting mixed up using This scopes.

[Raxxen]

Hi all,

 

I am currently trying to use buttons in a game. I followed a tutorial on how to make them and they work well. The only problem is I am getting a problem with scope. I have created a board object then set alot of values using this.values. However when I made my buttons they also used this.values. I am having trouble trying to get it sorted out. Here is my code. Hopefully you can understand this better then my explanation: 

Board.prototype.setup = function() {    //Create all the buttons.    var buttonTexture = PIXI.Texture.fromImage("./button.png");    // this just makes a button and a button array.    var buttons = [];    for (var i = 0; i < this._tokenColors.length; i++) {        var button = new PIXI.Sprite(buttonTexture);        button.anchor.x = 0.0;        button.anchor.y = 0.0;        button.buttonMode = true;        button.interactive = true;        button.position.x = (viewWidth/6) * (i % 6);        button.position.y = viewHeight - 100;        button.color = this._tokenColors[i];        button.tint = button.color;                stage.addChild(button);        buttons.push(button);        //I tried getting it to use a function in the Board class.        button.mousedown = button.touchstart = function(data) {            Board.prototype.nextColor(this.color);                    };    }};//Here is the function it calls when pressedBoard.prototype.nextColor = function (color) {    document.getElementById("debug").innerHTML = color + " has been pressed";    this._nextColor = color; //This should set the BOARD'S next color    this._ready = true; //This should set the BOARD to ready}

I believe what is happening is instead of passing the values to the Board class, it is passing it to the button that calls the function instead. I just have no idea how to fix this. Any help would be greatly appreciated!

 

Lenny

[Zaidar]

What if you try :

button.mousedown = button.touchstart = function(data) {  Board.prototype.nextColor(this.color).bind(this);};

[Raxxen]

Hmm... I tried that and it didn't help. I don't know if it will help but you can look at the actual game here: http://www.theboomstickstudios.com/games/OCF.

[Qqwy]

Calling a function through the prototype is the same as calling any normal(e.g. not bound to an object) function. In other words, your assumption is correct:

-In the button.onmousedown handler, the 'this' object refers to the button.

-When the Board.prototype.nextColor() is called inside there, the 'this' object still refers to the button.

 

Passing values to handlers is one of the things that JavaScript is not very good at (and one of the things they try to fix in ECMAScript 6). The solution suggested by many developers is to create a second reference to the Board object, e.g:

var thisBoard = this;button.mousedown = button.touchstart = function(data) {    thisBoard.nextColor(this.color);};

I hope this helps.

 

~Qqwy

[Zaidar]

Hi Qqwy you score a point in fact, it seems to work.

 

Your solution is what I tried to emulate with the use of bind.

 

this code works too and allow not to create a new variable to reference the current board :

button.mousedown = button.touchstart = function(data) {   this.nextColor(this.color);}.bind(this);

(I've discovered bind not a long time ago, so now I try to use it when possible when I encounter a closure problem)

[xerver]

Bind is better when used once, scoping a `self` variable is better when the closure is repeated created (which you should try to avoid). Bind recreates *another* closure, so it is more expensive.

[Raxxen]

Thank Qqwy! That worked perfectly. 

 

Xerver you said that a closure repeated created should be avoided. Are you referring to the way I call a loop to make my buttons? If so what's an alternative method? Thanks for your help!

[1-800-STAR-WARS]

Thank Qqwy! That worked perfectly. 

 

Xerver you said that a closure repeated created should be avoided. Are you referring to the way I call a loop to make my buttons? If so what's an alternative method? Thanks for your help!

 

I think what he means is using bind returns a new function each time its called, so if you're making 100 objects all with bound contexts, it's less efficient than using the 'var that = this;' approach because that will always just be a reference to the object.

[xerver]

both, when you loop and create a closure each time you are creating `n` new closures that all do the same thing. Unless you *need* the iteration variable in your closure scope you can create a function normally and pass each iteration:

function onClick(e) {}for(var i = 0; i < 1000; ++i) {    something.on('click', onClick);}

That will not only be faster at run time, it will take less memory. To maintain your bound context, create the bound function once:

function MyThing() {    var boundFunc = this.onClick.bind(this);    for(var i = 0; i < 1000; ++i) {        button.mousedown = button.touchstart = boundFunc;    }}MyThing.prototype.onClick(e) {}

[Zaidar]

Oh, ok xerver, thx fort the clarification

[Raxxen]

Hey, Xerver,

 

When I tried your first method i got the error that the button has no method "on". 

 

EDIT:

 

When I tried the second method, I am unsure of how to get the button's colour.

Board.prototype.onClick = function(e) {    this.nextColor(e.color); //Doesn't work, also tried calling this.color but to no avail};

Cheers

[xerver]

The argument is an instance of InteractionData (https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/InteractionData.js) not the item you clicked on. Use e.target to get the sprite that was clicked.

[mwatt]

It is important to understand that "this" in JavaScript is not the same as "this" in for instance, Java.  In JavaScript, the "this pointer" is contextual.  It can change due to multiple reasons, the most commonly confusing ones are in timer invoked functions and in events.

[Raxxen]

Hey all, I ended up getting it to work! Thanks so much for your help.