Typescript Variable Scope

[A.Russell]

Anther WTF moment with Typescript. It is similar to a previous problem I had, but doesn't have the same solution. Could someone explain this, please? 

module TestGame{export class StateSettingStage extends Phaser.State {  sally: TargetSprite; //subclass of Phaser.Sprite  shoes: Token; //subclass of Phaser.Sprite  this.sally = new TargetSprite(this.game, 350, 20, "sally");  this.game.add.existing(this.sally);  this.shoes= new TargetSprite(this.game, 350, 20, "shoes");  this.game.add.existing(this.shoes);  ->this.shoes.setTargetSprite(this.sally); <--- No problem  this.clothes.children.forEach(function (val: Token) {                val.anchor.setTo(0.5, 0.5);                //val.setTargetSprite(this.sally); <-- this is what I really wanted to do, but...->              this.shoes.setTargetSprite(this.sally); <-- this.shoes and this.marry are undefined!            })  }}

Why are "shoes" and "sally" undefined when within the foreach callback function? I checked, and there is no argument I can use to pass these variables to the callback function (not that I should need to anyway, because they are within scope!)

[clark]

Lost scope? Does the Lambda help?

function (val: Token) => void {}

[XekeDeath]

Good ole 'this' identity crisis...

Inside your forEach callback, 'this' is not what it was while outside your callback...

 

Is 'this.clothes' a Phaser.Group...? You could remove the 'children' part of that line and call forEach on the group instead, and pass 'this' in as the callback context, and then 'this' inside the callback will be the same 'this' as the 'this' outside the callback...

this.clothes.forEach(function (val: Token) {                val.anchor.setTo(0.5, 0.5);                //val.setTargetSprite(this.sally); <-- this is what I really wanted to do, but...->              this.shoes.setTargetSprite(this.sally); <-- this.shoes and this.marry are undefined!            }, this);

(I love talking about 'this' in javascript, it sounds so confusing but makes perfect sense...! kinda.....)

[A.Russell]

I get the idea, but I don't know the syntax to pull it off.

 

Simply adding => void, or :void => was a syntax error. 

 

So, I started to try this:

 

//this function is correct syntax using the lambda:

var interateChildren = (child: Token): void => {

                child.anchor.setTo(0.5, 0.5);

                child.setTargetSprite(this.sally);

            };. 

 

But that won't fit with: 

 

this.clothes.children.forEach(function(val: Token): void  {

                

            }

 

...and it's just a big mess, because I don't really understand it.  

 

What is the correct syntax?

[clark]

        private collection: string[] = [];        private apple: string = "apple";        constructor() {            this.collection.push("hi");            this.collection.forEach((value: string, index: number, array: string[]): void => {                console.log(this);  //this.apple is fine, without the lambda, this would mean this function scope.... has no "apple"                console.log(value, index, array)            });        }

 

Outputs

 

this: Game  (The above was a Game class)
value: "hi"

index: 0

array: ["hi"];

 

[A.Russell]

XeDeath, thanks again. That was a copy-and-paste-perfect solution. I really have trouble getting my head around "this" not being "this." I am going to have to look into "this" more. "This" is giving me a headache. 

 

Clark: I got a syntax error when I tried to use the lambda. At a glance the only difference I can see is that you have used all of foreach's arguments.