First of all, Mister.Right just made a nice little post about this:
Second of all, I made a lengthy response in someone else's thread and I think it might help you. I have changed it a bit for you:
Introduction to "this" in JavaScript
Given no context at all, this will be the same as the window object (the mother of all objects, parent of everything).
console.log(this); // In most browser consoles this will display the window object & all its details.
When used inside of a function, this will refer to the object that houses that function, like so:
var MyNewObject = {};
MyNewObject.name = "Sam";
MyNewObject.greetings= function(){
console.log("My Name is" + this.name);
};
MyNewObject.greetings(); // prints "My Name is Sam" in the console.
When used in a constructor function with the new keyword, this will refer to the new object that is being created:
var CoolObject = function(nameInput){
this.name = nameInput;
this.greeting = function(){
console.log("My name is " + this.name);
};
};
var MyNewObject = new CoolObject("Sally");
MyNewObject.greeting(); // Logs "My name is Sally"
Because that is a constructor function, those properties do not just inherently exist inside of it. You can't do CoolObject.name, it won't work. The name property is using the this keyword and will only exist when the function is run with the new keyword so that it creates a new object.
Further Explaination and a Practical Example
JavaScript has this thing called scope. As in normal grammar, scope means " the extent of the area or subject matter that something deals with or to which it is relevant. ". In JavaScript, the scope of a variable determines where that variable is available for use. For example if you have a JavaScript file and you simply create a new variable outside of any objects or functions, that variable will automatically be assigned as a property of the window object. The window object is the mother of all other objects, it is the parent of everything in your code. Anything that is a property of the window object is considered global in scope, meaning you can access it from ANYWHERE in your code.
Then you have local scope. A variable that is local in scope is only accessible inside of its parent object or function. If you declare a variable from within a function, that variable is a local variable and stops existing for any code that is outside of that function.
Why does this all matter? Because this is a special, magical keyword in JavaScript. The scope of the this variable is dynamic, it depends on where it is used. The this keyword always refers to the current parent object of whatever piece of code is running. If this is used inside of a function then this will refer to the object that is a direct parent of that function. If this is used in a constructor function that is intended for use with the new keyword, then it will refer only to the instance of that new object that is created.
Take a look at this code from one of the RMMV core files:
Scene_Item.prototype.createCategoryWindow = function() {
this._categoryWindow = new Window_ItemCategory();
this._categoryWindow.setHelpWindow(this._helpWindow);
this._categoryWindow.y = this._helpWindow.height;
this._categoryWindow.setHandler('ok', this.onCategoryOk.bind(this));
this._categoryWindow.setHandler('cancel', this.popScene.bind(this));
this.addWindow(this._categoryWindow);
};
This is using JavaScript's prototype keyword as well, which I won't even begin to try and explain. It suffices to say that we have this object called Scene_Item. It has a property called createCategoryWindow which is also a function. In JavaScript, functions are objects too and that means they can have properties.
The Scene_Item function is intended to be used with the new keyword, so it's considered a constructor function. You would use it like this:
var MyVar = new Scene_Item();
The createCategoryWindow function is not a constructor. It is a child of the Scene_Item class (JavaScript doesn't technically have classes but when you have a function that acts as a constructor, you can treat it like a class, similar to languages like C# and Java). As such, the this keyword in the createCategoryWindow function will refer to the Scene_Item object. In my example, this would refer to MyVar since MyVar is an instance of the Scene_Item class. In case you haven't gleaned it, an instance is a variable that was constructed with a constructor function. The constructor function (Scene_Item) doesn't do anything by itself, it's purpose is to provide instructions on how to create a new object and what properties it should have.
When I create MyVar I created a new instance of the Scene_Item class. MyVar has all of the default properties that are part of the Scene_Item prototype, including the createCategoryWindow function!
We can access the properties of this instance like this:
MyVar.createCategoryWindow(); // Runs the createCategoryWindow function for MyVar, changes other properties of MyVar.
MyVar now has a property called _categoryWindow which, in itself, is an instance of the Window_ItemCategory class.
Now that we created that property with the createCategoryWindow function, we can access it like so:
MyVar._categoryWindow.index = 1;
So the this keyword referred to the parent object of the function it was inside of. If you use the this keyword outside of an object or function, or inside a function that's just defined in the root of your document, it will refer to the window object.
Just Because It Can: JavaScript Breaks Its Own Rules
Here are some annoying contradictions to scope and how it works:
If you define a local variable (inside a function) that has the same name as a global variable, within the scope of that function it will be used instead of the global version. Once your code stops running inside that function, the global version will take over again. This can only be done by using the var keyword before the name of the variable.
var myMessage = "I Am Global!" // Global Variable
function doStuff(){ // Global Function
console.log(myMessage);
}
doStuff(); // Logs "I am Global!"
function doMoreStuff(){ // Global Variable
var myMessage = "I am Local!" // Local Variable with Same Name!!!
console.log(myMessage);
}
doMoreStuff(); // logs "I am Local!"
console.log(myMessage); // logs "I am Global" because myMessage was NOT changed by doMoreStuff().
JavaScript has another thing called closures. A closure basically allows a variable to live outside of its scope. When you use the var keyword inside of a function, you can create other functions within that use that variable and then return them or call them from different places. Even though that variable usually would die outside of it's function, it lives on because it was used in a function that can be invoked later:
function greeting(name){
var message = 'Hi ' + name; // Local-Only Variable
var greet = function(){ //Local-Only Function
console.log(message);
}
return greet; // We're returning the function so it can be used later!
}
var MyGreeting = greeting("Bob"); // A new variable that is assigned the value of the greet function
MyGreeting(); // Logs "Hi Bob" because the message variable lived on through the greet function's use of it.
I hope that helps!
----
I make a lot of typos so I will probably edit this 50 times. Please be patient.
