What's with the constant use of "this"?

[What?]

So I've seen two ways of writing Javascript.

 

< Code that looks like this...

 

< ...and code that looks like this.

 

(don't mind the code itself or any errors that might be in them)

 

The syntax is slightly different. It wouldn't bother me too much, but I still don't understand why the word "this" is being used so much. I don't even know what it's referring to.

 

Also, I know that scripts written the first way work perfectly with Phaser. It's just that I haven't seen a template written in that style that used the standard [main.js -> boot.js -> preload.js -> etc] system, so I don't know what to write for that.

 

I really want to write in the first syntax because that's what I'm experienced in, and using the second kind is throwing me for a loop and stopping me from doing cool stuff. Until now I didn't know there were two ways of writing JS. (if that's the case)

[JUL]

"this" refers to a "depth" at which you might want to look at.

Its value is relative to the object inside which it is called...

 

 

 

" this is a variable. It points to the object which is applied to the function. "

 

Keep repeating this over and over again until you understand it.

 

 

 

You can also read this

 

http://techblog.appnexus.com/2011/understanding-javascripts-this-keyword/

[chg]

The latter is a part of a pattern for emulating classes (object oriented programming aka. OOP) in Javascript. When used in a class's member function the "this" keyword refers to the instance of the class the call was made against and lets you access that instance's member variables and functions.

 

Imagine a "class" for pets with a "member variable"/"property" called name and a "member function" (aka "method") to log that name to the console. The member function would use this.name to retrieve the name property.

 

Now if you can create a variable from the pets "class" (ie. you create an "instance" of it) you can set the name property to "fido" and your method will log "fido" the console. You can create a 2nd instance with the name set to "rex" and it's method would log "rex" to the console, but if you called the method of the fido instance it would still output fido! This is just one important concept of OOP called encapsulation, it lets you write code clean code more easily and helps you in game coding to say specify how an enemy NPC might move and have the behaviour be able to apply to all of that type of enemy.

 

I won't touch on the additional fundamental concepts (or cool tricks!) in OOP: "inheritance" and "polymorphism", but if you aren't familiar with any of the OOP concepts here you should endeavour to learn about them. Many libraries, including like Phaser are based on Object Oriented Programming; and OOP is considered a completely different paradigm of programming vs. the "imperative" paradigm of procedural programming ie. writing only procedures that act only on global or local variables (eg. as per your 1st screenshot Note: srsly, learn to paste code as text next time, screenshots of code are not cool).

 

The "this" keyword in Javascript is a little tricky in that it does even more than the OOP tricks described above ( as you will see when you look at the documentation JUL provided or look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method ), this is in contrast to languages like Java and c++ where "this" is only used to refer to the instance of a class...

[nocaoper]

I've tested a variable with and without this and I think it's because this allow the variable to be accessible in other methods.

Lets say we have this code:

  create: function() {
     this.background=this.game.add.sprite(0,0,'myBackground');
   },
   update: function() {
     console.log(this.background);
   }

I tried to replace <<this.background>> with <<var background=...>> in the create function. The result: I get undefined in the update function. This is absolutely needed.